In the previous article in this series, I described how to integrate SAS Visual Analytics objects to the web application. The article described also how to setup the development server and the SAS Viya environment.
This article describes how to add content navigation components to the web application. The component will be based on the SAS Content SDK. This article will start where we left the application in the previous article. If you want to follow along, you can download the application from the previous article here.
Other articles in the series are:
Before we dive into the code, I think it is important to understand what the SAS Content SDK is and how to use it. Here are the available SAS navigation and "content" objects the SAS Content SDK brings to the developer different components:
These HTML tags are useful to build the user interface. Some other non-visual elements are also included to ease the development but they are not visible to the end-user. Here is an example using some the listed visual components, the end-user sees 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 picture above the numbers correspond to:
If you want to know more about the different components, please refer to this page.
To follow along with the below steps, it would be easiest approach will be to download and extract the web application at the stage it was at the end of the previous article: download When done, open the project in Visual Studio Code and add the following line in the package.json file.
When done, open a terminal in Visual Studio Code and execute the following command:
It will install all the node_modules needed for the project including the one for the SAS Content SDK.
When done, the node modules for the SAS Visual Analytics SDK and the SAS Content SDK should be copied under the public/assets of the project. The following command can be executed from a terminal opened in Visual Studio Code:
cp -r ./node_modules/@sassoftware/va-report-components ./public/assets/va-sdk cp -r ./node_modules/@sassoftware/content-sdk ./public/assets/content-sdk
When this is done, you should update the index.html file to load the newly added SDK files. Open the index.html file located under public folder and add the following line:
Note: your file might contain more information. I removed the comments for readability.
When done, you can save the index.html file and add the content into your application. If you are starting a brand new project, you can follow the SAS provided instructions in the documentation to install the SAS Content SDK.
Now that the configuration is done, it is time to add the SAS Content element to the portal page. To do so, we will create a component and add the component inside the existing portal structure.
Under the src folder, create a new folder and name it: components.
The code imports a few MaterialUI components that are used to display an animation while loading content.
We are also importing a context that will be defined later. The context will allow us to pass state of the application to the component for more information about context, please refer to the React documentation.
The next step will be to define the SASContentObject.
At the bottom of the file, you should add the following line:
export default SASContentObject
Without that last line, you will not be able to import the component to use it in the application.
Using the SAS Content SDK, it is possible to define which object types are presented to the end-user. In this example, I chose to display folders, reports and job definitions. If you want only to access the reports, you can remove the jobDefinition from the list. You should leave the folder in the list to allow navigation from the SAS Content Area.
You have also the option to select which folders to display in the tree. For example, you may not allow users to navigate the Favorites or the My Folder because your application uses the Guest authentication. Referring to the documentation will help you identify the options and values you can set. We are now done with the component but we still have some work to do.
Creating the context is most probably the easiest of the remaining steps. Using the context you can easily pass data/state to the different components of your application without passing the state through the properties (props) of the component. Under the src folder, create a folder named: context. In that folder, create a new file named: CenterContext.js. In the CenterContext.js file, write the following code:
The next step for the context will be to use it in the App.js file but we will see that a bit later.
In the previous article, we defined the right side of the portal page. With the SAS Content Object, we have the left side of the page. Let's now create the central place holder of the portal page.
Under src/components, create a new file named: CenterContent.js.
In that file, write the following code:
This simple component is the base for future developments but it will allow us to validate that the selection the user does in the SAS Content is properly passed to the CenterContent component.
The component introduces some kind of layout. The most important is the props variable which is passed to it and contains different information. The object will contain another object named data which stores the name of the selected object in the SAS Content Object component.
Let's see how all this is wired in the App.js file.
As we have seen in the previous article, the App component is the main component of the application and it federates the other components.
What does the code do:
At the bottom, we have the export statement.
We have now everything that we need to display have a working application. Before we start the application, you can do one final step to adapt the look and feel of the application. You can use the following CSS instructions in App.css file.
It is now time to save all the files (if not yet done) and start the application.
Using the application from the previous article, we can easily add a navigation component to the portal application. It will render the content of the SAS Viya environment based on the instructions that passed to it. You, as a developer, have the opportunity to decide which paths and objects should be rendered. You can also decide which action should be taken when an object is clicked/selected.
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.