Widget Render Handlers are built with customization in mind by keeping data and layout separated as much as possible. The data portions of a Widget Render Handler are generally Element Data and Widget Option Data.

 

Element Data

Both Local and Global Custom Element data can be accessed via “Attributes.ElementInfo.ElementData.PropertyValues”

<cfscript>
elementData = Attributes.ElementInfo.ElementData.PropertyValues;
</cfscript>

 

Widget Option Data

In CommonSpot Render Handlers the Metadata Form values can be accessed via the “Attributes.ElementInfo.RenderHandlerMetaData” data structure.  The values for the fields in the Custom Metadata form fields will be returned as a JSON string.

You can use the ‘getWidgetConfigData()’ ADF function from the Widget library component to pull out the widget options data and make it available in a standard key/value pair structure, as shown below.

<cfscript>
// Get Render Handler Metadata
rhMetadata = Attributes.ElementInfo.RenderHandlerMetaData;
// Set the Form and Field Names for Render Handler Metadata
optionsFieldName = "WidgetOptions";
// Get the widget data from the Metadata Form with a "WidgetOptions" field
widgetData = application.ADF.widgets.getWidgetConfigData(
          customMetdata = rhMetadata,
          configFieldName = optionsFieldName );
</cfscript>

The widgetData structure variable is populated with the Widget Option key/value pairs based on the Field Names:

widgetData.Title_Tag = “H2”
widgetData.Title_Color = “cswColor-dark”


Widget Option Data Field Names

In Widget Render Handlers, widget Options Data Keys are the Widget Option Field Names with spaces replaced by underscores (_).

<cfscript>
if( StructKeyExists(widgetData,"Title_Tag") )
   titleTag = TRIM(widgetData.Title_Tag);
</cfscript>

 

Widget Option Class Utility Function

The utility function buildClassValue() in the Widgets Component Library can be used to append class values together, delimited by spaces. This function will also strip out “inherit” or “none” from the returned value when they are set to be the Widget Option Value.

<cfscript>
titleColorClass = "cswBGcolor";
if( StructKeyExists(widgetData,"Title_Color") )
{
   // Append the current titleColorClass value to the Save Title_Color value
   titleColorClass = application.ADF.widgets.buildClassValue(
         classStr=titleColorClass,
         newClass=widgetData.Title_Color );
}
</cfscript>

 

Example CFML and HTML Rendered Output

Code below is based on the cfscript code snippets above.

<cfoutput>
<#titleTag# class="#titleColorClass# cswTitle">
   #items[itm].values.Title#
</#titleTag#>
</cfoutput>

 

Rendered Output:

<h2 class=”cswBGcolor cswColor-dark cswTitle”>
   {widget title text}
<h2>

 

Widget Option Data Utility Function

The utility function buildOptionData() in the ADF Widgets Component Library can be used to parse the comma delimited list of values into the keys of a data structure with a value of each set to ‘true’.

<cfscript>
autoplay = false;
infiniteloop = false;
if( StructKeyExists(widgetData, ‘Options’) )
{
   // Parse the widgetData.Options list and convert to a optionsData structure
   optionsData = application.ADF.widgets.buildOptionData(
   optionStr=widgetData.Options);
   // Set the options to TRUE if the optionsData key exists
   if( StructKeyExists(optionsData, ‘autoplay’) )
      autoplay = true;
   if( StructKeyExists(optionsData, ‘infiniteloop’) )
      infiniteloop = true;
}
</cfscript>

 

Example CFML/JavaScript Rendered Output

Code below is based on the buildOptionData() cfscript snippet above.

<cfoutput>
<script type = 'text/javascript'>
   var carousel = new carousel('.carousel-container', {
      loop: #infiniteloop#
      <cfif autoplay>
         ,autoplay: 2500
         ,autoplayDisableOnInteraction: true
      </cfif>
   });
</script>
</cfoutput>