Skip to Content

Design Studio 1.4: Portable Fragment Bookmarks & Reuse in Applications

How the portable fragment bookmarks do behave when using in more than one application.

Use Case

We define two (or more) applications. The first one is more focused on preparation of the visualization, definition of the content. The others are just in “consumption mode”. User can choose visualizations and position it by coordinates…

The producer application

In this application we differentiate between static and dynamic content.

  • The static content is just application dependent and not intended to be exchanged between applications
  • The dynamic content is prepared for reuse – save here and load in other applications.

In this concrete scenario we just concentrate on simple changes to see how the fragment bookmarks are working. And you can see the difference between fragment bookmark and portable fragment bookmark.

Static – Dynamic Content

As you see there are some buttons (in the static area of the producer application) which can influence the dynamic content. On this example you can see that all scripting methods which are in the application have a free access to the inner components of the dynamic area – by use of those technical names (but this was surely expected).

Scripts in Fragments

Also, you can see that one dynamic area has a button, a component with event which can contain scripts. This is an important point – keep in mind that also this script will be persisted in the bookmark. For this, always use just delegation to global scripts in such elements, this will allow you a stable bookmark content and application dependent control of the script execution.

See the Button “Say Hallo!” with hard coded content, this stays forever. The other Button “Say Something” has only a link to global script “SCRIPT_SOMETHING.saySomething()” which is existing in both applications, but coded with different content.

say1e.PNG –> say2e.PNG

Saving of Portable Fragment Bookmarks

In the other buttons which are responsible for saving of the bookmarks you can see a script:

// save the bookmark

var bookmark = Bookmark.PortableFragmentBookmark.saveBookmark(“MIN8CHARS_NOSPECIAL_AREA_D”, PANEL_4, TEXT_5.getText());

// update drop down

DROPDOWN_1.addItem(, bookmark.title);

// update the gallery


Every saved PANEL gets assigned to an group identifier which can be used in different applications to load the content. Keep in mind, that the layouting properties of the panel are saved as well, this is why you see in the application always a parent container which is responsible for positioning (delegate positioning always to the parent, this allows you easier layout changes afterwards).

Current Implementation Scope

Important is the fact, that you can populate the portable fragment bookmarks in different application, but you can apply them ONLY through Drag&Drop from Fragment Gallery.. Example:

Load Script:

var frBookmark = Bookmark.PortableFragmentBookmark.getAllBookmarkInfos(“MIN8CHARS_NOSPECIAL_AREA_D”);

