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. Navigate to: Service Portal > Widget Instances Add a new field: Column label: Template Name: u_template Type: Reference Reference: Angular ng-template Use reference qualifier: Advanced Reference qual: [crayon-690b9bf44288c697342815/] Note: to add the advanced reference qualifier, you'll need to click the "Advanced" related link. 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 [crayon-690b9bf442891958810698/] Server Script [crayon-690b9bf442893900403872/] 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: [crayon-690b9bf442894650772953/] 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. ol > li { margin-bottom: 16px; }