Create a widget

You can create widgets by editing and extending an existing widget, or by creating something completely new.

Only users comfortable working with HTML, client and server scripts, and CSS should make changes to a widget.
Note: Widgets are read only so you can benefit from future updates. To make any changes to a widget you need to clone it first.

It is often easier to clone and edit a widget that already exists rather than starting from scratch. However, you can create a completely new widget by clicking Create a new widget in the Widget Editor.

To clone and edit a widget:
  1. Open the Widget Editor in the Service Portal Configuration page, then select an existing widget from the Select a widget list. For example, select Hello World 2.
  2. From the list menu in the widget header, click Clone "Hello World 2".
    Figure 1. Clone a widget
    Clone a Widget form
  3. Enter a name for the cloned widget. The widget ID is created automatically based on the widget name.
  4. Select Create test page to automatically create a page containing the widget.
  5. Based on your use case, edit the HTML template, CSS, server script, client script, and link function.
    Figure 2. Hello World widget code example
    Use the sample code in the Hello World widget
  6. In order to enable a preview of your widget, in the list menu, select Enable Preview. Then use the eye icon that appears to show or hide a preview of your widget.

If you clone a widget that uses the Angular ng-template, you need to also manually clone the template and change the name of the template where it is referenced in the widget.

For example, the header menu widget uses the ng-template menuTemplate. If you copy the header menu widget you also need to copy the menuTemplate and rename it to an ng-template that doesn't already exist. When you open the clone of the header menu widget, you can see a reference to the menuTemplate in the HTML.

Figure 3. menuTemplate in header widget HTML
ng-template called menuTemplate highlighted and changed to menuTemplateCopy in header menu widget HTML