Difference between revisions of "Template Displays"

From dataZoa Wiki
Jump to: navigation, search
(Created page with "<div class="imgGlyph24 imgConcept"></div> Rather than making a set of Displays that are identical in except for the data they contain, you can implement a template mechan...")
 
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<div class="imgGlyph24 imgConcept"></div>&nbsp;Rather than making a set of Displays that are identical in except for the data they contain, you can implement a template mechanism to pop different data sets into the display dynamically (typically from a drop down list of data choices).  
+
<div class="imgGlyph24 imgIdea"></div>&nbsp;Rather than making a set of Displays that are identical in except for the data they contain, you can implement a template mechanism to pop different data sets into the display dynamically (typically from a drop down list of data choices). For example, you might want to show the same 7 employment categories for 10 different MSAs, and rather than a different display for each MSA, a single template will let you select an MSA from a drop down list and see it swapped in. 
 +
<br>
 +
<div class="imgGlyph24 imgNote"></div>&nbsp;Skills required for this technique:
 +
* HTML
 +
* Javascript
 +
* dataZoa Grouplists
  
−
<div class="imgGlyph24 imgConcept"></div>&nbsp;Template displays are when a dataZoa Display is designed somewhat generically (typically with regards to row labels) and for which the datasets used is swapped at display time. This is accomplished by providing a target dataset to use in the form of a GroupList name within the same account and via the glname argument of the embedded display's src attribute.
 
 
<br>
 
<br>
 
Templates work with any display type, but in this discussion we will just refer to a dataZoa Table Display.
 
Templates work with any display type, but in this discussion we will just refer to a dataZoa Table Display.
 +
<div class="imgGlyph24 imgConcept"></div>&nbsp;Templating of displays combines three concepts:
 +
* Make several dataZoa Grouplists that contain conceptually and structurally similar data that vary in one particular aspect.  For example, you might make 10 Grouplists of the same 7 employment statistics for different MSAs. 
 +
* Build a Table in the usual way using one the Grouplists.
 +
* Embed the Table on your webpage in the usual way.
 +
* Implement an HTML <nowiki><select></nowiki> (aka "drop down") list with options for each of the geographies that have the corresponding Grouplist as their values.
 +
* Add the Javascript <i>UpdateFrame</i> function below to your webpage.
 +
* Add an "onchange" function to the <nowiki><select></nowiki> that will call UpdateFrame as described in its comments <br>
 
<br>
 
<br>
−
To begin, make a table specifically for your app which contains all the data needed and then use AJAX to fetch it.
 
 
<br>
 
<br>
 +
 +
<nowiki>
 +
<script type="text/javascript">
 +
function UpdateFrame(A_IFrameID, A_InputID)
 +
  {
 +
// Get iFrame from ID (or optional index) and it's source then get Input from ID (pulling current option from select). //
 +
var L_IFrame = ((typeof A_IFrameID == "number") && (A_IFrameID >= 0)) ? document.getElementsByTagName("iframe")[A_IFrameID] || null : ((typeof A_IFrameID !== "undefined") && A_IFrameID.length) ? document.getElementById(A_IFrameID) || null : null;
 +
var L_IFrameSrc = (L_IFrame != null) ? L_IFrame.getAttribute("src") || "" : "";
 +
var L_Input = ((typeof A_InputID !== "undefined") && A_InputID.length) ? document.getElementById(A_InputID) || null : null;
 +
if ((L_Input != null) && (L_Input.type.toUpperCase().indexOf("SELECT") != -1)) { L_Input = L_Input.options[L_Input.selectedIndex] || null; }
 +
if ((L_IFrame == null) || !L_IFrameSrc.length || (L_Input == null)) { return; } // Exit if any requirement is missing. //
 +
 +
var L_Args = ["glname", "alttitle", "xsectdate", "altextsrc"]; // All source arguments to pull from input (as meta data with "data-" prefix). //
 +
for (var i=0; i<L_Args.length; i++)
 +
  {
 +
var L_EscapedArgValue = "=" + escape(L_Input.getAttribute("data-"+L_Args[i]) || "").replace(/\+/g, "%2B"); // Fetch current arg and URL escape it. //
 +
// Replace or add current arg as appropriate (two possible add options). //
 +
if (new RegExp("[&?]"+L_Args[i]+"=?", "gi").test(L_IFrameSrc)) { L_IFrameSrc = L_IFrameSrc.replace(new RegExp("([&?]"+L_Args[i]+")(=[^&]*|=?$)", "gi"), "$1"+L_EscapedArgValue); }
 +
else if (L_IFrameSrc.indexOf("?") < 0) { L_IFrameSrc = L_IFrameSrc + "?" + L_Args[i] + L_EscapedArgValue; }
 +
else { L_IFrameSrc = L_IFrameSrc + "&" + L_Args[i] + L_EscapedArgValue; }
 +
  }
 +
L_IFrame.setAttribute("src", L_IFrameSrc); // Update iFrame with modified soruce to refresh. //
 +
return;
 +
  }
 +
