Develop web applications series: Build a web application using SAS Cloud Analytic Service

[#1]

In the previous article of this series, I described how you can create a web application based on React and how you can authenticate users against SAS Viya environment from that application. So far, the different pages of the application only contain the page title.

This article is the fourth one in the Develop web applications series:

• Present the options for extracting data
• Build a React application
• Build a web application using SAS Viya Jobs
• Build a web application using SAS Cloud Analytic Service (this article!)
• Build a web application using SAS Compute Server
• Build a web application using SAS Micro Analytic Service

In this article, we will go through the steps to build a page similar to the one we have seen in the previous article but this time, the data will come directly from the SAS Cloud Analytic Service (CAS). We will reuse the application structure which was created in this article. We will focus on the CAS tab. As for the SAS Viya Jobs, we will display two dropdown boxes to select a library and table then a submit button to retrieve the data to populate a table. The result will be similar to 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.

Reusable components

If you have been through the previous articles in the series, you should know by now that we are building a React application and that the benefit of React is that we can reuse components. In the article covering the SAS Viya Jobs, we have created different components that we will reuse in this article:

• A dropdown box to select a library
• A dropdown box to select a table
• A table that will display the data
• A loader that will be displayed whenever the application is waiting for data from the SAS Viya environment

If you want to see the code for these elements, please check the Reusable components section of this article.

 

Specific component for the CAS page

We can't only reuse components for the CAS page, we will have to create one specific component: CASSelector. This component is a wrapper component that will reuse the LibrarySelector and the TableSelector components. The CASSelector is responsible for passing the needed information to the two selectors and to submit the request that will populate the TableViewer which will be added in the next section of this article where we update the CAS page.

Let's create a new file named: CASSelector.js. under the components/Selectors folder of our application. The file has multiple sections:

1. The import statements
   This section imports the reusable components we have created and the other components provided natively by React and react-bootstrap. In addition, we are importing the authentication context and the axios instance that we have defined in the previous article of this series.
2. The CASSelector function definition and the selection handlers
   This section defines the function and defines the different variables that are needed to get the authentication context, handles the states and defines the functions that are passed to the LibrarySelector and TableSelector components.
3. Within the function, the React hook to extract the list of CAS libraries
   This section handles the request to get the list of CAS libraries. It checks if the user is authenticated and has a CAS session. Then it calls the table.caslibInfo action to extract the list of CAS libraries. When the data is retrieved from SAS Viya, the data is passed to the libraries state.
4. Within the function, the React hook to extract the list of tables
   This section handles the request to get the list of CAS tables. It checks if the user is authenticated and has a CAS session. Then it calls the table.tableInfo action to extract the list of CAS tables. When the data is retrieved from SAS Viya, the data is passed to the tables state.
5. The return statement of the CASSelector function
   This section defines the layout of the CASSelector component that we will use in next stage. As you can, see the TableSelector will only be enabled when the user has selected a library. The same applies to the Display button which will be only enabled when the user has selected a table.
6. The export statement
   This section is closing the function and exporting the component for later use.

CAS page

Now that all the components are created, it it time to update the CAS.js file under pages directory. Once again the file has multiple sections:

1. The import statements
   As earlier, we are here importing all the components that are used in the page.
2. The CAS function definition
   This section defines the function and defines the different variables that are needed to get the authentication context, handles the states and history.
3. Within the function, the React hook to validate the authentication
   The React hook checks whether the user is authenticated or not. If he is not, he is routed to the logon page.
4. Within the function, the React hook to handle the CAS session
   In order to access the CAS data, the user needs to be authenticated and to have an active CAS session. This section is creating the CAS session if there is no session.
5. Within the function, the React hook to get the data for the table 
   This hook calls the table.fetch action to get the data that will be displayed in the table. It needs therefore to pass the CAS session.
6. The function handling the selection 
   In order to refresh the components, the states for the table data and for the selection are updated. As a side effect, the components are updated and effect hooks are triggered.
7. The return statement of the CAS function
   
8. The export statement
   

 

Conclusion

In this article, we've seen that by reusing components we have created in the previous articles, we can reduce the number of lines in new pages. If you test the application on your own, you will most probably notice that the time needed to populate the prompts and the result table is smaller compared to the SAS Viya Job. Nevertheless, you should keep in mind that you can access really large tables and that you might have to handle this as a web developer as it might impact your application response time.

In this article, we've used basic CAS actions but you can use all the CAS actions that are available on your environment. For more information about CAS REST APIs: https://developer.sas.com/guides/restapis/cas-rest.html 

The code for this article can be downloaded here.

This article is the fourth one in the Develop web applications series:

• Present the options for extracting data
• Build a React application
• Build a web application using SAS Viya Jobs
• Build a web application using SAS Cloud Analytic Service (this article!)
• Build a web application using SAS Compute Server
• Build a web application using SAS Micro Analytic Service

Find more articles from SAS Global Enablement and Learning here.