Before we dive into the programming side of this blog, I want to point out a built-in feature provided by the SAS VA SDK. This feature is about Actions, specifically defined object actions. When you build a VA report, you can create actions between objects in the report, either filter or linked selection (data brushing). For example, clicking on a bar in a bar chart to filter a list table and pie chart in the same report. Action definitions create report interactivity which is what you expect between report objects using SAS Visual Analytics. When you create your own application as demonstrated in the previous blog, you might worry that all the action definitions are lost and that you would have to code those actions manually in your application. This is where R&D did a wonderful job building the report elements: action definitions are “automagically” honored!
You might wonder, how is this possible? Here are the steps:
<sas-report-object class="col-6 border" objectName="ve26" authenticationType="credentials" url="http://va85.gel.sas.com" reportUri="/reports/reports/256c5cec-747a-4e15-8233-45ebcf489a18"> </sas-report-object>
This is it! Let me try to answer some questions you might be asking yourself:
This functionality is built-in the SAS VA SDK.
Now comes the time to dive deeper into the SAS VA SDK!
Here is what we will design by the end of this article. My objective is to demonstrate how you can retrieve data from the report, the data-driven content object, then display the data and take actions in the web application to populate other non-SAS objects, the web page based on a selected value from the data-driven content object.
In this screenshot, you can see the VA objects in red and the non-SAS object in blue. Notice that we will use the out-of-the-box action definition functionality to drive filtering as I described above.
Select any image to see a larger version.
Mobile users: To view the images, select the "Full" version at the bottom of the page.
In the previous blog, I created a Visual Analytics report with three objects:
The first step will be to replace the list table by a data-driven content object. If you are new to SAS Visual Analytics and do not know about the data-driven content object, I suggest reading the following blogs to get a better understanding:
So, remove the list table object from the report and add a data-driven content object instead. In the Roles pane for the data-driven content object, add the data items Make and Invoice. As we are using the default object, there is no need to change the URL used by the data-driven content object. The report should look like this. Please note that the order of the variables is important.
Note: the demo uses the default URL, if your report is using a more advanced data-driven content object, this sample will also work.
The next step is to define the actions between the data-driven content object and the other report objects. Here is a screenshot the actions I defined for the VA report.
We are done with the report. Don't forget to save it!
Now that I am happy with the report design, the next step is to adapt the HTML code of the web application. You can download the original code from GitHub and update it or you can download the updated file from here. If you compare the two files, you will notice a few changes starting from the top of the file:
As a result, the web application looks like this when you load it.
Let's walk though each modification.
The web application is getting a bit more complex. Instead of adding all the styles element in the head section of the HTML page, it is better to define the CSS instructions in a separate file. The CSS file is fairly short as we are using the Bootstrap framework to define most the layout of the web application.
Here is the content of the file:
You can download the file from GitHub.
The .row instruction is to define a minimum height for the element having the row class.
The .table-fixed instructions are modifying the table displaying the data-driven content object data to freeze the header of the table and to enable scroll in a limited space.
Compared to the original web application, I wanted to demonstrate how other objects in the web application could be updated based on actions taken based on the data coming from the SAS Visual Analytics report. As we are using data about cars, the report shows data relevant data and the iFrame will populated using content from https://www.car-logos.org/. This website provides information about car manufacturers. In our application, the content the iFrame will be adapted based on the selection done in the ddc div.
The index.html file is taking care of the layout. The main.js will take of handling the data coming from the DDC object but also populate the iFrame based on user's selection.
To summarize what the code is doing:
Here is a small demo of the result:
The SAS VA SDK provides a lot of opportunities to develop custom web applications and to integrate SAS content in those web applications. The level of integration can be basic using the sas-report and sas-report-object element with actions definitions between objects as in SAS Visual Analytics or more advanced when getting data from a data-driven content object. You could also integrate other data coming from SAS using SAS Viya jobs. As you can see the sky is the limit!
Data Literacy is for all, even absolute beginners. Jump on board with this free e-learning and boost your career prospects.