</script>
 +
 +
</nowiki>
 
<br>
 
<br>
−
<div class="imgGlyph24 imgConcept"></div>&nbsp;Some Advantges:
+
Some real-world examples:
−
* You can mark the row (series) labels to easily identify their data
+
* https://lmi.delawareworks.com/Content/Information/LAUS.php
−
* Label [[Label_Knockouts|knockouts]] are available
+
 
−
* Just one fetch for multiple series
+
−
* The displays are server-cached for speed
+
−
* A GroupList parameter (<i>glname=...</i> on a table gives access to multiple datasets
+
−
* A LatestValues display gives you current values, prior values and/or (%) changes
+
−
<br>
+
−
<div class="imgGlyph24 imgNote"></div>&nbsp;Remember:
+
−
* Use jQuery (or similar library) to parse the structured classes in the display and get the data values
+
−
* There is a limit of 50 points of historical data per series for tables.
+
 
<br>
 
<br>
 
[[Category:Advanced]][[Category:Displays]][[Category:Publishing]][[Category:Developers]][[Category:API]]
 
[[Category:Advanced]][[Category:Displays]][[Category:Publishing]][[Category:Developers]][[Category:API]]

Latest revision as of 09:32, 16 January 2020

 Rather than making a set of Displays that are identical in except for the data they contain, you can implement a template mechanism to pop different data sets into the display dynamically (typically from a drop down list of data choices). For example, you might want to show the same 7 employment categories for 10 different MSAs, and rather than a different display for each MSA, a single template will let you select an MSA from a drop down list and see it swapped in.


 Skills required for this technique:
  • HTML
  • Javascript
  • dataZoa Grouplists


Templates work with any display type, but in this discussion we will just refer to a dataZoa Table Display.

 Templating of displays combines three concepts:
  • Make several dataZoa Grouplists that contain conceptually and structurally similar data that vary in one particular aspect. For example, you might make 10 Grouplists of the same 7 employment statistics for different MSAs.
  • Build a Table in the usual way using one the Grouplists.
  • Embed the Table on your webpage in the usual way.
  • Implement an HTML <select> (aka "drop down") list with options for each of the geographies that have the corresponding Grouplist as their values.
  • Add the Javascript UpdateFrame function below to your webpage.
  • Add an "onchange" function to the <select> that will call UpdateFrame as described in its comments 



<script type="text/javascript">
function UpdateFrame(A_IFrameID, A_InputID)
  {
	// Get iFrame from ID (or optional index) and it's source then get Input from ID (pulling current option from select). //
	var L_IFrame = ((typeof A_IFrameID == "number") && (A_IFrameID >= 0)) ? document.getElementsByTagName("iframe")[A_IFrameID] || null : ((typeof A_IFrameID !== "undefined") && A_IFrameID.length) ? document.getElementById(A_IFrameID) || null : null;
	var L_IFrameSrc = (L_IFrame != null) ? L_IFrame.getAttribute("src") || "" : "";
	var L_Input = ((typeof A_InputID !== "undefined") && A_InputID.length) ? document.getElementById(A_InputID) || null : null;
	if ((L_Input != null) && (L_Input.type.toUpperCase().indexOf("SELECT") != -1)) { L_Input = L_Input.options[L_Input.selectedIndex] || null; }
	if ((L_IFrame == null) || !L_IFrameSrc.length || (L_Input == null)) { return; }		// Exit if any requirement is missing. //
	
	var L_Args = ["glname", "alttitle", "xsectdate", "altextsrc"];	// All source arguments to pull from input (as meta data with "data-" prefix). //
	for (var i=0; i<L_Args.length; i++)
	  {
		var L_EscapedArgValue = "=" + escape(L_Input.getAttribute("data-"+L_Args[i]) || "").replace(/\+/g, "%2B");	// Fetch current arg and URL escape it. //
		// Replace or add current arg as appropriate (two possible add options). //
		if (new RegExp("[&?]"+L_Args[i]+"=?", "gi").test(L_IFrameSrc)) { L_IFrameSrc = L_IFrameSrc.replace(new RegExp("([&?]"+L_Args[i]+")(=[^&]*|=?$)", "gi"), "$1"+L_EscapedArgValue); }
		else if (L_IFrameSrc.indexOf("?") < 0) { L_IFrameSrc = L_IFrameSrc + "?" + L_Args[i] + L_EscapedArgValue; }
		else { L_IFrameSrc = L_IFrameSrc + "&" + L_Args[i] + L_EscapedArgValue; }
	  }
	L_IFrame.setAttribute("src", L_IFrameSrc);	// Update iFrame with modified soruce to refresh. //
	return;
  }
</script>


Some real-world examples:


Retrieved from "https://docwiki.datazoa.com/index.php?title=Template_Displays&oldid=4151"