In Continuation, with the blog post published earlier
Let us discuss the technical details about the solution implementation and a demo here in the following blog.
So, get ready to dive in through the details.
![](https://static.wixstatic.com/media/a398b8_d9750791a9aa459db9a7ff05fdfc2b63~mv2.png/v1/fill/w_925,h_500,al_c,q_90,enc_auto/a398b8_d9750791a9aa459db9a7ff05fdfc2b63~mv2.png)
As shown in the above picture, we will use SAC Analytical Application, as it has the flexibility to custom code.
Let's consider the scenario where we are doing Sales Analysis of different sales managers in the SAC Analytical Application. We need commenting functionality during the review meeting for the Head of Sales, to add his comments on the different sales managers.
The first object to be created is the HANA table, where we will be storing/saving the comments which are added from the SAC Analytical Application, the HANA table will have fields like below.
![](https://static.wixstatic.com/media/a398b8_2f2fc65c6dc1429e84c037630f08ca86~mv2.png/v1/fill/w_731,h_86,al_c,q_85,enc_auto/a398b8_2f2fc65c6dc1429e84c037630f08ca86~mv2.png)
COMMENT_ID : The id of the comments, is the primary key for the table.
STORY_VALUE : The filter value of the context, for instance, in this demo, we are analyzing the sales manager, so Sales Manager ID can be passed as filter value to this column
COMMENT: The textual comment that is to be saved.
Once we have the table ready, we create a HANA calculation view, on top of the HANA comments table. This HANA view is used to retrieve the comments stored in the table in the SAC Application using the HANA live connection.
The next step is to create a SAC Analytical model using the calculation view.
Later, we will come to the interesting part, that is to provide an interface to the user to input the comments, for this purpose ,we will use the UI5 Web application.
The UI5 Web application can be custom designed to suit the user requirements, in our case. we only need to input one comment at a time.
![](https://static.wixstatic.com/media/a398b8_461dd9a199e64fa4a860e779c624bcdf~mv2.png/v1/fill/w_738,h_619,al_c,q_90,enc_auto/a398b8_461dd9a199e64fa4a860e779c624bcdf~mv2.png)
We have used XSJS to do the server-side scripting, which will capture the comment entered and saves it into the table.
We can add different operations like Create, Update, Save and History to do the creation of comments, Updating, saving of modified comments and Auditing of the comments
respectively in the UI5 Web Application.
In case, if you need to comment on multiple fields at a time, you can add more UI elements to the web application.
Once we have these objects ready, we will move to the SAC Analytical Application to create the front end elements like Graphs and Tables in the dashboard.
For the SAC Part, We will use the SAP demo model which is the "BestRunJuice_SampleModel".
First, let us create a sample chart showing the Gross Margin and Quantity Sold, by each Sales Manager for different products.
![](https://static.wixstatic.com/media/a398b8_1b32910b0e1544ea8021fef0dd9d4ea6~mv2.png/v1/fill/w_510,h_450,al_c,q_85,enc_auto/a398b8_1b32910b0e1544ea8021fef0dd9d4ea6~mv2.png)
For this, we add the Table widget in SAC using the SAC Analytical Model, which we just created above.
We will select only the comment column for display in the designer tab of the analytical application.
![](https://static.wixstatic.com/media/a398b8_80076b044add4686927ac4b363e121df~mv2.png/v1/fill/w_980,h_296,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/a398b8_80076b044add4686927ac4b363e121df~mv2.png)
In addition to the table widget, we will add a text box "Add Comments" to make it intuitive to the user, that he can add the comments here.
Also, we need a button, for simplicity, we will use the "+" symbol which easily says that the comments can be added here.
Once the user clicks on the "+"(Add comment) button, it will open a popup in the SAC Analytical Application. In the pop up, we will embed the UI5 Web Application which we created earlier.
![](https://static.wixstatic.com/media/a398b8_997c8564ab11424ba4ccd0412cc87f72~mv2.png/v1/fill/w_980,h_445,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/a398b8_997c8564ab11424ba4ccd0412cc87f72~mv2.png)
Now, to make the selection easier, we will create a drop-down that has values to filter the sales managers. Here we have hard-coded the values, but we can use variables to bind to the drop-down to display the selections.
![](https://static.wixstatic.com/media/a398b8_fc99c559c27a4818a32cfbd3ac4ffa1e~mv2.png/v1/fill/w_980,h_381,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/a398b8_fc99c559c27a4818a32cfbd3ac4ffa1e~mv2.png)
Now we add some code to the Add Comments(+) button to capture the drop-down filter values.
CommentsEditor_Popup.open();
var final Url = web_app_url + Dropdown_1.getSelectedKey();
WebPage_1.setAddress(final_Url);
This code will open the popup window and then we capture the value selected in the drop-down and add it to the URL as a parameter.
Then we set the address for the webpage which is the UI5 application.
The drop-down code onSelect() will look something like below:
var filter = Dropdown_1.getSelectedKey();
Chart_1.getDatasourec().setDimensionFilter("Sales_Manager",filter);
Comments_Table.getDatasource().setDimensionFilter("STORY_VALUE",filter);
whenever there is a value selected in the drop-down, the chart and comments table will have the corresponding value filtered based on the context.
Now, we have all the elements in place!! Let's run the demo to see the solution in action!!
تعليقات