In the first article in this series, I described the role of the SAS Information Delivery Portal and the different types of information that you can include in it.
This article will be about integrating SAS Visual Analytics content in the portal. To achieve this, I will walk you through the steps to configure a development environment that you can use throughout the blog series. You will discover how you can use technologies like NodeJS, ReactJS and Visual Studio Code to build a web application like a portal. You will also discover the different approaches to insert SAS Visual Analytics content in a portal-like web application using the SAS Visual Analytics SDK.
Based on my experience and the feedback I received from people who are reading my blogs, configuring a development environment is sometimes challenging. The questions I often get are:
There is no one perfect answer that can meet everyone's needs. I recommend to use the components that you are confident with and for which you can get support from colleagues and from a large developer's community.
With that being said, I will summarize my answers to these three questions:
The first step in the configuration will be to install the needed components.
There is no need to configure NodeJS as it works out-of-the-box. You can nevertheless validate that NodeJS is properly installed by starting a terminal on the machine where it is installed and execute the following command to get the installed version (note that you may have a different result):
Select any image to see a larger version.
Mobile users: To view the images, select the "Full" version at the bottom of the page.
Now that NodeJS is installed and working, you can create your React application by executing the following command:
npx create-react-app sasportal
You have created your React application. It is now time to start it and validate that it works. To do that execute the following commands:
cd sasportal npm start
The npm start command will start your application/server and open a browser window with the default application.
You can stop the server for now by closing the Terminal or pressing ctrl+c keys.
You can now start VSCode and open the folder containing your application.
Within VSCode, navigate to the src folder and open App.js file. Around line 18, you should see the text Learn React. You can change the text to Learn SAS. When done save the file.
In the left panel, at the bottom you should see an NPM SCRIPTS accordion. Open it and click on the play icon next to the start command.
It will start the server and open a browser where you should see the modification you did.
There is one little change that you need to do to interact with SAS Viya. You need to run your server using HTTPS. Here are the steps to configure it:
set HTTPS=true&&react-scripts start
($env:HTTPS = "true") -and (react-scripts start)
HTTPS=true react-scripts start
A new browser window will open up but this time, the url will be https://localhost:3000.
To integrate SAS Visual Analytics content in the web application we are building to mimic theportal, SAS provides the SAS Visual Analytics SDK. The SDK eases the integration of the SAS Visual Analytics components: report, page or object. The SAS environment needs specific configurations to use the SAS VA SDK. The setup information is provided on the following page. It is important that your environment is properly configured. Here are the screenshots of the environment I'm using:
Please note that the above configuration is only valid for a development environment where developers are running their web server on localhost. You can configure NodeJS to run under the machine name but that implies you need to add the machines of all the developers in the list of allowedOrigins. If you are working on an environment where security is important, you should not use localhost.
If you need more information about the configuration of these parameters, please refer to the following article.
Now that the development environment and the SAS Viya environment are configured, it is time to replace the default page and include SAS Visual Analytics Content.
The first content we will add is "static" content that will display a Key Value object. We will insert the reference to an object that was extracted with the related data from a SAS Visual Analytics report page. This functionality to export report elements from SAS Visual Analytics for offline usage has been added to SAS Viya 2021.1.5. If you want more information about the functionality, please refer to this article.
To build the portal, I've downloaded some Covid-19 related data from European Centre for Disease Prevention and Control. Using these data, I could create a few reports in SAS Visual Analytics. If you want to follow along the steps, you don't need to use specific data or specific objects or report layout. Any object can be used though you should be aware of the data limits. The exported element can't bring all the CAS data offline. So, you should think about the usability and the amount of data that is required for your KPI. If the amount of data needed is too big to be made available offline, it is also possible to use the dynamic elements as we will see with the second object we will add to our application.
First step will be to export the SAS Report Package from SAS Visual Analytics.
The Report Package will be generated and downloaded to the client machine.
Your folder content should look like this:
Creating a folder that has the same name as the report is interesting when you need to automate the extraction process. As I mentioned, the exported package is a set of completely independent files and there is no link to the Visual Analytics report. As a result, the report package should be recreated as often as the data are refreshed. You can automate the export process using the sas-viya CLI and also automate the extraction to replace the content of report folder in the application.
Now that we have the report object and the data in the web application, it is time to integrate the KPI in the portal. In order to do this, the SAS VA SDK needs to be integrated in our application. We have two options:
As we are using NodeJS, we will choose the first option and use the npm package. For more information about how to use the SAS VA SDK, please refer to the documentation or this article for an introduction or this one if you want to dive deeper.
npm install @sassoftware/va-report-components
cp -r ./node_modules/@sassoftware/va-report-components ./public/assets/va-sdk
It is now time to add the report object in the application.
The resulting page needs to be modified since we can see that the object is not completely displayed. It is time to adapt the layout of the application. You have multiple options to customize the application layout.
Knowing that the objective is to build a portal with different components and that we are in the early stages of that process, it is important to make the right choice. Mine has been to use Material UI. This library is based on Material Design concepts and has a large library of components which makes it easy to use. React Bootstrap is also another great option but Material Design has my preference. It is up to you to choose the library you are the most comfortable with. If you need more information and examples about Material UI, please refer to the Getting Started.
Before you can use the Material UI components, you need to install the NPM packages.
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
The application looks like this. The object is displayed in the top right of the page as we defined using the Grid components.
Now that the application contains "static" content, it might be a good idea to insert another KPI with dynamically loaded data. The biggest difference between the two types of objects is the need for a connection. For the "static" content object, it was possible to extract the object and the data. From that point, the content is static and will only be refreshed when the report object is extracted again and replaced in the web server. The dynamically loaded object requires a connection to the server. Without that connection, the object can't display data. The environment that I'm using for this article, doesn't have Guest access which means that the user will have to authenticate before he or she sees the data.
Let me guide you through the steps to add the dynamically loaded object. I will use another report that is based on Covid-19 number of cases and deaths. The steps to integrate that report object are:
Now that you have copied the HTML tag, you can add a new Grid tag in the App.js file. Inside the Grid tag, paste the code you copied for the report object. The code should now look like this.
If you compare the code from the exported report package and the generated link, you should notice a few differences. The sas-report-object contains the connection information to access the server (authenticationType and url). It also contains a reportUri instead of the packageUri. Technically, we have the same sas-report-object tag but different information are passed to it.
Please note also that minHeight for the cell has been set to 400px as the object requires a bit more space to display its content.
After saving the App.js, you can navigate to the portal page and you should get the following result.
As you can see, the second object prompts the user to Login. This is the expected behavior as the generated sas-report-object tag has an authenticationType set to credentials.
After clicking on the Login button, the user is prompted for authentication.
After the authentication process, the user sees the following result.
In this article, we've seen the different techniques to integrate SAS Visual Report Objects in a custom web application which is designed to server as a portal. You've seen how we can export SAS report packages to display static content and how to use the Copy Link functionality from a live report to generate the HTML tags that you can use in your application to display dynamic content.
The first part of the article was mainly about configuring your development environment to build a React application and integrate the SAS Visual Analytics SDK. By now, you should be able to create the basic structure of your application and to integrate KPIs from the SAS Visual Analytics. If you are coming from a SAS 9 world with the SAS Information Delivery Portal, these KPIs were generated using SAS BI Dashboard and then inserted using a portlet. Using the SAS Visual Analytics SDK, we are able to provide the same kind of content using HTML tags instead of a portlet.
Stay tuned for the other articles in the series. The code at the end of this blog 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.