Navigating SAS Content using the Content Components Library in the SAS Viya SDK

In this post, I will explain how to use the Content Components Library in the SAS Viya SDK for JavaScript to navigate SAS content. With it, you can browse and choose specific content items or list the contents of an entire folder. You can filter content by type and determine what happens when content is selected or opened. This can be useful to include when embedding Visual Analytics reports or Jobs in a website, as described in Embedded Insights with SAS Visual Analytics SDK.

Content SDK components

There are various components that you can use to browse SAS Content. These are contained in the ContentGroupElement. The ContentGroupElement enables cross-component functionality, such as folder navigation, selection, and filtering. You can nest the ContentBreadcrumbElement, ContentAreaElement, ContentTreeElement and ContentLocationElement within the ContentGroupElement. These components look as follows:

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

Note that here the ContentAreaElement displays controls for sorting and display style at the top right. These controls can be hidden. The ContentAreaElement can also display its own navigation breadcrumb. I disabled that here to demonstrate the standalone ContentBreadcrumbElement. The advantage of using the standalone ContentBreadcrumbElement is that you can choose where to place it.

Step 1: Install Visual Studio Code and Five Server

I will write the HTML for the webpage using Visual Studio Code. First, I download and install Visual Studio Code from here. Open Visual Studio Code and then install the Five Server extension:

The Five Server (Live Sever) Visual Studio Code extension allows me to start a small web server locally. I can render the HTML files I write. When I save the HTML file, it automatically reloads the rendered webpage so I can visualize the latest changes.

Now, I need to create or open a folder in which I will place my HTML files. Within this folder, place a text file named fiveserver.config.js with the following content:

module.exports = {

port: 3000,

host: 'localhost',

https: true

}

Now, open the folder containing fiveserver.config.js in Visual Studio Code. This ensures that Five Server uses this config file when opening HTML pages:

Then, use CTRL+N to open a new file, and type in the following:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Note the <script> tag references the latest version of Content Components Library of the SAS Viya SDK for JavaScript using its Content Delivery Network. The URL refers to the latest version. When the library is used in production, consider pinning it to an explicit version. This is done with a URL like https://cdn.developer.sas.com/packages/content-components/ ${VERSION}/dist/umd/content-sdk-components.js, where ${VERSION} is the full major.minor.patch semantic version. Alternatively, you can host this file locally on your web server. This file includes the definitions for the <sas-content-group>, <sas-content-breadcrumbs>, <sas-content-tree>, <sas-content-locations> HTML tags and how they interact.

We are now ready to write the markup.

Step 2: Copy the markup

Option 1: Copy markup for specific folder if you have administrative privileges

Follow these steps if you have administrative privileges and want to navigate through a specific folder. Alternatively, follow the steps in the next section if you don’t have administrative privileges.

Log in to Visual Analytics using an account with administrative privileges. Right-click on the folder containing the items you want to navigate through and select Copy for SAS Viya SDK:

You should see the following markup. Ensuring the checkboxes for content area and breadcrumb are checked, copy the markup:

Paste the HTML markup within the <body> tag of the HTML. This defines the layout of the components on the webpage. You can also add a <sas-content-tree> or sas-content-locations component inside of <sas-content-group>:

<sas-content-tree url="YOUR_VIYA_URL" id="ct"></sas-content-tree>

<sas-content-locations url="YOUR_VIYA_URL" id="cl"></sas-content-locations>

Replace YOUR_VIYA_URL with the URL of your Viya instance (see below).

The JavaScript defines the folders to be displayed. Paste the JavaScript within the <script> tag inside of <body>:

Replace YOUR_VIYA_URL with the base URL of your Viya installation. In my case, it is https://create.demo.sas.com/, but yours may differ. If you open Viya using a browser, navigate to any Viya application and copy the beginning of the URL from the address bar. If you use a Progressive Web Application, use the ALT+F keyboard shortcut or click on the Settings and More button on the titlebar to see this:

Option 2: Copy link to folder without administrative privileges

You can use the following markup inside <body>:

<sas-content-group id="cg">

<sas-content-breadcrumb id="cb"></sas-content-breadcrumb>

<sas-content-tree id="ct"></sas-content-tree>

<sas-content-locations id="cl"></sas-content-locations>

<sas-content-area id="ca" selection-mode="single" hide-breadcrumb="true"

initial-hidden-columns="dateCreated,createdBy,modifiedBy"></sas-content-area>

</sas-content-group>

Delete the components that you to wish to exclude as necessary.

From Home in SAS Visual Analytics, right-click on the folder you wish to navigate through and select View folder details. This will open the folder in SAS Environment Manager.

From there, you can copy the folder URI:

