Using Node.js to develop with the VA SDK – a deeper dive

In my previous post, I explained how to create a simple web page using the SAS Visual Analytics SDK and Node.js. In this follow-up blog, I explain how to create interactions between objects in the html page and how to integrate data coming from the report in a custom component. Even though, there will be some JavaScript code, don't be afraid! The code is easy to understand and is available for download.

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:

Define action definitions for objects within the SAS VA report.
Validate that the actions are working as expected using SAS Visual Analytics.

Develop an application using the SAS VA SDK using SAS report objects. The code is like this:

<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:

Is there a difference with the code used in the previous blog? No
Should I write extra JavaScript code? No
Should I pay extra fee for this? No

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.

Modify the previous VA report to suit our needs

In the previous blog, I created a Visual Analytics report with three objects:

Bar chart
Bubble plot
List table

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:

In this example, I won't create an external webpage to display in the data-driven content object. I will use the default page that is provided by the data-driven content object with SAS Visual Analytics which is a single select list control. Our purpose is not to demonstrate how to create fancy visualizations using JavaScript. The objective in this case is to retrieve data from the VA report and to display the data in our web application.

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!

Update the HTML code

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:

The style section in the Head section has been removed and replaced by a link to src/main.css stylesheet.
The div order has been changed. The two charts will be displayed at the bottom of the web page.
The sas-report-object for the list table has been deleted and replaced a div with id ddc.
An additional div containing an iFrame has been added next to the ddc div.
A script tag pointing to src/main.js has been added at the bottom of the file.

As a result, the web application looks like this when you load it.

Let's walk though each modification.

Main.css file

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.

DDC div

The sas-report-object pointing to the list table has been removed as the object has been replaced in the report by a data-driven content object. We could have just replaced the objectName property of the sas-report-object by the one of the data-driven content object. That would have displayed the object as any object in the report. For our application, the objective was to demonstrate how you could retrieve data from the report, display the data and take actions in the web application to populate other non-SAS objects. For this reason, I've just defined a ddc div as a placeholder in the web page. This div will be populated by data coming from the report using JavaScript.

iFrame

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.

Writing the JavaScript

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.

The code in the application is based on the information coming from developer.sas.com and on the sample available on GitHub. Here is the code:

To summarize what the code is doing:

Define an event listener to make sure that the vaReportComponents are loaded.
Register the data-driven content object pointing to the report and reportUri.
Define a displayData function that is called when the data are retrieved from the VA report.
The displayData function is responsible to generate the table displayed in the ddc div and to define a click event on the rows of the table. When clicking on a row the iFrame will be updated based on the selected manufacturer.

Here is a small demo of the result:

(view in My Videos)

Conclusion

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!