How to save comments in Design Studio

In my session in the BI2016 in Vienna last week I encouraged everybody in the room to come to SCN. I promised that I would write an blog about comments to give a good reason to come here and join the community.

So this is to fulfill my promise. How to save comments in your application?

Comment screen

In the example I showed an comment screen, with a save button. which added a comment component to the fragment gallery

Comment in fragment gallery

And finally it was dragged in the selfmade dashboard.

Comment added to dashboard

Using bookmarks

The trick is to use bookmarks. You can either use multiple input fields or you can have an SDK that works as an editor. The thing is that you set the text in an component. (in the first case use a formatted text component), bookmark the component.

You will be able to load the comments back again or add them into an split cell container. This allows users to add comments to their self-made dashboards.

When you save to enable users to add their own remarks. The following two lines suffice:

var newBookmark = Bookmark.PortableFragmentBookmark.saveBookmark("Comment_dashboard", PNL_COMMENT,"Dashboard Comment");
FRAGMENTGALLERY_1.addItem(newBookmark);
Where PNL_COMMENT is a formatted text component.
Basically you can create the content for the component with script like this :
var title = "<H2>" + INPUT_1.getValue() + "</H2>";
var content = "<p>" + INPUT_2.getValue()+ "</p>";
FORMATTEDTEXTVIEW_1.setHtmlText(title+content);

Using title as unique key

The next step is to have context related bookmarks. We want comments that apply to the current view that you’re currently have.

Suppose that you look at data voor Store 2512 in month 01 2016. You want the comment on that particular subset to be shown.

To able to retrieve that we need to store a key in the bookmark. We will use the title property of the bookmark to store the unique key for the store and month.

Var currentMonth = “200601”
 var currentKey = “2512”

Bookmark.PortableFragmentBookmark.saveBookmark(currentStore+currentMonth, PNL_COMMENT,"Dashboard Comment");

Colllecting later on can be done with script code similar to this

var myBookmarks = Bookmark.PortableFragmentBookmark.getAllBookmarkInfos("Dashboard Comment ");

myBookmarks.forEach(function(element, index) {
if (element.title == currentStore+currentMonth)
{
LIST_BOOKMARKS.addItem(element.id, element.title);
}
});

In this case only comments for this particular store+month are loaded into a listbox. Note you could have multiple comments as this is not a truly unique key field.

Final thing

You may have noticed that I use a fancy editor in my example. Actually this is a SAPUI5 element. The underlying code is quite simple to add it :

jQuery.sap.require("sap.ui.richtexteditor.RichTextEditor");
sap.ui.richtexteditor.RichTextEditor.extend("com.rabobank.sapui5.RichTextEditor", {                initDesignStudio: function() {                                var that = this;                                var _currentValue = undefined;                                this.attachReady(function(oControlEvent)                                                                {this.fireDesignStudioEvent("onInit");});                                this.attachChange(function(oData)                                                                {                                                                                this.fireDesignStudioPropertiesChanged(["value"]);                                                                                this.fireDesignStudioEvent("onChange");                                                                });                },                renderer: {                                }
});

And that’s it . A fairly easy workaround to have some comment functionality in your application. I hope you can find some use in your own applications.