Create Popups or Dialogs (Optimized Story Experience)

As a story developer, you can use popups and dialogs to design interactive stories.

Context

A popup helps viewers quickly enter information, perform configurations or make selections. You can also use it to display more specific data for a selected item on a story page. A popup acts as a container, so you can put any other widgets into it, such as table, button or checkbox.

You can also turn the popup into a dialog, which has the look and feel consistent with other dialogs in SAP Analytics Cloud.

Note

Currently, popups aren't available to story designers.

Procedure

  1. Open the Outline panel. From View in the toolbar, make sure that Left Side Panel is selected.
  2. In the Outline panel, hover over the page from which you want viewers to open the popup.
  3. Select Start of the navigation path (More) Next navigation step  Add PopupEnd of the navigation path.

    You can see that an empty popup opens with the default name Popup_1.

  4. If you want to use dialog for the popup, in the Builder panel of the popup, select Enable header & footer. Otherwise, skip to step 7.
  5. Optional: You can change the title and configure buttons for the dialog.
  6. Choose Apply.
  7. Add widgets to the popup, such as dropdown boxes, tables or charts.

    For dialogs, you can only add widgets to areas other than the header and footer.

    Note

    If there're no widgets in the popup, even if you save the story with it, viewers won't see it even if they've triggered it.

  8. Edit the styling of the popup in the Styling panel. For example, you can change its height and width.

Results

Furthermore, in the Outline panel, you can select to the right of the popup or a widget in the popup to add scripts to it. For example, they can trigger events when viewers click a button in the popup.

To return to a page, select it from either the page tabs or Outline. You can also reopen the popup by selecting it from Outline.

To delete the popup, find it in the Outline panel, and choose Start of the navigation path (More) Next navigation step  DeleteEnd of the navigation path.