An approach to SAS Portal in Viya : Adding SAS Content navigation

1 Like

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.

What is the SAS Content SDK?

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:

sas-content-area : displays the content of a folder either as a list or table view.
sas-content-breadcrumb : displays breadcrumb links allowing the user to navigate to previously visited folders.
sas-content-group: act as a wrapper element for the other elements and enables cross component functionality.
sas-content-tree : displays a customizable SAS Viya folder tree for navigation.

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:

The sas-content-tree
The sas-content-breadcrumb
The sas-content-area

If you want to know more about the different components, please refer to this page.

Integrate SAS Content SDK package

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:

npm install

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.

Create a SASContentObject component

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.

In that folder, create a file and name it: SASContentObject.js We will now create a React component which will wrap the different HTML tags provided by the SAS Content SDK. The first few lines when you create a component are the import instructions. These are needed to indicate which JavaScript elements are used by the new component. At the top of the file, write the following code:

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.

Defines the variables and enforce usage of the context.
Creates the definition of the SAS Content SDK elements as described here. The definition is inserted in a useEffect hook to execute it when the SAS Content SDK is loaded. For more information about React useEffect hook, please refer to this documentation. To identify whether the SDK is loaded, we are passing a property named display to the function. The setCenterData is defined in the context and will trigger a refresh of the center of the portal page to display some information. The component will be created later in the article (and in the article series).
Defines a variable which contains the JSX code. That variable will be used to determine if the SAS Content should be displayed.
Defines a circular progress element which will be displayed while the SAS Content SDK loads and while the SAS Content is retrieved from the server.
Defines the logic whether to display the SAS Content object or the circular progress.

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.

Define the context.
Create a component which will be displayed in the center of the portal.
Update the App.js file to include the new components.

Create a context

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.

Create a CenterContent component

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:

xab_7_Portal_SASContent_centerContent-e1650633354162.png

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.

Update the App component

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:

Imports the needed components and functions that are used in the App as well as the context.
Defines some state that are used to identify the status of the application.
Defines an event which checks if the SAS Content SDK is loaded and available.
Defines the right side of the page with the static and dynamic report objects.
Adds the CenterContent component and pass some properties to it. One of the property is the data object which will provide the information that should be displayed in the CenterContent component.
Adds the SASContentObject and pass some properties to it. The display property is the boolean which indicates whether or not the SAS Content SDK is loaded. The component will then take actions based on that value.

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.

Demo

(view in My Videos)

Conclusion

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.

An approach to SAS Portal in Viya: Introduction
An approach to SAS Portal in Viya: Adding SAS Visual Analytics content
An approach to SAS Portal in Viya: Adding SAS Content navigation (this article)
An approach to SAS Portal in Viya: Navigating and displaying report
An approach to SAS Portal in Viya: Adding an application bar and authenticating
An approach to SAS Portal in Viya: Adding a chatbot to your portal page
An approach to SAS Portal in Viya: A landing page for everyone
An approach to SAS Portal in Viya: Implementing a backend server

Find more articles from SAS Global Enablement and Learning here.