The SAS Visual Analytics SDK first became available with the SAS VA 8.4 release in addition to the SAS Mobile SDK.
The announcement gave me a lot of ideas that I am eager to explore.
Select any image to see a larger version.
Mobile users: If you do not see this image, scroll to the bottom of the page and select the "Full" version of this post.
Meera Venkataramani published an article about the SAS Visual Analytics SDK: Embedded Insights with SAS Visual Analytics SDK. In it she explains how to create a web page using SAS VA SDK, the Apache web server, and the SAS VA SDK hosted on unpkg.com.
At the time Meera wrote this, it was required to have Guest access configured for Viya in order to access Visual Analytics reports and objects from the SAS VA SDK. Great new for us, with the latest release of the SDK and SAS Viya 3.5, there is no need to configure Guest access. For those accessing an environment running on SAS Viya 3.4, you should install the latest hotfixes/packages and the latest version of SAS VA SDK to suppress the requirement for Guest access.
My development environment will defer from Meera's in that I will be using Node.js as my runtime environment for the web pages.
In just a few years, Node.js has become the developer's environment of choice for building web sites/applications. It is easy to install and the ecosystem provides a lot of packages to ease the configuration and the development of web applications. One big advantage of Node.js compared to Apache when developing is the separation of the projects and the usage of npm to manage the packages. In this article, you will see how easy it is to create a sandbox to build your application. If you don't have Node.js installed on your machine, please follow the instructions from Node.js website.
You should have Node.js installled on your machine. The easiest way to check if it is installed is to execute the following command from command line on your machine: node -v
The result will provide information about the installed Node.js version. Here are the steps to setup the project:
By default the server will run on port 3000. If the port is already in use, you can add --port nnnn after the --server option (replace nnnn by a port that is not already in use).
A browser window will automatically open and display this:
As indicated in the Getting started, we need to configure the SAS environment for Cross-Origin Resource Sharing (CORS) and Cross-Site Request Forgery (CSRF). For the CORS configuration, you can refer to this article. For the CSRF configuration, you should connect to SAS Environment Manager as described for the CORS configuration and set the sas.commons.web.security.csrf as shown below:
The allowedUris option should be set using regular expression. In this example, I used: (.+\.)+.+\.sas+\.com.
This expression will allow authentication from all machines having a hostname ending with sas.com. It can be tricky to setup the option properly because the hostname recognized by the browser may not be the same as the one generated by the hostname command at OS level. To clearly identify the hostname of the development machine, you can edit the index.html file and add the following lines at the bottom of the file after the last script statement and before the body tag:
<script> $( "body" ).append("My hostname is "+ location.hostname); </script>
After you save the index.html file, the file in the browser will automatically be refreshed (thanks to browser-sync). It should display a message similar to this:
My hostname is sbxxab19.sbx.sas.com
This hostname should be white listed in the CSRF configuration. You can now remove the few lines we just added to retrieve the hostname as we are done with the configuration of the SAS Viya environment.
We have a running web page but there is still no VA content in it, yet. Here are the steps to add VA content in our page.
As you can see in the html code, I've added a few classes provided by Bootstrap to new divs but also to the sas-report-object tags. I've also added a style in the head element to increase the minimum size of Bootstrap row class.
You have created a web page/application which displays VA report elements. The same technique can be used to embed full reports and Data-Driven content objects in web pages. It eases the integration of VA elements (reports or objects) within third-party portals or web applications. In this example, the user was prompted for credentials. In a real life scenario, the customer will most likely provide seamless authentication between the custom application and the Viya environment. While developing your own web page, you should surely refer to developer.sas.com. It provides a lot of information about the SDK. You can also look at the examples published on GitHub, where they provide VA SDK samples. The VA SDK offers more functionalities than the ones covered in this article.
SAS is headed back 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.
Interested in speaking? Content from our attendees is one of the reasons that makes SAS Innovate such a special event!
Data Literacy is for all, even absolute beginners. Jump on board with this free e-learning and boost your career prospects.