Creating a web widget

You can embed an external URL within a widget and save the widget independently as a web widget. When you preview or publish the widget, it displays the website or web application within the widget itself and not in a separate browser window. You cannot add widget-level filters or save this widget as a template. For the dashboard-level filters to work, you need to specify the filter names in the URL. You must enter the filter name within curly brackets in the URL at an appropriate location, based on the URL syntax.

Before you begin

  • If you want to set a background image for the web widget, then ensure that the image is already available on your computer.
  • Ensure that the website does not have any IFrame restrictions and can be embedded within Designer tool and other websites. To view the IFrame restrictions, you must check the response header of the external URL. If the Network tab displays any of the following options, then the website cannot be embedded:
    X-Frame-Options: deny
X-Frame-Options: sameorigin
X-Frame-Options: allow-from https://example.com/
  • You can add URLs that start with http or https only.

    For example, http://www.example.com

  • If you want to add one or more dashboard-level filters to the widget, then you must specify the filter names in the URL itself. You must be aware of the valid filter parameters that can be used to filter the website.

About this task

After you log in to the Dashboard Designer, you can create web widgets by using any of the following options on the landing page:

  • Click CREATE COMPONENTS, then in the Create Components page, click WIDGETS.
  • Click the Expand Expand icon to open the left navigation pane of Dashboard Designer, and click Custom Widgets > Create New Widget.

Procedure

To embed a website or web application in a widget, complete the following steps:

  1. In the left navigation pane of Dashboard Designer, click Custom Widgets > Create New Widget.

    The New Widget page opens.

  2. Click the Edit Edit icon that is displayed next to the New Widget, Widget Description, and Widget Title fields, and enter a name, title, and description for your widget.
    Note: Only alphanumeric characters, spaces, and underscore are supported.
  3. The Show Gridlines checkbox is selected by default.
    If you do not want the grid-line view, clear the checkbox.
  4. Click Specify an external URL and in the External URL field, enter an external URL of the web application or website that you want to embed in the widget.

    To go back to normal widget, click Cancel or click the Delete Delete icon that is displayed on the widget.

  5. If you want to map one or more dashboard-level filters, then you must enter the filter names within the curly brackets in the URL.
    For example, https://www.example.com/{filter_name_1}/{filter_name_2}
    Note: You can map multiple dashboard-level filters but cannot map any widget-level filters to the widget.
  6. Click Set Properties icon to set the widget properties.

    For more information, see Setting widget properties for all the chart types.

  7. Optional: To add a background image to the widget, complete the following steps:
    1. Click Background Image icon that is displayed on the upper-right of the widget.
    2. In the Background Image pop-up window, click Add Background Image, and then click Select from File.
    3. Browse to the image file location on your computer, select the file, and then click Open.
      Note: You can add PNG, JPEG, JPG, or GIF image files of size less than or equal to 2 MB.

      The selected image is added as a background image to the widget. To replace the image, repeat the steps, and select another image. To delete the image, click No Background Image.

  8. To save the widget as a web widget, click Save, and complete the following steps in the Save Widget window:
    1. In the Name field, enter a name for the web widget.
    2. To save the widget to an existing category, click Existing category, select a category name from the drop-down list, and then click Save.
    3. To save the widget to a new category, click New Category, enter a category name, and then click Save.
  9. To save the widget with another name, click the Save As option, and in the Save As Widget window, enter the required details.

Results

The newly created web widget is listed under Most Recently Created Widgets in the navigation pane.

What to do next

You can complete any of the following tasks: