Chuck Tomasi

3 minute read

I’m going to assume you know the basics of creating a widget and how the Service Portal widget editor works.

Recently, I was talking with David Loo from Perspectium about the early days of development on the Now Platform. He told me an interesting story about Fred Luddy. It seems Fred found it a fire-able offense to copy code. OK, we’ve all done it because we’ve built that sort algorithm, widget, or component before, but the point he was trying to make is two-fold. First, by copying code you are not thinking objectively - as in programming. Instead of the same code twice, make a function, class, or some other reusable component that can be called twice. Second, if the code has an issue, you’ve just made the debugging and remediation twice as hard to detect and correct.

Why do I bring this up? Because every time I learn a new programming/scripting language, I find the need to reuse code. Service Portal was no different. While the server code can call script includes, and the client code can use services, I had recurring need to put the same bits in multiple places on my widget. This is where templates come in.

Let’s take an example of a simple list of objects displayed in a simple block of HTML like this:

  <div ng-repeat="row in c.data.table.list">      
    <div>${First name}: {{row.first_name}}</div>
    <div>${Last name}: {{row.last_name}}</div>
    <div>${Email}: {{row.email}}</div>
    <div>${Phone}: {{row.phone}}</div>
    <br />
  </div>

We can abstract the list content from the iteration quite easily. Step 1 is to create a template in your widget. This is done from the standard UI by going to Service Portal > Widgets, locating and opening your widget. Select the Angular ng-templates related list and create a new record.

2020-10-19-13-42-07.png

Give the template an ID - lower case and no whitespaces works best.

2020-10-19-13-44-09.png

Submit the form.

Now when you go in to the Service Portal Widget editor (or refresh while you’re already in there), you’ll see a Templates dropdown menu just below the menu bar with your new template list.

2020-10-19-13-52-10.png

Selecting the template opens a new pane. Copy the HTML content inside the ng-repeat block and paste it in the template.

2020-10-19-13-53-33.png

Next, call the template from within your original HTML like this:

<div ng-repeat="row in c.data.table.list">
  <div ng-include="'list-element'"></div>
</div>

NOTE: Pay close attention to the quotes on the ng-include. Yes, they are nested single and double quotes. It has to do with the way AngularJS interprets the variables (even in quotes) and prevents it from confusing the file name with a variable. Just do it the way it’s noted here and you’ll be fine.

The output is the same either way and while this may seem like a trivial example, it makes it easier to maintain the “body” of each list element apart from its context in the HTML pane of the widget. And if you want to add some CSS, you can easily do that in the template directly with <style></style> tags.

Recently I had a requirement to add the same icon several places in my widget. It was about 6 lines of HTML including the <img> tag. Without a template, it was extremely annoying to modify something as simple as a <center></center>, and of course, I wouldn’t remember to get all of them the same until after it’s in production! Using the template, I create the content once and include it where needed.

There are even plenty of cases where I create templates just to keep the HTML section of my widget more readable. I hope you find them as useful as I do.


Comments