In Service Portal, it’s common to create widgets that are used in multiple places. But if you need change the HTML, developers often clone the widget — a pattern that quickly becomes hard to maintain and results in lots of additional widgets.

Instead, let’s walk through how to build a template-driven, reusable widget that allows you to select and load different HTML templates from the instance options, without cloning the widget or touching the core widget code.

In this example, we’ll look at how to create a new Button widget, similar to the OOB Icon Link widget, but with multiple HTML templates.

Step 1: Add a Reference Field to the Instance Table

Create a reference field on the sp_instance table to allow widget instances to reference an HTML template.

1. Navigate to: Service Portal > Widget Instances
2. Add a new field:
   Column label: Template
   Name: u_template
   Type: Reference
   Reference: Angular ng-template
   Use reference qualifier: Advanced
   Reference qual:
   
   1	javascript: "sp_widget=" + current.getValue("sp_widget");

   Note: to add the advanced reference qualifier, you’ll need to click the “Advanced” related link.
3. Add the new Template field to the “SP Instance Config” View and “Presentation” Section for any of the Instance tables where you plan on using the templates, e.g. sp_instance_link.
   
   

Step 2: Create the Widget

Now, create the widget that will dynamically load templates using the following:

Body HTML template

Server Script

Data table & Fields

Step 3: Add Templates

In the form view of the new widget, start adding templates to the “Angular ng-templates” related list. You can use the following as an example:

Name: template01.html

Template:

Step 3: Use the Widget

Now all you have to do is to test it out. Open the designer and add the widget multiple times to the page and try changing the template using the Instance Options context menu.

Next steps

For an even more powerful button widget, you can add an Image field to the Instance table, so that your buttons can incorporate images instead of icons.

If you found this tutorial useful, please let me know in the comments below because I have a lot of techniques like this that I’d like to share.