Take advantage of existing code by cloning and editing an existing
widget.
Note: Base system widgets are read only so you can benefit from future updates. To make
changes, you can clone base system widgets. However, cloned widgets are considered
custom and do not benefit from future updates to the widgets they were cloned
from.
-
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.
-
From the list menu in the widget header, click Clone "Hello World
2".
Figure 1. Clone a widget
-
Enter a name for the cloned widget. The widget ID is created automatically
based on the widget name.
- (Optional)
Select Create test page to automatically create a page
containing the widget.
-
Use the check boxes to show or hide the different components of the widget
editor as needed. Make changes to the HTML Template, CSS, client script, server
script, or the link function.
Figure 2. Hello World 2 clone
-
In order to enable a preview of your widget, use Enable
Preview from the menu. 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 must manually clone the
template and change the name of the template reference in the widget.
For example, the header menu widget uses the Angular ng-template
menuTemplate. If you clone the header menu widget, you must
also clone the menuTemplate and give the clone a unique name. 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
