BookmarkSubscribeRSS Feed
Calcite | Level 5

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!

SAS Employee

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  I imported that table into CAS.


Result:  results.JPG


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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

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%;




<div id="sample"></div>

// ***************


// 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 && {

// Variables

var results = null;

var columnInfo = null;

// get the data name

self.resultName =;

// Check for records

if ( >= 0) {

// Variables are assigned

results =;

columnInfo =;

// build the table


} // 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


} // 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';

// The image is added to the line


} // verify that field is other than absent


}); //Iteration of the fields to add them to the row

// The line is added to the table


} // addDataRow function to add records to the table

} // jsonToTable function to create the table and process the information







Keith Myers

SAS Tech Support



Available on demand!

Missed SAS Innovate Las Vegas? Watch all the action for free! View the keynotes, general sessions and 22 breakouts on demand.


Register now!

Tips for filtering data sources in SAS Visual Analytics

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.

Discussion stats
  • 1 reply
  • 2 in conversation