Page Asset Custom Field

page-asset-select.vtl

#if(!$UtilMethods.isSet($customPageAssetFieldVar))
  #set($customPageAssetFieldVar = 'pageAsset')
#end
#if(!$UtilMethods.isSet($pageUrlDummyField))
  #set($pageUrlDummyField = 'pageUrl')
#end
#set($pageAssetValue  = $context.get($customPageAssetFieldVar))
#if(!$UtilMethods.isSet($hostId))
  #set($hostId          = $host.identifier)
#end
#if(!$UtilMethods.isSet($hostName))
  #set($hostName        = $host.hostname)
#end
#set($basePageAssetQuery = "+contentType:htmlpageasset +conhost:${hostId}")##
#set($pageAssets  = $dotcontent.pull($basePageAssetQuery, 0, "htmlpageasset.title"))##
## CSS
<style>
${esc.h}widget_${customPageAssetFieldVar}-selector.page-select {
  background: rgba(100,210,200,0.5);
  color: black;
}
${esc.h}widget_${customPageAssetFieldVar}-selector_dropdown .dijitMenuItem {
  padding: 0;
}
.page-asset-color {
  background-color: rgba(100,210,200,0.5);
  color: black;
  display: block;
  padding: 2px 5px;
  border-bottom: 1px solid white;
}
</style>
## Render Field
<input id="${customPageAssetFieldVar}-selector" />
## Programmatic Generation of Filtering Select, via @https://dojotoolkit.org/reference-guide/1.10/dijit/form/FilteringSelect.html
<script>
require([
  "dojo/dom",
  "dojo/query",
  "dojo/store/Memory",
  "dijit/form/FilteringSelect",
  "dojo/domReady!"
], function customDojo(dom, query, Memory, FilteringSelect){

    // Hide some tags
    dojo.byId("${pageUrlDummyField}_tag").hide();
    dojo.byId("${pageUrlDummyField}_field").hide();

    // Config data for dropdown
    var ${customPageAssetFieldVar}Memory = new Memory({
      data: [
      { id:"", name:"Select (${hostName})", label:"<span class='page-asset-color'>--- Select Page</span>" },
      #foreach($pageAsset in $pageAssets)##
        { id:"${pageAsset.identifier}", name:"${pageAsset.url}", label:"<span class='page-asset-color'>${pageAsset.title} - ${pageAsset.url}</span>" },
        #if($context.get($customPageAssetFieldVar).equals($pageAsset.identifier))
          #set($pageAssetValue = $pageAsset.identifier)
        #end
      #end
    ]});

    // Function to update custom fields
    function updateCustomFields(e){
      var pageUrl = dojo.byId("${customPageAssetFieldVar}-selector").value;
      var pageId = dijit.byId("${customPageAssetFieldVar}-selector").getValue();
      var dummyUrlField = dojo.byId("${pageUrlDummyField}");
      dojo.byId("${customPageAssetFieldVar}").value = pageId;
      if (dummyUrlField != null) {
        dummyUrlField.value = pageUrl;
      }
    }

    // Config for filtering select
    var pageFilteringSelect = new FilteringSelect({
      id: "${customPageAssetFieldVar}-selector",
      name: "${customPageAssetFieldVar}-selector",
      class: "page-select",
      autoComplete: true,
      placeholder: "Select (${hostName})",
      required: false,
      value: "${pageAssetValue}",
      store: ${customPageAssetFieldVar}Memory,
      searchAttr: "name",
      labelAttr: "label",
      labelType: "html",
      onChange: updateCustomFields

    }, dom.byId("${customPageAssetFieldVar}-selector")).startup();

    // Populate the custom fields on load
    setTimeout(function customFieldTimer() {
      updateCustomFields();
    }, 200);

});
</script>