How to modify Edit Configs for a component in Authoring UI | Community
Skip to main content
brett_birschbac
brett_birschbac
Level 2
October 6, 2016

How to modify Edit Configs for a component in Authoring UI

  • October 6, 2016
  • 1 reply
  • 3673 views

Is there a way for me to augment the component edit configs printed to the HTML behind the scenes for the authoring UI.  The configs I'm talking about look like this in the Touch UI:

<cq data-path="/content/mysite/mypage/jcr:content/main-par/mycomponent" data-config="{"path":"/content/mysite/mypage/jcr:content/main-par/mycomponent","slingPath":"/content/mysite/mypage/jcr:content/main-par/mycomponent.html","dialog":"/apps/mysite/components/content/mycomponent/cq:dialog","dialogLoadingMode":"auto","dialogLayout":"auto","dialogSrc":"/apps/mysite/components/content/mycomponent/_cq_dialog.html/content/mysite/mypage/jcr:content/main-par/mycomponent","dialogClassic":"/apps/mysite/components/content/mycomponent/dialog","type":"mysite/components/content/mycomponent","csp":"freeform|basepage|page/main-par|responsivegrid/mycomponent"}">

and like this in the Classic UI:

<script> CQ.WCM.edit({"path":"/content/mysite/mypage/jcr:content/main-par/mycomponent","dialog":"/apps/mysite/components/content/mycomponent/dialog","type":"mysite/components/content/mycomponent","csp":"freeform|basepage|page/main-par|responsivegrid/mycomponent"}); </script>

What I'm looking to do is update the "data-config" value particularly in the Touch UI, adding extra values that I can then read from JavaScript similar to how "dialogSrc" can be read with `editable.config.dialogSrc` in JS.

My use case is I'm adding global support for a custom dialog based on presence of a new configuration file, and I would like to add something like a "dialogCustomSrc" value that the JS can key off of to know if the custom dialog is available for a given component.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

smacdonald2008
smacdonald2008
Level 10
October 6, 2016

 I am not too clear about this. You want your JS to read from a new config file? I am checking with other ppl on this. I have never heard of this use case. 

brett_birschbac
brett_birschbacAuthor
Level 2
October 6, 2016

For context see https://github.com/Adobe-Consulting-Services/acs-aem-commons/pull/738

The code that adds the custom button to the authoring toolbar is basically this:

(function ($, ns, channel, window, undefined) { var actionDef = { icon: 'coral-Icon--globe', text: Granite.I18n.get('Configure Custom Component Properties'), handler: function (editable, param, target) { // Open the custom dialog }, condition: function(editable) { return editable.config.dialogCustomSrc != null; }, isNonMulti: true }; channel.on('cq-layer-activated', function (ev) { if (ev.layer === 'Edit') { ns.EditorFrame.editableToolbar.registerAction('CUSTOM-COMPONENT-PROPS', actionDef); } }); }(jQuery, Granite.author, jQuery(document), this));

`editable.config` is something that is being set in the bowels of granite UI, and already has values like `editable.config.dialog` and `editable.config.dialogClassic` so my assumption is that `editable.config` is being read directly from the data-config attribute of the `<cq>` element rendered into the HTML.  As such, I'm looking to add a `dialogCustomSrc` attribute to that data-config JSON so that I can then access `editable.config.dialogCustomSrc` in my javascript.

Terms & ConditionsAccessibility statement

Loading footer...