For those of you familiar with the concept of bookmarks in SAP Design Studio, the new SAP Lumira Designer shouldn’t bring too many surprises. The principle behind implementing bookmarks remains the same, with a few changes to the APIs used and the abilities of the bookmarks. However, there are some key differences too. For example, with SAP Lumira Designer, you can choose which components need to be saved as part of the bookmark, and designate bookmarks as local or global. In addition, the options to implement Fragment and Portable Fragment bookmarks are no more available – as they are fully integrated under a single canvas.
Regardless of whether you have worked with bookmarks in previous versions, you’ll find the following step by step instructions helpful to implement bookmarks in your SAP Lumira Designer application.
1. Set up the application
Let us consider a simple application which has Dropdown menus, couple of data sources and a chart to display the data. Here is the Outline View and the canvas of the application:
![Bookmarks in SAP Lumira Designer - 1]()
2. Add a Bookmark
A prerequisite for implementing bookmark capabilities on an application is to set up the ‘Bookmark’ technical component on the dashboard. To do this, navigate to the Outline View, right-click on ‘Technical Components’ and select ‘Bookmarks’.
![Bookmarks in SAP Lumira Designer - 2]()
You should now be able to see the newly created ‘Bookmark’ technical component on your dashboard.
3. Select components to be saved as part of the Bookmark
Select the bookmark technical component you have just created and navigate to its properties. Select the property ‘Definition’ and select the components that you want to save as a part of bookmarks users would create. In our application, we want to save the states of the Drop-downs, the chart, and the data sources. So, we select those components in the definition property of the bookmark.
![Bookmarks in SAP Lumira Designer - 3]()
4. Set up the Access Type for the Bookmark
The ‘Access Type’ property defines whether or not bookmarks created by a user are private. This can take 2 values:
- Personal – Any bookmark created by a user can only be seen by that particular user, and other users cannot see these bookmarks.
- Global – Any bookmark created by a user can be seen by all users accessing the list of bookmarks on that application.
For our application, we are going to go ahead and set up these bookmarks as ‘Personal’.
5. Implement the logic to Save, Load, Delete and Retrieve All Bookmarks
To implement bookmarking capability, we are going to give users the options to save a new bookmark, view a list of all saved bookmarks, load an existing bookmark from the list and delete an existing bookmark from the list.
a. Save a Bookmark
To save a bookmark, the following line is written within the button event script.
BOOKMARK_1.save (title, description);
On execution of this API, the instance of bookmark is created and a unique bookmark ID for the same is generated. There are two parameters that you can pass, both as strings:
- Title – A title that can be used to identify your bookmark when a list of bookmarks is obtained
- Description – Additional text that can be used to describe the bookmark itself.
In addition, the ‘save()’ API also returns a value (BookmarkID) which contains the ID generated by the bookmark.
![Bookmarks in SAP Lumira Designer - 4]()
In our application, we will go ahead and allow users to enter a value for the title, and save the bookmark when the ‘Save’ button is clicked.
Below, is the script we use to save bookmarks. This has been written within the onClick event of BUTTON_SAVE:
//Obtain the value for the ‘title of the bookmark
var Title = INPUTFIELD_1.getValue();
//Save the bookmark and capturing the returned bookmark ID
var Book_ID = BOOKMARKS_1.save(Title);
//Add the newly saved bookmark to the list of bookmarks
LISTBOX_1.addItem(Book_ID, Title);
b. Load a Bookmark
To load a saved bookmark, we use the following call:
BOOKMARKS_1.load(id);
This script takes one parameter – id – which is the id of the bookmark that we need to load. In our application, since every bookmark that was saved was loaded into the list box (refer earlier script), we can retrieve the id from the selected value in the list box and load the corresponding bookmark.
The following script is written within the onClick event of BUTTON_LOAD:
//Gets the ID of the selected bookmark from the listbox
var Book_ID = LISTBOX_1.getSelectedValue();
//Loads the selected bookmark by passing the obtained ID
BOOKMARKS_1.load(Book_ID);
c. Delete a Bookmark
To delete a bookmark, we can make use of the following script:
BOOKMARKS_1.delete(id);
As above, the id can be retrieved from the selected value in the list box. Alternately, you can also delete ALL bookmarks at once by using the following script:
BOOKMARKS_1.deleteAll();
In our dashboard, we are going to implement the script used to delete just the selected bookmark. The script for this is to be written on the ‘onClick’ event of BUTTON_DELETE:
//Deletes the bookmark selected within the list box
BOOKMARKS_1.delete(LISTBOX_1.getSelectedValue());
//Removes the deleted bookmark from the list box
LISTBOX_1.removeItem(LISTBOX_1.getSelectedValue());
d. Get a list of all Bookmarks
In addition, we may also need to retrieve the list of all bookmarks so that they can be loaded into the list box during application startup. We use this script for this purpose
BOOKMARKS_1.getAll();
This API returns a list of all the bookmarks as an array of bookmarks. The developer writes the script and then adds each bookmark in the array to a dropdown or a list box.
In our application, we have used the following script in the ‘on Startup’ event of the application:
//Gets a list of all the bookmarks as a bookmark array
var Bookmark_List = BOOKMARKS_1.getAll();
/*Loads the list of bookmarks in the bookmark array
* one by one into the list box using a loop*/
Bookmark_List.forEach(function(element, index) {
LISTBOX_1.addItem(element.id, element.title);
});
These few simple steps should allow you to implement a simple Bookmark functionality for your application users. The functionality for bookmarks can be extended of course, giving users the option of being able to choose whether their bookmarks are personal or global, choosing a folder into which they want to save their bookmarks etc. We will be covering these steps as part of a subsequent blog in our series – so keep watching out for this!
Got questions? Click here to get in touch.
The post A Step-By-Step Guide To Implementing Bookmarks in SAP Lumira Designer appeared first on Visual BI Solutions.
