Skip to Content
Author's profile photo Ravin Angara

SAP Design Studio – Combining bookmarking functionality with Online Composition Template in local mode

This blog focuses on understanding how to embed and combine bookmarking functionality with online composition feature in a Design Studio application in local mode. This scenario uses the concept of re-using the Group Identifier which is stored locally within the system. Using Design Studio scripting functionality, we will read the locally stored group identifier and surface the user selections.

Before we jump into the business specifics, it is important to understand some of the terminologies associated with Design Studio bookmarking.

What are Standard Bookmarks: Customers using Design Studio based applications/dashboards need to serialize the state of their analysis and persist it in SAP BI or SAP NetWeaver Platform. This is done using the “Standard Bookmarking” option.

Unique combination of Analysis Application + Analysis Application Version + Application User

What are Fragments: Customers using Design Studio based applications/dashboards need to serialize only a selected part of their analysis can apply “Fragment Bookmarking” or “Portable Fragment Bookmarking”.

Fragments are Application and User specific

Use case: Users may want to identify parts of their application that are to remain unchanged from a design perspective.

What are Portable Fragments: Type of bookmark that can be shared and reused between application users using a common reference called a Group Identifier.

Generic Analysis Template “Save as Smart Object” – “Save View” delivered code.


Purpose of an Online Composition Template

Online Composition: Combines the Portable Fragment Bookmarks, Fragment Gallery and the Split Cell Container to empower the users to autonomously create their own online dashboards on demand.

Conceptually there can be 2 roles for users to manipulate and use Portable Fragments within the online composition template:

Power User:  Create Selection of Smart Objects (Portable Fragment Bookmarks)

Business User: Create and edit own Apps online based on available Smart Objects

Components of an Online Composition Template: It contains 2 screens. The first one shows available dashboards with an ability to open, share and delete an existing dashboard or a Create option to create a new dashboard.


The edit or create dialog opens the 2nd screen which contains a split cell container where you can drag and drop the available fragments and a fragment gallery which contains the available portable fragment bookmarks.


Business Use case: In this example we have 2 user groups Sales and Finance. Sales user group saves their analysis as portable fragment bookmarks and likewise the Finance user group saves Finance specific portable fragment bookmarks.

Technical Implementation: The application contains a drop-down box to choose between Sales user group and Finance user group. Depending on the user selection, Portable Fragment Bookmarks specific to that user group are displayed in a Fragment Gallery.

At a high-level, we will do the following:

Step-1: Create local Applications using Generic Analysis template and create the Portable Fragments.

Step-2: Create Local App to simulate online composition template functionality.

Step-3: Read the portable fragments or smart objects through App created locally


Step-1:  Create local Applications using Generic Analysis template and create the Portable Fragments.

  1. We will start by creating a Generic Analysis Template for the Sales user group. Please ensure that you connect to a Sales datasource.
  2. From the Menu, select the Search – >Search Application


  3. Search the pattern “SMART SAVE”.. Code and double click on the script line to view the code


4. Once you open the script, search for “ONLINE_COMP”. This is the Group Identifier under which the Portable Fragment Bookmarks are saved.


5. Modify this Group Identifier with your custom name i.e. “FRAG_SALES” in this case.


6. There will multiple occurrences of this identifier which needs to be changed i.e. one for chart, one for cross-tab and one for the combination


  7. Save the application and launch it.

  8. Make your selections on Sales Analysis i.e. applying filters or changing the chart type etc, and save it

      as a “Smart Object”. You can extend your analysis further by adding dimensions or measures and

      saving it as another “Smart Object”.


  9. Repeat steps 1 to 8 and create another Application based on Generic Analysis Template for Finance User group.

      Ensure that you connect to a Finance datasource. Please also ensure that you change the Group Identifier

      from “ONLINE_COMP” to “FRAG_FINANCE” (as you did in steps 4 to 6 for the Sales user group.)

Where are these Fragment Bookmarks stored within your system?




Step-2: Create Local App to simulate online composition template functionality.

  1. In this step we will create an application using the components used in online composition template.
  2. Start by dragging and dropping the following in your application:
  3. Drop-down box
  4. Split-cell container
  5. Fragment Gallery
  1. Arrange the components in a layout within the designer:


4.  We are now ready to insert the code to read and display the Portable Fragment Bookmarks which

     we have created using our Sales and Finance Generic Analysis applications.

Step-3: Read the portable fragments or smart objects through App created locally

  1. In the application start-up event, insert the following script:

var SALESBookmark = Bookmark.PortableFragmentBookmark.getAllBookmarkInfos(“FRAG_SALES”);

  1. SALESBookmark.forEach(function(element, index) {

LISTBOX_1.addItem(, element.title);



var FINANCEBookmark = Bookmark.PortableFragmentBookmark.getAllBookmarkInfos(“FRAG_FINANCE”);

  1. FINANCEBookmark.forEach(function(element, index) {

LISTBOX_1.addItem(, element.title);


Explanation of the above code:

In the above script, we start by declaring variables to hold all the fragments specific to

“SALES” and “FINANCE”. Next we loop through the array and add the retrieved fragments

  to “FRAGMENT GALLERY”. We repeat the same code for “FINANCE” fragments.

  1. For the drop-down box you will insert the following code:

if (DROPDOWN_1.getSelectedValue()== “FRAG_SALES”) {





else if (DROPDOWN_1.getSelectedValue()== “FRAG_FINANCE”) {





Explanation of the above code:

The above script enables to retrieve all the “Portable Fragment Bookmarks” depending on user selection: “SALES” or “FINANCE”.

This concludes application development for combining the online composition components and scripting to enable read and display bookmarked analysis. Ability to restrict the fragment displays based on the user group selections using application script provides authorization relevance to the scenario in local mode.

I hope you find this blog helpful. Please also note that there will be another blog from my colleague on how to simulate this scenario on BI Platform. So watch out for that blog….

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Howles
      Michael Howles

      This was great - Thank you.

      Author's profile photo Ravin Angara
      Ravin Angara
      Blog Post Author

      Thanks a lot for reading my blog. Glad you liked it.

      Author's profile photo Former Member
      Former Member

      Hi, Nice post.

      I have a question to this template. We want to use this with a predefined query, and want to use the bookmark function. is there any chance to set a default data source and use this template with standard bookmark enabled. We receive this message trying to add a bookmark.

      "You opened the app using URL parameter 'BOOKMARK'. Further bookmarking is not possible"

      We use bex query from bw.

      Kind regards

      Per Christian

      Author's profile photo Former Member
      Former Member

      Thank you for this, I need the same also for the Standard Bookmarks, do you have a Script, how I can show the Folders and Save a Standard Bookmark to a folder? But not only to the root?

      Thanks a lot!

      Kind regards,


      Author's profile photo pramod k
      pramod k


      I am saving portable bookmarks using the following code

      var fragment = Bookmark.PortableFragmentBookmark.saveBookmark("ONLINE_COMP", PANEL_2,"title","description ");

      when i load the above fragment in split cell container from Fragment gallery i get  " attach a datasource to the component " error .  Do i have save datasource too  while saving  portable  fragment  using any script ? It seems its only saving visualizations inside panel  and not the data source .


      Author's profile photo Penny Boswell
      Penny Boswell

      hi - Can we achieve   same bookmark functionality with  BW integration?