Use Composites in Your Story Design (Optimized Story Experience)

As a story designer in Optimized Story Experience, you can import composites to your story and use it as other SAP Analytics Cloud built-in widgets.

Restriction

Currently, composites are only supported on canvas pages in Optimized Story Experience.

Import and Add a Composite to Your Story

To use your composite in Optimized Story Experience, you need to import it to your story first.

Procedure

  1. To import a composite, in the Assets panel, hover over Composites, and choose (Import Composite).

    You can also import a composite from Insert in the toolbar by selecting Start of the navigation path(Add) Next navigation step Composite Next navigation step Import Composite...End of the navigation path.

    A dialog appears where you can select the composite.

  2. Select a composite from the file repository.

    Once the composite's imported to the story, it's listed under Composites in the Assets panel as other available widgets.

    Note

    If you'd like to import multiple composites, import them one by one.

    Imported composites only belong to the current story.

    Note

    If the imported composites aren't added to, or actively used in your story, when the story is transported to another system, they won't be transported with it.

  3. To add a composite to your story, drag and drop it from Assets to the page.

    The composite is listed in the Outline panel, with the default ID Composite_1.

Next Steps

Once a composite's added, you can do actions on it as other widgets in your story, such as edit ID, find reference, enable or disable mouse actions to resize or reposition, show or hide, styling, and edit scripts.

Note

The actions apply to the composite as a whole, rather than the widgets in the composite. However, theme preferences can apply to the individual widgets.

Style Your Composite

After adding a composite to your story, you can customize it in the Styling panel.

In the Styling panel of the composite, you can assign CSS class to it, set its size and position, add borders, set view time visibility, allow vertical or horizontal scroll, and so on.

Tip

The composite name is displayed on the top of the Styling panel. By selecting Show More..., you can find more information, such as description and file path.

Set Variables for Your Composite

In the Builder panel of the composite, you can choose what variables are used by the widgets inside:

  • Use Widget Variables (default): The widgets inside the composite still use their own variables, which have been set by the composite creator.

  • Use Story Variables: You can override the widget variables and use the story variables, which are applied to all the tables and charts in the story that use the same model.

    Note

    You need to add the model used by the composite to the story. Then, edit the prompts.