Deploy DDC Implementation Files in SAS Content Server via SAS Viya GUIs
If you have read my blogs about Data-Driven Content (DDC), you might remember that in one of the introductory blogs I presented two options for deploying the DDC implementation code, which is basically an HTML file. The first and probably the most obvious option is to deploy that HTML file in a Web Server:
The problem with deploying the DDC HTML file in a Web Server is that DDC authors may not have write access to the Web Server document folder, and they would need help from IT to make it happen, not to mention eventual enterprise security policies that may make this process a bit painful and slow, if even possible. Considering that the process of deploying the file for testing may be repeated several times during the development cycle of a DDC, it makes the overall DDC development experience even worse. Also, if your SAS Viya is deployed on Kubernetes, this extra layer may add complexities for deploying DDC implementation files in your SAS Viya environment.
The other option I presented was to use SAS Job Execution Web Application to host the DDC HTML file as a SAS Job form. In that case, the DDC author can leverage the application interface to edit the DDC HTML file (or Job form). Report authors can refer to the DDC via URL that points to the SAS Job, which must be configured to launch its associated form (the DDC) by default:
02-DDC deployment using SAS Job Execution web app
It all worked well at that time because our DDC code was simple enough so all the code could be in a single HTML file, but if your DDC implementation requires additional supporting files such as CSS, JavaScript, or image files, then you need to be able to easily deploy those files, ideally in a self-service fashion, similar to what you can do with the DDC HTML file via SAS Job Execution Web Application.
To help you focus on deploying the CSS, JavaScript, and image files, you will be using a very simple HTML that leverages all of those file types and generates a static banner like this:
03-Sample DDC output
The HTML file is called MyDDC.html. It has a <div> with an image of the earth inside of it. The image comes from a file called MyImage.png. Both the <div> and the <img> elements use classes defined in an external CSS file called MyStyles.css. The class “redbox” is applied to the <div> and it basically sets the reddish background, the white font color, and other minor style attributes. The class “imgicon” just resizes the image to a fixed size. The “Hello World!” text is programmatically inserted in the <div> by calling a JavaScript function that is defined in the external file called MyCode.js.
Here are the text files you are going to start with, as if you would deploy them in a Web Server:
MyDDC.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./MyStyles.css">
<script src="./MyCode.js"></script>
</head>
<body>
<div class="redbox" id="JobResults">
<img class="imgicon" src="./MyImage.png" >
</div>
<script>
addH1toDiv("JobResults", "Hello World!");
</script>
</body>
</html>
MyStyles.css
.redbox {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
.imgicon {
width: 150px;
height: 150px;
}
MyCode.js
function addH1toDiv(divId, text)
{
var h = document.createElement("H1");
var t = document.createTextNode(text);
h.appendChild(t);
var d = document.getElementById(divId);
d.appendChild(h);
}
MyImage.png
04-MyImage.jpg
Our goal is to store all files used in this example: MyDDC.html, MyStyles.css, MyCode.js, and MyImage.png in SAS Content Server, so any user developing the DDC can upload and maintain those files, without having to rely on other users for deploying those files and making them available where they can be accessed by report authors. In this example, we will be storing all files in “/SAS Content/Public/Jobs/SAS Communities” folder. If you want to follow along, please create this folder if it doesn’t exist.
Deploy MyDDC.html
Deploying MyDDC.html as a SAS Job HTML form was already explained here in the section called “A Bit More on SAS Job Execution Web Application and SAS Jobs”, and the process is the same for SAS Viya 3.5 and above. Essentially, you will need to:
- Create a SAS Job
- Create an associated job form
- Edit the job’s properties to set the _action parameter to FORM
Setting the SAS job parameter _action to the value FORM (not case sensitive) is what transfers the execution of the SAS Job to the HTML form, which is the DDC in our case, whenever the SAS Job is called. In other words, an URL to http(s)://<your.host.name><:optional_port_number>/SASJobExecution/?_program=<sas_job> will actually load the DDC, because loading the form is the default action associated with the job after performing step #3 above.
To create the SAS Job, go to SAS Job Execution Web Application (http(s)://<your.host.name><:optional_port_number>/SASJobExecution), right click on folder “SAS Communities” and select “New file”.
05-Create new SAS Job menu
Fill in the information as indicated below. Notice that the file type must be “Job definition”:
06-New SAS Job settings
To create the job form, right click on the job that was just created, select “Edit” and then “New HTML form”:
07-New SAS Job form
You will make changes to the HTML form later, but for now, you can copy and paste the provided DDC HTML code and save it:
08-DDC HTML code as SAS Job form
Lastly, right click on the SAS Job and select “Properties”, then “Parameters” to add the _action parameter with the default value FORM:
09-SAS Job parameters
Deploy MyImage.png
Images can be loaded via SAS Drive and the process is the same for SAS Viya 3.5 and above. Assuming the image file is saved in your local machine, these are the steps you would need to perform:
- Go to SAS Drive (top left menu, option “Share and Collaborate”)
- In the “All” tab, navigate to “/SAS Content/Public/Jobs/SAS Communities” (you should see the MyDDC job created in the previous section there)
- Right click and choose to upload files
- Select and load the image file MyImage.png
10-Uploading the image via SAS Drive
Deploy MyStyles.css and MyCode.js
The proposed solution for deploying CSS and JS files is different for SAS Viya 3.5 compared to releases above that. For Viya 3.5, the steps are similar to what you just did for the image: you basically upload CSS and JS files in the desired folder using SAS Drive.
For Viya releases above 3.5, you can still use SAS Drive to upload the files, but there is a disadvantage: files uploaded with SAS Drive cannot be edited, so if you need to make changes, you must do so in an external text editor and upload the files again in SAS Drive, to overwrite the existing files. If you use SAS Viya text editors available in SAS Studio or SAS Job Execution Web Application, the edited file will no longer be recognized as a CSS or JS file and you will have MIME type errors when running the DDC.
Viya releases above 3.5 offer a better way for deploying CSS and JS files, via SAS Job Execution Web Application. In SAS Job Execution Web Application, instead of creating a SAS Job (“Job definition” as file type), you will set the file type as “Text file” and then select the appropriate Content (CSS or JavaScript). Like it was done before with the HTML file, create the CSS and the JS text files in SAS Job Execution Web Application and just copy and paste the CSS and JS content into the just created text files and save them:
11-Uploading the CSS file via SAS Job Execution web app
12-Uploading the JS file via SAS Job Execution web app
Independently of how you deployed your files (SAS Drive or SAS Job Execution Web Application) and which SAS Viya version you used, you should be able to see all four files available under the “SAS Communities” folder in SAS Drive and SAS Job Execution Web Application:
13-Checking deployed files in SAS Drive
14-Checking deployed files in SAS Job Execution web app
Modify references to deployed files in MyDDC form
Now that all files are available in the SAS Content Server, you can go back to MyDDC form in SAS Job Execution Web Application and edit the location of the CSS, JS, and image files.
The way you refer to the CSS and JS files is very straight forward, independently of what interface you used to add those files (SAS Drive or SAS Job Execution Web Application):
"/SASJobExecution/?_file=</full_path/file_name>"
You can obtain the full path and file name by going to SAS Job Execution Web Application, then right click on the file and select Properties. Here is an example for the CSS file:
15-Obtaining CSS and JS full path
In our example, the reference to the CSS and JS files would be like these:
"/SASJobExecution/?_file=/Public/Jobs/SAS Communities/MyStyle.css"
"/SASJobExecution/?_file=/Public/Jobs/SAS Communities/MyCode.js"
For the image you will need its URI to create a reference like this:
"<file_URI>/content?changeContentDisposition=true"
In SAS Drive, you can get the image URI by selecting the image and checking its details:
16-Obtaining image URI in SAS Drive
You can also obtain the image’s URI in SAS Job Execution Web App. Just right click the image and select Properties then Details:
17-Obtaining image URI in SAS Job Execution web app
In our example, the reference to the image then becomes something like this:
"/files/files/312cfe42-1d00-41f2-9ba9-dc0c349bb545/content?changeContentDisposition=true"
The final modified DDC HTML code would look like this (your image URI will be different than mine):
18-Final DDC code
These are the diagrams with all files deployed in the SAS Content Server and the interfaces you most likely are going to use to manage those files, depending on your SAS Viya version:
SAS Viya 3.5 and above:
19-Sample files and interfaces used for deployment in SAS Viya 3.5 and above
Above SAS Viya 3.5 (preferred):
20-Sample files and preferred interfaces used for deployment beyond SAS Viya 3.5
Testing
To wrap up, you can test the DDC by adding it to a SAS Visual Analytics report. The DDC URL would look like this:
https:// <your.host.name><:optional_port_number>/SASJobExecution?_program=/Public/Jobs/SAS Communities/MyDDC
This DDC example doesn’t take any data as input, but you still need to assign at least one data item to the DDC Roles pane because the DDC object in Visual Analytics requires it:
21-Testing the DDC in SAS Visual Analytics
Because this DDC example doesn’t need any data from Visual Analytics, you can also test it by submitting the job in SAS Job Execution Web App:
22-Testing the DDC in SAS Job Execution web app
Conclusion
Developing DDC solutions to be leveraged in SAS Visual Analytics reports goes beyond just developing the content (HTML, CSS, JS). All that content, including images, needs to be deployed somewhere that other users, such are report authors, can refer to them. Unfortunately, deploying web content in Web Servers, especially in production, may not be an option for DDC developers. This blog explored how interfaces provided by SAS Viya can be used to deploy DDC content and make it available to others, without having to rely on anybody else for these tasks. This gives DDC developers a self-service environment to create, test, and maintain all their DDC assets, by just leveraging the tools they have access to and are already familiar with.
Hello @Renato_sas, I was trying to replicate this same thing in SASJobExecution, it looks to me that css ran successfully but javascript code is not getting executed, although i tried calling it from head as well as body
Yes @Renato_sas, I first selected as a text file then javascript just the same as css, anyways this issue I have solved there was csp related issue but when now when I try to test the url by providing base_url/SASJobExecution/?_program=/public/jobs/SAS%20Communities/MYDCC2 I get error like
I am able to see the same job/form in job execution but giving me this error message, also I checked console but don't have any error in it
