How to modify Edit Configs for a component in Authoring UI

[brett_birschbac]

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.

[smacdonald2008]

 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]

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.

[brett_birschbac]

@smacdonald2008 were you able to track down anyone that knows how to edit the configs printed into the page for a component?

[leonel_]

Hi, @smacdonald2008 I'm also interested in knowing where is this <cq data-config> element created and added, also if there's a way to extend it