An approach to SAS Portal in Viya : Navigating and displaying report

1 Like

In the previous article of this series, I described how to explore the SAS Content Server using the SAS Content SDK. While extremely helpful in designing a user-friendly custom interface, navigating the SAS folders tree is not the ultimate goal.

This article describes how to navigate SAS content and then display a SAS Visual Analytics report. 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 needs to be done?

In the series' articles, we have seen how to insert SAS Visual Analytics content using SAS Visual Analytics SDK. We have seen how we could use the SAS Content SDK to navigate the SAS content. Now we have the pieces in place so that the user can select a report from the SAS Content SDK and display the report in the center of our portal application.

As this is a simple task, we will also see how we can hide the SAS Content components to maximize the area where the report will be displayed.

Display the report

In the previous article, we have created a component which takes care of displaying information in the center zone. If you remember well, selecting a report object in the left pane triggers an update of the central zone which displays the object name.

Select any image to see a larger version.
Mobile users: To view the images, select the "Full" version at the bottom of the page.

In the properties that are passed to the CenterComponent, we are passing the url of the SAS Viya environment and a data object:

The centerData state contains the following information:

the object type
the object uri
the object name

In the previous article, we used only the name variable. It is now time to use the other properties. Recall from an earlier article, that adding a report object to a web page is as simple as defining a sas-report tag in the HTML page or in the component. The sas-report tag requires a few properties:

the report uri
the SAS Viya environment url
the authentication mechanism

For more information about the sas-report tag, please refer to documentation.

So, let's update the component with a sas-report tag. At the same time, we will add the logic needed to display a default message if there is no report selected. That logic can also be used to add other object types as we will see later in the series.

Here is the updated component code:

xab_3_Portal_NavigateDisplay_CenterComponentCodepng.png

Before we can check the result, we should save the file and also update the App.css file. We want to make sure that the report object fully covers the center area. For that reason, we need to add the following CSS instructions:

The application now looks like this when the user has not yet selected a report.

When the user selects a report in the SAS Content, the application looks like this:

Maximize the report area

At this point, we already have a nice looking portal page but users are interested in data and the report may look cluttered especially on smaller screen/browser sizes.

To improve the user experience, we will add functionality to maximize the report by hiding the left and right panels.

To implement this functionality, we will use the Drawer component provided by Material UI. If you want more information about this component, please refer to this documentation. We will also implement a button in the CenterContent header to render the side panels or not.

When maximized, the application will look like this:

We will need to adapt the Grid layout that was originally used. So, let's update the App.js file. First step will be to import the needed components:

Then define the new useState hooks that will store the information about:

Whether the drawers are displayed or not
The size of the component at the center

As we need to change the drawers visibility, we need to implement a function which will handle a click event in the CenterContent component and recalculate the drawers size based on that state. This is the purpose of the code below:

xab_11_Portal_NavigateDisplay_defineEffectsAndHandler.png

The last step will be to refactor the view that is rendered. We will be moving from a pure Grid layout to Box layout. It will be easier to position the elements.

Here is the return statement after modifications:

As you can see, we have added the two drawers one on the left and one on the right. The Drawer component has an open property which can be used to show or hide the drawer. The content of the drawers is the same as the one used previously in the left and right panes of the application.

In the code you see on line 51 that we are passing a new property to the CenterContent component. The reason is that the state of the CenterContent component will impact the drawers' visibility. Therefore, the properties are passed from the application to the component.

Let's see what needs to be changed in the CenterContent component.

The first step is to add new import statements.

Then we need to update the CenterContent function. As we are adding a new functionality to the header section of the CenterComponent, it is the right time to also add some logic for the header. A good practice would be to create a new component for the header in a separate file and import it. To make things easier to follow-up, I decided to keep the header component in the same file as the CenterContent component.

So, let's add the logic to display the header or not:

The next step will be to define the header:

xab_15_Portal_NavigateDisplay_defineHeaderComponent.png

As you can see in the code, we are passing the properties for data and drawers. We have implemented two icons to open or close the drawers. When clicked, the buttons will trigger the displayDrawers function that is defined in the App.js file.

The last part of the code is responsible for the rendering of the CenterContent component.

Demo

After saving all the files and authentication, the application should act as seen in this video.

(view in My Videos)

Conclusion

Using the SAS Content SDK and the SAS Visual Analytics SDK, it is possible to build the necessary components for the end-user to navigate the SAS Content tree and select a report to display. The benefit of the different SDK's that SAS provides is that you, as a developer, will not need to know about the REST APIs that are used behind the scenes to populate the different objects, as you can easily plug the different components in your existing applications or create a new one. You can easily navigate the SAS content and display the reports. You have also seen that using a framework helps in organizing the different objects on the screen. Throughout the code you have seen so far, React and Material UI have been used but you can use your preferred framework or no framework at all.

In the coming articles, you will see how to integrate other SAS content in your portal but also how to unify authentication and many other topics to build a portal like application. Stay tuned for the other articles in the series.

The code at the end of this post 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
An approach to SAS Portal in Viya: Navigating and displaying report (this article)
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.