Add Images to Your Story

You can add static images or dynamic images stored in a remote database to SAP Analytics Cloud stories. In Optimized Story Experience, you can also bind the image widget to a script variable in your story, whose value can be the source URL of any image.

Prerequisites

To create a dynamic image, you will need a model based on a HANA view with the following attributes:

A column containing BLOB data, used in the dynamic image. It is recommended that the image BLOBs used are less than 5MB in size.
A column containing a unique ID used to link the image model to an aggregate model via linked models. When queries are performed on the aggregate model, the image object will update if a single member is filtered down to in the aggregate query. This prerequisite is necessary to prevent duplicate image data to be added to the model. For more information on linking models, see Blend Data.

Context

Note

Dynamic image objects are not supported in the mobile application and cannot be embedded in header widgets.
Dynamic image objects don't support measure-based filters on the source model.

Procedure

From the Insert menu in the toolbar, select (Add) Image.

In Optimized Story Experience, the widget is under the Others category.
Do one of the following actions:

You can upload a static image, which is an image locally uploaded from your computer, or a dynamic image, which is an image stored in a remote system.
- To upload a static image, do the following:
  1. On the Builder panel, select +Add Image or (Upload Image).
  2. Search for an image on your computer and select Open.
    The image is added to the Image Library.
    Note
    You can delete an image in the library be selecting the image and then selecting Delete Image.
  3. From the Image Library, select the image you want to use.
- To display a dynamic image from a data source, do the following:
  1. On the builder panel, select the Dynamic (for classic stories) or Data Source tab (for optimized stories).
    Note
    To switch back to adding an image via other option, select the corresponding tab, and proceed with the steps on the option. This will clear all dynamic data that is currently set.
  2. In the Data Source area, select + Add Model, select a model from the list, and select OK.
    The model you select will be used to display a dynamic image. Make sure that the model has at least one image dimension.
    
    Note
    When you switch to dynamic mode, the image object will pick up the last used model. You can change the selected model by selecting (Change Model) .
  3. In the Image Structure area, select + Add Image Dimension and select an image dimension from the list.
    The members from the selected image dimension will determine the available images to display.
  4. (Optional) Select + Add Alternative Image and upload an image from your computer to use when the remote image can't be displayed. For example, when the image data cannot be rendered.
    The alternative image will become the static image source when switching from dynamic to static. If a static image source is selected, it will become the alternative image when switching from static to dynamic.
  5. Select +Add Filters, and choose one member from the list of available members.
    The member you select will be the image that is displayed.
    Note
    If you select multiple members or no members, no image will be displayed or the alternative image will be used instead. You can use a table in list reporting mode to see how many members of the current filter configuration are coming back.
  In this case, the image can support linked analysis from charts, tables and geo maps, and you can see the relationship on linked widgets diagram in Optimized Story Experience.
- (For optimized stories, only available to story developers) To display an image whose source URL is the value of a script variable in your story, do the following:
  1. On the builder panel, select the Script Variable tab.
    
    Note
    Switching to other tab will clear the image binding to the script variable that is currently set.
  2. In the Image Binding area, select a script variable to bind the image to it.
On the (Styling) panel, select styling options for your image.

For more information on styling images, see Formatting and Styling Items on a Story Canvas.
(Optional) To insert a hyperlink on the image, select (Add Image Components) Hyperlink

For more information, see Linking to Another Page, Story, or External URL.

Note

In Optimized Story Experience, you can also use hyperlink-related APIs to customize more scenarios. Only external URLs are supported for setting hyperlinks via API, and hyperlinks will always open in a new tab. If you set different hyperlinks for the image in both ways, the hyperlink defined via API has higher precedence. For more information about the APIs, see Optimized Story Experience API Reference.