Creating a web widget

Edit online

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 IBM® Cloud Application Business Insights 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/
  • Ensure that the ALLOW_IFRAME_INSIDE_PRD parameter is set to true in the bootstrap.properties file. The file is placed at the following location:

    $install_dir/wlp/usr/servers/icabi

    Where, install_dir is the directory where you installed Cloud Application Business Insights.

    If you do not set the ALLOW_IFRAME_INSIDE_PRD parameter to true, then the external website or web application is not displayed, and a browser-specific error message might be displayed.

    For more information, see Configuring IFrames to embed external applications in Cloud Application Business Insights.

  • 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 navigation pane of Dashboard Designer, and click Custom > Create New Widget.

Procedure

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

  1. In the navigation pane of Dashboard Designer, click Custom > 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 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 the Set PropertiesSet 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 the Background Image Background Image icon, which 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.
The All Widgets page displays the following audit trail details for each custom widget:
  • Custom widget name
  • Custom widget category
  • Name of the Engine instance to which the widget is published.
  • Date and time when the custom widget was first created, and the username of the user who first created the custom widget.
  • Date and time when the custom widget was last modified, and the username of the user who last modified the widget. Only the latest record is displayed.

What to do next

You can complete any of the following tasks: