Disable/enable a custom button in dialog form on clicking lock/unlock to allow/remove inheritence on live copies

[avni27]

We have two requirements -

1. There is a custom button added to the authoring dialog to fetch details to autofill the rest of the form for some details. It looks like this:

This button is in enabled state in Live copies when inheritance is enabled. We want to have it in disabled state when inheritance is allowed and when cancelled it is enabled again.

2. Another requirement is to remove the 'Add field' option for multifield for this component only. 

AEM version is 5.6.1. Any help or suggestions in these two points will be highly appreciated.

@kautuk_sahni @VeenaVikraman @vanegi @Ravi_Pampana @arunpatidar @Ankur_Khare @Gaurav-Behl 

[Gaurav-Behl · Accepted solution]

Hi @avni27 

Sorry, its been a while with EXTJS and Classic UI features but the underlying principles are same. I'd still try to share some pointers.

Did you try to investigate what happens when you disable the inheritance on a module? It will add/update "jcr:mixin" property with "cq:LiveSyncCancelled" and probably a couple of more properties. Similarly, if you enable inheritance the same property values would flip. Once you have nailed down the properties to listen at a component (or page) level, then its just a matter of writing a custom js and disabling the "Fetch" button.

In TouchUI, you'd use write the code within 

$(document).on("foundation-contentloaded", function () {...} but in EXTJS, I think it was 

 CQ.Ext.onReady(function () {...}

If you already have the functionality of "Fetch" button up & running, then you just need to follow the same pattern. 

Now disabling 'Add field' would be another level of complexity to manipulate multifield but try out the same way. It might end up being a dirty hack hence assess the LOE otherwise redesign this module and split the features.

Check this http://experience-aem.blogspot.com/2013/08/in-blog-experiencing-adobe-experience.html or http://www.sgaemsolutions.com/ or Arun's GITHUB. You'll definitely find great examples of EXTJS customization.

Hope it helps!

Thanks

[kautuk_sahni]

@Gaurav-Behl Good to see you back in action. 

[avni27]

Thanks @Gaurav-Behl , 

I analyzed the implementation on Inheritance(lock icon) enabled/disabled behavior, the AEM 'CQ.Util.findFormFields' method provided form input fields only of the dialog and the 'fetch' custom button in our case was not considered as a form input field. This was the reason it was not changing to disabled state. We have customized 'Fetch' listener for now for this.

To remove add field, we have overridden the multifield JS file filtering with sling:resourceType condition, if it was this component then we skipped adding the 'Add field' option.