After going through the fist two articles of this series, you should have all the basics covered to support rendering dynamic Web pages and dynamic images in SAS Visual Analytics via Data-Driven Content objects. The intent of this last article is to combine dynamic images and Web pages in one single DDC.
The solution is really a combination of what you saw before and you can leverage any of the two methods of passing informaton to the DDC: using parameters or using actions to filter the data that is passed to the DDC. For simplicity, only action filters will be explored here.
You will need the same input table containing animal names and image file names that was used previously. The idea is not to have the image and the Web page displayed at once. Instead, you will do it in phases. When you select an animal name, its image gets displayed, and only when you click on the image, the Wikipedia page for that animal gets displayed. A practical application of this is to allow an image to link to a dynamic content, where the content that you link to depends on the state of your Visual Analytics report and the selections you have made. The fact that you will be changing the image as well is just a bonus.
As always, this DDC example is available in GitHub, under samples/DynamicWebPagesAndImages. There you will find the following:
This is what you need for this example in SAS Visual Analytics:
Settings:
When you select the animal name from the source object, it filters the data passed to the DDC, which in turn dynamically displays the image with its associated link.
This is the HTML portion of the DDC implementation:
<div>
<a id="target_url" href="" target="target_iframe"><img id="animal_img" src=""></a>
<iframe id="target_iframe" name="target_iframe" src=""></iframe>
</div>
The img tag is embedded in an a tag, allowing a click on the image to load the Web page indicated on the href attribute. Both the href and the image’s src attributes are initially empty, as they are dynamically set by JavaScript. The target attribute of the a tag points to the iframe, indicating where the Web page is to be loaded when the image is clicked. If you want the Web page to be loaded in a new browser tab, you just need to set target=”_blank”. In that case, you will not need the iframe.
This is the JavaScript code:
va.messagingUtil.setOnDataReceivedCallback(updateImageAndLink);
function updateImageAndLink(vaMsgObj)
{
if (vaMsgObj && vaMsgObj.data && vaMsgObj.rowCount === 1) {
document.getElementById("animal_img").src="./AnimalImages/"+vaMsgObj.data[0][1];
document.getElementById("target_url").href = "https://en.wikipedia.org/wiki/"+vaMsgObj.data[0][0];
document.getElementById("target_iframe").src="";
}
else {
document.getElementById("animal_img").src="";
document.getElementById("target_url").href = "";
document.getElementById("target_iframe").src="";
}
}
When the data associated with the DDC is filtered, it triggers the DDC JavaScript code to process the JSON message received from Visual Analytics by executing the callback function updateImageAndLink. If there is one and only one row of data in the message, the appropriate attributes are set, otherwise they are all reset to empty string. Observe that the src attribute of the iframe is always set to empty, even if the data is valid, because the Web page is supposed to be loaded only when the image is clicked, which is done by setting href, and every time the image changes, the currently displayed Web page needs to be removed. Setting the attribute href to empty does not remove the Web page, but setting the iframe’s src to empty does. Also, note that data[0][0] and data[0][1] correspond to the animal name and image name respectively, therefore that’s the order they need to be passed to the DDC object in the Visual Analytics report. As a final note, the code should be checking for the existence of both animal name and image name in the message before trying to access their values. This would be required in production, but for simplicity it was left out.
The full DDC implementation with styles, etc. is this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://<your.web.server.host>/github/util/messagingUtil.js"></script>
<style>
html, body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
width: 100%;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
max-height: 128px;
max-width: 100%;
}
iframe {
position: absolute;
top: 130px;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
border: none;
}
</style>
</head>
<body>
<div>
<a id="target_url" href="" target="target_iframe"><img id="dynamic_img" src=""></a>
<iframe id="target_iframe" name="target_iframe" src=""></iframe>
</div>
<script>
"use strict";
va.messagingUtil.setOnDataReceivedCallback(updateImageAndLink);
function updateImageAndLink(vaMsgObj)
{
if (vaMsgObj && vaMsgObj.data && vaMsgObj.rowCount === 1) {
document.getElementById("dynamic_img").src="./AnimalImages/"+vaMsgObj.data[0][1];
document.getElementById("target_url").href = "https://en.wikipedia.org/wiki/"+vaMsgObj.data[0][0];
document.getElementById("target_iframe").src="";
}
else {
document.getElementById("dynamic_img").src="";
document.getElementById("target_url").href = "";
document.getElementById("target_iframe").src="";
}
}
</script>
</body>
</html>
This HTML file is called ddc_DynamicImageWithLink.html in GitHub.
This ends the third and last article of the series. If you got that far, I hope you now have a good understanding of how to use DDC objects to dynamically embed images and Web pages in SAS Visual Analytics reports.
References
Learn More…
Github content is being updated. I'll let you know when it's ready.
GitHub content is ready!
Hi, after migrating to sas viya 3.5 my ddc stopped working.
I can reach a png file using the ddc and it displays correctly.
but any html that requires any of the util js files simply does not do nothing at all.
the html is found but nothing gets played back.
Please do not think that I haven't tried to solve it by involving the technical support and the remote sas admin, but no one can help me.
Do you have an idea what could be the reason for my problem?
Same question has been posted here: data driven content within VA (DDC) stopped after ... - SAS Support Communities
Please, see my comments there.
Registration is now open for SAS Innovate 2025 , our biggest and most exciting global event of the year! Join us in Orlando, FL, May 6-9.
Sign up by Dec. 31 to get the 2024 rate of just $495.
Register now!
Data Literacy is for all, even absolute beginners. Jump on board with this free e-learning and boost your career prospects.