frBookmark.forEach(function(element, index) {

  DROPDOWN_BOOKMARKS.addItem(, element.title);


and corresponding button for load of such “foreign” portable fragment bookmark:


leads to the warning message:

Error while loading portable fragment bookmark. Bookmark with id “aec4357a82514e2ca6a05e626a6c6cd8″ was not created in application”DEMO_EMB_BOOKMARK_RECEIVER” and therefore cannot be loaded.

but populated bookmarks in Fragment Gallery can be always used by drag & drop into Split Cell Container.

More about the “Receiver Application”

This example shows following possibilities in one application:

* populate the portable fragment bookmarks into Fragment Gallery

* use drag&drop to place them “for use”

* position the content using some primitive maths (see on the use of global scripts)

* saving the information on “where was the fragment positioned” – another example how you can use the portable fragment bookmarks to save some information and load automatically on startup…

* saving a fragment bookmark with current application design and positioned split cell containers (as those cannot be saved as portable fragment bookmark)

The Workflow with Explanation – On Startup

the startup event gets much cleaner when already there all the content is externalized into global scripts, like this:


in this case, we

  • fill the content of portable fragment bookmarks into gallery and dropdown
  • load current user dependent state (a kind of “selective personalization”)

The Workflow with Explanation – Drag & Drop

By drag & drop the user can pick up some fragment and place in the “container”. This is currently only one possibility how portable fragments can be loaded in second application.

2.PNG— > 3.PNG

If we look in detail on the structure behind the drop area (as part of this example), we can see panel + split cell container. To be specific, in this example I have 8 of those as I can allow to position 8 different visualizations.


The Workflow with Explanation – Re-position the Panel in the PANEL_VISUALIZATION

There is nothing magic behind, only some maths… see the scripts for details.

The Workflow with Explanation – Save the current view & position information

This is the place where the interesting point starts, the method “saveState()” in SCRIPT_FRAGMENTS:

Part 1: I save now the complete panel as a “FragmentBookmark”:

// part 1, save the visualization information

var bookmarkIdViz = “”;

var bookmarksViz = Bookmark.FragmentBookmark.getAllBookmarkInfos();

bookmarksViz.forEach(function(element, index) {

  // we expect only one!

  if(index == 0) {

  bookmarkIdViz =;



// first time there is no bookmark

if(bookmarkIdViz == “”) {


} else {

  // or overwrite existing

  Bookmark.FragmentBookmark.saveBookmark(PANEL_VISUALIZATION, “”, “”, bookmarkIdViz);


Part 2: I save actually only some text field as Portable Fragment Bookmark, but of course I have to package it in the panel:

This is a way how you can organize / group some text fields and save information inside which can be recovered on next app start (refer to loadState) …


// part 2, save the blocked positions information

var bookmarkId = “”;

var bookmarks = Bookmark.PortableFragmentBookmark.getAllBookmarkInfos(“BLOCKED_POSITIONS”);

bookmarks.forEach(function(element, index) {

  // we expect only one!

  if(index == 0) {

  bookmarkId =;



// first time there is no bookmark

if(bookmarkId == “”) {

  Bookmark.PortableFragmentBookmark.saveBookmark(“BLOCKED_POSITIONS”, PANEL_BLOCKED_POSITIONS);

} else {

  // or overwrite existing

  Bookmark.PortableFragmentBookmark.saveBookmark(“BLOCKED_POSITIONS”, PANEL_BLOCKED_POSITIONS, “”, “”, “”, bookmarkId);


The Workflow with Explanation – Connection to Global Script

As you can see, the panel with Split Cell Container has also a button, which can be used to remove the position (also nothing special here). But then again saving of the state does remember what is located and which panels are free…


What is perhaps interesting here, passing of a PANLE as parameter into global script function.


You can see that the type is recognized and you can execute directly methods on the object.


I am not sure how much this scenario is business related, but from technical perspective it is covering:

* saving of fragments in the “portable” way

* applying in different application

* saving of fragments with some information

* fragmented personalization of the application

* and demonstrates use of global functions

Important Points

  • keep correct positioning information in the fragment bookmarks
  • do not save custom scripts in fragment bookmarks (always link to global functions)

Example Application

you can download the example application and try it out. See the Applications


in GitHub (ZIP contains this app): Release DEMO_EMB_BOOKMARK_SENDER2_RECEIVER · KarolKalisz/DesignStudioBiAppRepository · GitHub

Have Fun!

You must be Logged on to comment or reply to a post.
  • Hi Karol,

    Thank you for the detailed explanation on bookmarks.

    We are planning to change our former (DS 1.3) bookmark solution to portable bookmarks, because if we change anything on a dashboard all the saved bookmarks will be lost.

    Thats why we upgraded our DS to 1.4 SP1.

    In DS 1.4 we tried first with the "Bookmark.PortableFragmentBookmark.loadBookmark" method but we got the same error message that you mentioned:

    “Error while loading portable fragment bookmark. Bookmark with id….”

    As a SAP employee do you think this feature will be available in the future versions?

    We also tried the method with fragment gallery, and it works fine. Except one thing: if the user selects a bookmark second time, the application loads the bookmark twice into the splitcellcontainer instead of hiding the first one. Do you have any idea how could we solve this issue?

    Thank you in advance!

    Best Regards,


    • Hi,

      the plan for 1.5 release is to introduce a function to make the portable fragment bookmarks user-independent (so any user can load portable fragment bookmarks from other user).

      as far I know, it will be not possible to load bookmarks across applications (but this is acceptable I think).

      you can only drag&drop the fragments into split cell container, then it depends where you drop - if you drop in the center, the old one will be replaced. Is this what you search for?


      • Hi Karol,

        Thank you for your response!

        My fear of the drag and drop solution is that I cannot restrict the user to pull the selected bookmark in the center of the split cell container, otherwise she/he will get a duplicated screen. The other thing is that if we change something on the dashboard the users won’t see it if they use an older bookmark

        We would like to use the bookmark function in order to save the filtered values (just these values, not a “screenshot” of the dashboard). We have approximately 20 dimension filters on the dashboard and it is very inconvenient to start the analysis with filtering on the same values every time.

        So I tried to save the filtered values in a text component which is on a hidden panel, but I couldn’t pass these values to a data source. Let me give an example:

        1. user selects a material number from dimension filter
        2. the dimension filter passes the selected values to TEXT_1. (TEXT_1 is part of PANEL_2 which is a hidden panel, and its only content is TEXT_1)
        3. I save PANEL_2 as a portable bookmark, the saved bookmark appears in the fragment gallery
        4. user selects the saved bookmark from fragment gallery
        5. The content of PANEL_2 with the filtered material appears in the split cell container
        6. I want to pass the value of TEXT_1 (which is in the split cell container) to a data source but the application uses the value of TEXT_1 which is in PANEL_2.

        The landscape looks like this:bookmark.PNG

        So the question is can I pass a bookmarked text value outside of the split cell container?



        • hi Adam,

          if you just want to save the filters, then you do not need the portable fragments. Also you do not need the Galery And split cell container. Check the blog on basics, there you can find the programatic approach to save and load fragment.

          Design Studio 1.4: Online Composition Scenario (basics)

          To save a filter only you have to save some component which is referencing data source, even like dimension filter which is not visible.

          can you try this?


          • Hi Karol,

            Thank you for your reply!

            I'm a bit confused… Do you mean I should save my dimension filters as a simple “Fragment Bookmark”? Is it solves the issue with losing all the bookmarks after any change made on a dashboard?

            We have two BO systems, a development and a productive and we transport the modifications by using “Promotion management”.  On every “transport” the saved bookmarks will be lost and we cannot expect from users to save again, because we changed for example a text on a dashboard. That’s why we wanted to use portable bookmarks, but it has other unwanted features (as I have mentioned before)



          • Hi,

            yes, this is the way - you just need to save a panel with dimension filter which is linked to a data source. Then the fragment bookmark saves the PANEL, DIMENSIONFILTER and DATASOURCE. Data Source includes all filters. This is how fragment bookmarks work.

            It does not need to be a portable fragment bookmark, as you want to use it per user and not share between users.

            Both, Fragment Bookmarks and Portable Fragment Bookmarks are still valid after changes of the application. The restriction of "obsolete" flag is only for the standard bookmarks.

            just try.


          • Hi Karol,

            "Both, Fragment Bookmarks and Portable Fragment Bookmarks are still valid after changes of the application."

            It was the key 🙂 I thought Fragment bookmark works like the old one, the only difference is that it saves only a part of the application. But you were right, it works properly after changing something on the dashboard as well!

            Thanks a lot for your help!

            Best Regards,


  • Hi Karol,

    Thank you for posting this document.

    It is very useful.

    I am basically SAP SD Consultant,implementing Design studio 1.4 in y organization.

    I already configured bookmarks based on 1.3 version but issue is that I can not deploy it in net weaver (not supporting only supporting in BI & local mode.

    Can you please provide step wise details (including script) for creating Fragment bookmark.

    will it support in BW net weaver mode.


    Thank you.


    Shashank gupta

  • Hi Karol,

    Can we save two panel in a single bookmark? My dashboard is like I have heat map chart and when i click on heat map chart another chart will display the that particular month's data. So, Here I am suppose to add two panels for two chart and I want to save these two panel in a single bookmark. Is this possible?



    • Hi Mathivanan,

      single bookmark allows to save only one panel. you can either

      * save 2 bookmarks with one panel each, or

      * by your outline definition you need to place one single parent panel with those 2 you want to save.


  • Hi Karol.

    We are on 1.4 and I'm getting my feet wet with DS and the Fragment Gallery appears to offer nice user experience.

    My frustration is trying to figure out the object and all the info I'm researching is offering way too high level ideas and no basics to assist someone in my position.  needless to say it's only adding to the frustration.

      • Hi Karol

        I use the generic Template. There 2 possibilites for the Bookmark: 1 Standard Bookmark 2 Fragment- or Smart Objects Now I like to have a script or a example application, that shows me how to save a Standard bookmark to a dedicated Folder Inside the Root (Analysis Application Bookmarks). At first I like to show the Tree of the folders, and then the User can select the Folder to save a Standard Bookmark. Any help will be very appreciated! Thanks a lot! Kind regards, Adrian

        • Hi Adrian,

          Just try the below steps

          Step1: Create global script function

          for example: create a global function named "smartobj.tree"

          in global function write the below script

          var folders = Bookmark.getBookmarkFolders();

          if (folders.length != 0) {




          place a button for bookmar and call this function in bookmark button



          place a inputfield for name and place a button to save the bookmark

          write the below script in save bookmark button

          var title = INPUTFIELD_1.getValue();   

          var folderid = TREE_1.getSelectedValue();  

          var FID = Bookmark.saveBookmark(title);

          if (folderid != " " ) {

            Bookmark.assignToFolder(folderid, FID);


          Run the application in BIP mode and and once you save the bookmark you can check the bookmarks in CMC -> application->design studio run time - > manage folders

          If this doesn't help you i can provide screenshots



          • Hi Mathivanan

            Thank you for your response, That was helpfull. But now i like to save not PortableFragmentBookmarks, I like to save only FragmentBookmarks, This i got it. But how can I show now with a tree all the FragmentBookmarks by Folder in a Tile or in a Listbox?

            Thanks a lot.

            Kind regards,


          • Hi Adrian,

            Sorry for the late reply. What I understood is, you want to save the fragment bookmark and show those bookmarks in the same application(may be in another tab). If so please try the below scripts.

            Create a global script as below


            add tree and button component to the application and write the following script in button



            on TREE_2 component write the below script


            this will show the bookmarks in listbox by selecting folders from tree component.

            Note: Fragment bookmarks can be used only within the same application and if u want to use the bookmarks in another application you should save portable fragment bookmarks



      • Hi Karol

        thanks instead of FragmentBookmarks, I change the SAP Templates for save Bookmarking to PortableFragmentBookmarks. I also used to  select the Bookmark the GroupIdentifier. I also added it to the Basic-Template, because there was no possibility to save the Bookmarks.


        Kind regards,