Add a Widget

You can add a widget to specific layouts. These widgets allow you to integrate with third parties. Starting with Public Access 7.3, a new DivElement widget type has been added that enhances HTML5 extensibility in Public Access and supports embedded API and AJAX calls.

PREREQUISITES:

  • You must have the Public Site Admin check box selected in Admin. See Users in the Admin 3.2 Guide for more information. 

IMPORTANT: Adding and configuring a widget is currently available for the Case Summary, Home, Login, Make Payment, and Attachments layouts.

  1. Open the User menu.

  1. Click Admin.

  1. Click the Layout tab.

  1. Select the page or panel 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, DivElement, or Link.
  2. Enter the Widget Name. This is what the users will see in the selected page or panel within Public Access.

  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 page or panel within Public Access.

  1. Select the page or panel from the Layout drop-down list in the Profile panel.
  2. Select a control in the Controls panel.
  3. 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, DivElement, or Link.
  2. Enter the Widget Name. This is what the users will see in the selected page or panel within Public Access.

  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 page or panel within Public Access.

You can add a widget to specific layouts. These widgets allow you to integrate with third parties. Starting with Public Access 7.3, a new DivElement widget type has been added that enhances HTML5 extensibility in Public Access and supports embedded API and AJAX calls.

PREREQUISITES:

  • You must have the Public Site Admin check box selected in Admin. See Users in the Admin 3.2 Guide for more information. 

IMPORTANT: Adding and configuring a widget is currently available for the Case Summary, Home, Login, Make Payment, and Attachments layouts.

  1. Open the User menu.

  1. Click Admin.

  1. Click the Layout tab.

  1. Select the page or panel 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, DivElement, or Link.
  2. Enter the Widget Name. This is what the users will see in the selected page or panel within Public Access.

  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 page or panel within Public Access.

  1. Select the page or panel from the Layout drop-down list in the Profile panel.
  2. Select a control in the Controls panel.
  3. 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, DivElement, or Link.
  2. Enter the Widget Name. This is what the users will see in the selected page or panel within Public Access.

  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 page or panel within Public Access.