Use the URIs instead of YOUR_FOLDER_URI in the following code. Then, place the code within the <script> tags inside of the <body> tag:

window.addEventListener('contentSdkComponents.loaded', () => {

const cg = document.getElementById('cg');

const folderIdentifier = {

type: "driveItemId",

value: "YOUR_FOLDER_URI"

};

const locationContextPath = [

{

"type": "persistentLocation",

"value": "root"

},

{

"type": "driveItemId",

"value": YOUR_FOLDER_URI"

}];

cg.initialNavigationValue = {

location: folderIdentifier,

locationContextPath: locationContextPath,

};

});

Note that if you want to include a <sas-content-tree>, you will also need the URIs of each parent folder as entry in the list locationContextPath.

Option 3: Copy link to persistent locations

Alternatively, if you wish to navigate through persistent locations (the My Folder, Favorites folder, SAS Content or the Recycle Bin), you can still use the same HTML for the body:

<sas-content-group id="cg">

<sas-content-breadcrumb id="cb"></sas-content-breadcrumb>

<sas-content-tree id="ct"></sas-content-tree>

<sas-content-locations id="cl"></sas-content-locations>

<sas-content-area id="ca" selection-mode="single" hide-breadcrumb="true"

initial-hidden-columns="dateCreated,createdBy,modifiedBy"></sas-content-area>

</sas-content-group>

Then, adapt the following code and paste it in the <script> tag inside of <body>:

window.addEventListener('contentSdkComponents.loaded', () => {

const cg = document.getElementById('cg');

const myFolderIdentifier = {

type: "persistentLocation",

value: "myFolder"

};

const favoritesIdentifier = {

type: "persistentLocation",

value: "favorites",

preventExpansion: true

};

const sasContentIdentifier = {

type: "persistentLocation",

value: "root"

};

const recycleBinIdentifier = {

type: "persistentLocation",

value: "trash",

preventExpansion: true

};

cg.initialNavigationValue = {

location: sasContentIdentifier,

locationContextPath: [sasContentIdentifier],

locations: [sasContentIdentifier, myFolderIdentifier, favoritesIdentifier, recycleBinIdentifier]

};

});

Note the locations key in the dictionary cg.initialNavigationValue defines which locations will be displayed in the <sas-content-tree> or <sas-content-locations> elements. Feel free to adapt the code above by deleting items as necessary. Note you can choose to display a combination of persistent locations and specific folders.

Configuring SAS Viya to support SAS Viya SDK

To configure SAS Viya, log in to SAS Environment Manager using an account with administrative privileges. Then click on Configuration, view Definitions and search for the configuration you want (described below) and click on Edit or New configuration on the right:

We need to make the following configurations in SAS Environment Manager to allow for the SAS Viya environment to be able to communicate with the web page. I did this on a test environment. Ensure you understand the security risks before making these configuration changes:

Enable Cross-Origin Resource Sharing (CORS)
- Edit the allowOrigins property in commons.web.security.cors to include your web server (https://localhost:3000 if using Five Server, otherwise the link to your web server)
- Additional information can be found here: Configure Cross-Origin Resource Sharing for SAS Viya for REST API’s an... - SAS Support Communities
Whitelist domains in Cross-Site Request Forgery (CSRF)
- Set the allowedUris property in commons.web.security.csrf.allowedUris to include your web server (https://localhost:3000 if using Five Server, otherwise the link to your web server)
Enable Cross-Site cookies
- Set the sameSite property in commons.web.security.cookies to None.
Enable Transport-Layer Security to access SAS Viya using HTTPS
If embedding jobs in an iFrame: enable x-frame-options-enabled option in sas.commons.web.security
- The content-security-policy option in commons.web.security needs to include the frame-ancestors heading as follows: frame-ancestors 'self' https://localhost:3000, if using Five Server, else point to the web server.
Optional: allow guest access
- Click on enabled in the logon.provider.guest configuration. This allows users to browse SAS Content without logging on.

See Getting started · SAS® Content SDK and getSASJobExecutionUrl · SAS® Content SDK for detailed steps.

Conclusion

Once you are done, save the HTML file, right-click it and select open with Five Server. And you are good to go! Here, I added some Bootstrap to make it look nicer:

There are even more possibilities! You can choose to display only certain items (for example, only Visual Analytics reports or only jobs), display them on the same page, prevent expanding specific folders in the <sas-content-tree>, or allow multiple selections. Read the guide or the API Reference for more information. There are also two examples in the sassoftware/sas-viya-sdk-js Github repository. If you want to build a complete Viya web application using ReactJS, refer to this series.

Find more articles from SAS Global Enablement and Learning here.