Collaboration between colleagues is important in today's business world. After the pandemic and the massive introduction of remote work, being able to share opinions is something that many companies are looking for. Giving an evaluation is one way to share your feedback. You most probably rated a product you bought on your favorite online platform or a movie that you've watched on a streaming platform. Adding this type of rating functionality is something that is sometimes requested in Visual Analytics reports. In this article, I will walk you through the steps to introduce a rating component in a Visual Analytics report and display the collected results.
At a high level, to integrate a Data-Driven Content object in your Visual Analytics report, you need:
What you will see in this article is that you can also use SAS code to process some data on the CAS server. If you want to get more information and ideas about using Data-Driven Content object in SAS Visual Analytics, please have a look to the following articles on SAS Support Communities:
If you follow along with this article, your final web page will look like this:
Select any image to see a larger version.
Mobile users: To view the images, select the "Full" version at the bottom of the page.
On the left-hand side, you have a list table which is used to select a car model. When the user selects a row in the list table the form in the Data-Driven Content (on the top right) is populated with the Make and Model information. The user selects a rating level and saves the evaluation. To save the evaluation, a SAS Viya Job is called and saves the evaluation in table which contains all the ratings. The rating table is then used to populate the bar chart which displays the Maker's rating in the bottom right.
Now that you have seen the report, I hope you are willing to know how it is implemented. Here are the steps:
When done, your report should look like this.
Please note that no data items are assigned to the Bar Chart object as it will use another CAS table which is not yet created.
I chose to use the CDN option as it is easier to maintain. If you choose the CDN option, you should make sure that the end-users have internet access when consuming the report.
The top part of the HTML code is the following:
If you have been through the code, you may have noticed that on line 11, there is a reference to jobExecutionUtil.js. This file is not a standard file provided by SAS but it provides a helper function to execute SAS Viya Jobs: executeJob()
The code for that function is available in the Git repository and will be used in this example.
The executeJob function requires three parameters:
Let's now dive into the actual code of the web page. The body of the HTML page contains a reference to a form element and a script tag. The form element is not more than:
The script tag will have different purpose:
To achieve this, a function named displayForm is used to build the form content. The function is triggered when the page receives data from the Visual Analytic report through the messagingUtil. When the form is submitted the executeJob function will be executed.
The displayForm code looks like this:
And the ratingComponent is defined like this:
And finally the code which triggers the form creation:
To use the web page, you need to host it. You have different approaches to deploy the web page:
In this article, I will not explain the differences and the benefits of using one or the other approach. If you want to get more information about deploying a web page for DDC in Viya 2020.1 or higher, please refer to this article: Deploy a custom web application in the cloud for Data-Driven Content object in SAS Viya 4.
As the purpose of this article is to build a simple demo, I suggest that you host a web server on your development machine. If you use Visual Studio Code to create the web page, you can for example install the Five Server extension. It will start a standalone web server on your machine with reload functionality. As this is the option I used for the development, you will find a fiveserver.config.js file in the repository. The file is passing parameters to Five Server to execute on port 3000 and sets the protocol to 3000 on localhost.
If you are running on a local machine, you should also make sure that the CORS and CSRF configurations are correct. You can therefore follow the instructions in the article: Configure Cross-Origin Resource Sharing for SAS Viya for REST API’s and web developments
SAS Viya jobs are designed to execute predefined SAS code from web interfaces. To create a job, you should use SAS Studio. In the current application, the job will receive data from the web page, manipulate the data and store them in a CAS table.
The job definition is as follows:
Now that you have the job definition, you can save it and update the reference in index.html. Around line 70, you will see the call to the Viya job. Make sure that the url constant and the parameters are properly set.
At this point, you have all the components to rate cars. You have created the job and the web application is hosted and reachable.
You should now update the report to integrate the web page, add the newly created data source, and populate the role assignments for the Bar Chart.
To insert the web page in the Data-Driven Content object, select the object and in the Options pane, specify the URL of the web page. If you chose the Five Server extension, your web page should be available on https://localhost:3000 . You can set that value for the parameter:
The other modifications are for the Bar Chart to display data. You should:
When done, you should see the following result:
In order to see the updated values in the report, you should adapt the refresh rate of the Bar Chart:
When done, save the report and switch to the Viewer mode.
You have now a fully functional report with a rating component. Here is the result:
The code for this web page is available here.
Find more articles from SAS Global Enablement and Learning here.
Registration is open! SAS is returning to Vegas for an AI and analytics experience like no other! Whether you're an executive, manager, end user or SAS partner, SAS Innovate is designed for everyone on your team. Register for just $495 by 12/31/2023.
If you are interested in speaking, there is still time to submit a session idea. More details are posted on the website.
Data Literacy is for all, even absolute beginners. Jump on board with this free e-learning and boost your career prospects.