Dynamic Images by Users Selections

kcwtech — Tue, 23 Mar 2021 02:32:39 GMT

If I would like to allow users to change the images in the dashboard dynamically based on their selections in the drop down boxes, is there any way we could do this with using SAS VA 8.3.1? Many Thanks!

Re: Dynamic Images by Users Selections

KeithM — Fri, 26 Mar 2021 21:14:29 GMT

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

topic Re: Dynamic Images by Users Selections in SAS Visual Analytics

Dynamic Images by Users Selections

Re: Dynamic Images by Users Selections