Add a Widget

You can add a widget to a plugin on specific layouts. These widgets allow you to integrate with third parties.

PREREQUISITES:

  • You must have Cityworks 15.8 or newer and have Respond 4.0 or newer installed in your site. See Install a Plugin in the Admin 3.5 Guide for more information on installing plugins.

IMPORTANT: Adding and configuring a widget is currently available for the Case Summary, Case Object - Detail, Work Order Edit, and Service Request Edit layouts with the Respond plugin selected.

  1. Select a plugin to customize, such as Respond. See Select a Plugin to Customize for more information.
  2. Select the page from the Layout drop-down list in the Profile panel.

Notice the Widget Slots panel populates. The Widget Slots panel shows any containers or "areas" (for a specific layout) that has been enabled (by a Cityworks developer) where a widget can be added.

  1. Select the widget slot you want to add a widget to.
  2. Click Add Widget.

  1. Select the widget placeholder in the panel and click Edit Widget.

The Widget Configurator panel opens.

  1. Select the Widget Type: HTML or Link.
  2. Enter the Widget Name. This is what the users will see in the plugin.

  1. Click the information icon for instructions and an example of adding a link widget.

NOTE: Click the gear icon to change the Editor Theme, if desired. It is set on the Dark theme by default.

  1. Enter the code in the Typescript field. You can copy and paste the example code from the information icon, but don't forget to change the code (i.e., URL or Type (icon) to what you need).
  2. Use the CSS field to style your Typescript code.

NOTE: Intellisense is available in the Typescript and CSS fields and allows you to easily create and complete your code.

  1. Click Save and click Close.
  2. Click Save Profile on the Profile panel to save changes to the profile.

The widget can now be seen and used in the selected plugin.

  1. Select a plugin to customize, such as Respond. See Select a Plugin to Customize for more information.
  2. Select the page from the Layout drop-down list in the Profile panel.
  3. Select a control in the Controls panel.
  4. Click Insert Widget. If you selected a panel control, the widget is added to the bottom of the panel. If you selected a text, button, or field control, the widget is added below the selected control.

  1. Select the widget placeholder in the panel and click Configure Widget in the Control Details panel.

TIP: You can also double-click the widget placeholder, when using a desktop, to open the Widget Configurator panel.

The Widget Configurator panel opens.

  1. Select the Widget Type: HTML or Link.
  2. Enter the Widget Name. This is what the users will see in the plugin.

  1. Click the information icon for instructions and an example of adding a link widget.

NOTE: Click the gear icon to change the Editor Theme, if desired. It is set on the Dark theme by default.

  1. Enter the code in the Typescript field. You can copy and paste the example code from the information icon, but don't forget to change the code (i.e., URL or Type (icon) to what you need).
  2. Use the CSS field to style your Typescript code.

NOTE: Intellisense is available in the Typescript and CSS fields and allows you to easily create and complete your code.

  1. Click Save and click Close.
  2. Click Save Profile on the Profile panel to save changes to the profile.

The widget can now be seen and used in the selected plugin.

TIP: See Add a Third-party Widget for a quick start guide on this subject.