In the previous article of this series, I've 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 third one in the Develop web applications series:
In this article, I will drive you through the steps to retrieve data from the SAS environment using SAS Viya Jobs. We will be building out the Jobs tab and on the page 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.
As we have seen in the previous article, React is designed in such a way that we can reuse components. To continue with the theme to build reusable components for the other tabs we will build out, let's create four components:
The library selector is a stateless component. It gets properties from the parent component. The properties are in the form of data (a list of libraries) and a function to handle the changes in the selection. In order to get a consistent layout, we will again use the react-bootstrap components (which needs to be imported). In our project, create a directory named Selectors under the components directory. Create a new file named LibrarySelector.js and write the following code in it.
As you can see in the code, we are importing the react-boostrap components we need and then create a function that returns a Form.Group which contains a Label and a list of options that are coming from the props.data variable.
This component is also a stateless component and will work the same way as the LibrarySelector. So, you should create a file named TableSelector.js under the same directory as the LibrarySelector. The file needs the following content:
As you can see, the code are pretty similar to the LibrarySelector. We might have created a single file to handle the library and table selection and pass an additional props to identify if it was for tables or libraries. I've chosen to have separate files in case we want to handle the table and library selection differently in the future.
To display the data retrieved from SAS Viya, the application use a tabular format. Luckily, the react-boostrap library comes with a table component. Create a new directory under components directory and name it TableViewer. In that new directory, create a new file and name it: TableViewer.js. The content of the file should be:
As you might have guessed by know, this component is again stateless, but compared to the dropdown boxes, this component only receives data and no function.
This component will be displayed whenever the application is waiting for SAS Viya to provide data. This is again a stateless component. It will just get a true/false flag in the form of a status variable in the props. If the status is true, the spinner component will be displayed. If the status is false, nothing will be displayed. Create a file named Loading.js under components directory and write the following content to it:
So far, we've seen components that will be reused in most pages of our application. It is now time to use them to build the specific page for the SAS Viya jobs under the Jobs tab. We will create a specific content. A JobSelector component which will be a form that uses the dropdown boxes and a submit button to handle the library and table selection and submit the request to populate the table. Thanks to the reusable components, the work to create a page will be reduced. Under components/Selectors directory, create a file and name it: JobSelector.js. The file has multiple sections:
Now that all the components are created, it it time to update the Jobs.js file under pages directory. Once again the file has multiple sections:
We have now a fully functional page that will get data from a SAS Viya Job. At this stage, you most probably would like to view the SAS code for the job!
For this web application, I've made the choice to create a single job. The job will return data in the form of a JSON object. Depending on the parameters that will be passed, the job will return different results:
I've created three different macros for each purpose:
A fourth macro named execute acts as a wrapper.
Here is the SAS code:
In this application, the SAS Viya Job has been created in SAS Studio and saved as /gelcontent/Demo/VISUAL/Jobs/extractData. If you saved it in another location, please don't forget to update the different hooks that are calling the job.
The job has been created with the following parameters:
If you need more information about SAS Viya Jobs and how to create a job using SAS Studio, please refer to Create a SAS Viya Job with a prompt using Task Prompts.
When building an application that is based on SAS Viya Jobs, you should keep in mind that by default each call to the job will spin up a SAS Compute Server. As a result, your application may feel a bit slow in Viya 4. In Viya 3, starting a SAS Compute Server was a matter of milliseconds. With Viya 4, a new Kubernetes node needs to be started and this process may take a bit more time than just starting the compute server. Starting with Viya 2020.1.4, it is possible to configure a pool of available servers. This new functionality gives the opportunity to the SAS Viya Administrator to specify the number of Compute Servers which should be always available for processing. This option can be set on the SAS Job Execution compute context in order to pre-start a number of compute servers to reduce the lag between the user request from the web application and the server sending the response.
In this article, we've seen how to create reusable components. It will reduce the lines of code for the other articles in the series. We have also seen that with a few lines of SAS code, we can extract data from the SAS Viya environment using SAS Viya Jobs. You also learned that starting with Viya 2020.1.4, the performance can be improved by configuring a pool a compute servers.
The code for this article can be downloaded here.
This article is the third one in the Develop web applications series:
Find more articles from SAS Global Enablement and Learning here.
Great article!
It's also possible to dynamically create backend SAS Jobs in Viya using macro, here is an example: https://core.sasjs.io/mv__createjob_8sas.html
Registration is now open for SAS Innovate 2025 , our biggest and most exciting global event of the year! Join us in Orlando, FL, May 6-9.
Sign up by Dec. 31 to get the 2024 rate of just $495.
Register now!
Data Literacy is for all, even absolute beginners. Jump on board with this free e-learning and boost your career prospects.