In VA 8.x, you can accomplish this with Data Driven Content javascript code. Here is an example of using the existing VA web server to store your images. I am storing my code and images in the same location: /opt/sas/viya/home/var/www/html/htmlcommons. The URL for that would be http://<your VA server>/htmlcommons. I am using a table called Cars that is located within base SAS as sashelp.cars. I imported that table into CAS.
Result:
1. include Honda.jpg in htmlcommons location
2. . include Data Driven Content code to htmlcommons location. (Add code at the bottom into a file called Dynamic.html)
(note: The code assumes that your image is located in the same location as Dynamic.html so it is referencing: ./Honda.jpg etc
4. In VA, on the Data Driven Content Object properties, add your url to your Data Driven Content object.
http://<your VA server>/htmlcommons/Dynamic.html.
5. Also click on the Source tab and add the data item Make.
5. I set an Action from the List Table to the DDC object so when I click on Honda, "Honda" is passed in the form of a json file to the Data Driven Content object
Code Author: Renato Luppi @ SAS
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
html {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body {
max-width: 90%;
max-height: 90%;
}
img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div id="sample"></div>
<script>
// ***************
//INITIAL FUNCTION
// IE9+ browser support
if (window.addEventListener) {
// Event for standard browsers
window.addEventListener("message", onMessage, false);
} // IE9+ browser support
// Window support for IE8
else {
// Event for older browsers
window.attachEvent("onmessage", onMessage);
} // Window support for IE8
// onMessage function for processing incoming information
function onMessage (evt) {
// check that the conditions are met
if (evt && evt.data) {
// Variables
var results = null;
var columnInfo = null;
// get the data name
self.resultName = evt.data.resultName;
// Check for records
if (evt.data.availableRowCount >= 0) {
// Variables are assigned
results = evt.data;
columnInfo = evt.data.columns;
// build the table
jsonToTable(columnInfo, results.data);
} // Check for records
} // verify that the conditions are met
} // onMessage function for processing incoming information
// jsonToTable function to create the table and process the information
function jsonToTable (columnInfo, jsonData) {
// Variable and DOOM cleaning
var tableDiv = document.getElementById("sample");
tableDiv.innerHTML = "";
// Create table
var table = tableDiv.appendChild(document.createElement('table'));
var tableBody = table.appendChild(document.createElement('tbody'));
// check for records
if (jsonData) {
// scroll through the data
for (var i = 0; i < jsonData.length; i++) {
// I add a new line
addDataRow(jsonData[i]);
} // scroll through the data
} // check for records
// addDataRow function to add records to the table
function addDataRow (dataFields) {
// create line
var tr = document.createElement('tr');
// Iteration of the fields to add them to the row
dataFields.forEach(function (field, index) {
// verify that field is other than absent
if (field != '(ausente)') {
// A picture element is created and assigned a value of
var img = document.createElement('img');
field = './' + field + '.jpg';
img.src=field;
// The image is added to the line
tr.appendChild(img)
} // verify that field is other than absent
}); //Iteration of the fields to add them to the row
// The line is added to the table
tableBody.appendChild(tr);
} // addDataRow function to add records to the table
} // jsonToTable function to create the table and process the information
</script>
</body>
</html>
Keith Myers
SAS Tech Support
See how to use one filter for multiple data sources by mapping your data from SAS’ Alexandria McCall.
Find more tutorials on the SAS Users YouTube channel.
-
976 views
-
0 likes
-
-
