Solved

Enable/disable check box metadata based on selection

Forum|Forum|10 years ago
October 16, 2015
9 replies
2693 views

Hi,

I have 1 custom metadata, named 'Corporate users' , it has 3 check boxes shown in the screen shot[img]checkbox.PNG[/img].

I have added 1 property, allowBlanks=false. I am planning to have 2 check box groups here. 1st group will contain , only 1 check box and next group will contain remaining 2 check boxes. My requirement is that, if I check the check box from group 1, it will disable check boxes of group2 and vice versa.

Please suggest.

Thanks,

Debal Das

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

Best answer by Mateusz_Chromin

Your problem is a typical place to make the dialog dynamic with ExtJS coding.

Firstly, for your dialog, preferably on the top level (so on the level of xtype=dialog) add plugins="yourCustomPlugin" property.

I'm assuming your checkbox is defined as:

<type jcr:primaryType="cq:Widget" fieldLabel="Corporate users" name="./corporateUsers" type="checkbox" xtype="selection"> <options jcr:primaryType="cq:WidgetCollection"> <one jcr:primaryType="nt:unstructured" text="CRM" value="crm"/> <two jcr:primaryType="nt:unstructured" text="CRMA" value="crma"/> <three jcr:primaryType="nt:unstructured" text="CQ5FDA" value="cq5fda"/> </options> </preferenceType>

Then, create JS file with following structure:

(function($) { var plugin = CQ.Ext.extend(CQ.Ext.emptyFn, { init: function(dialog) { var checkboxGroup = dialog.find('name', './corporateUsers'); //checkboxGroup contains all the checkboxes plus wrapping selection object. //you can skip first element (of index 0) //for each consecutive add on change listener checkboxItem.on('change' function(field, value) { //use setValue() function to reset other checkboxes values }); } }); CQ.Ext.ComponentMgr.registerPlugin('yourCustomPlugin', plugin); }($CQ));

Please note, that if you want to stick to the disable solution you won't be able to switch from group1 selection to group2 (and viceversa, cause the other group will be whole disabled). You might want to think about solution, where unchecking checkbox (or both two checkboxes from group 2) enables the other group.

Finally, you need to ensure that your js is fetched to the current page. The easiest way is to put it into clientlib which will be included on page load. I see, that the dialog is used inside damadmin. By default, damadmin fetches some of the following clientlibs (not sure which one, you can use both): cq.wcm.edit and cq.wcm.admin. So your clientlib should contain following property:

categories="[cq.wcm.edit,cq.wcm.admin]" />

Hope this helps, if any questions - don't hestitate to ask.
Mateusz

PS. Useful link with ExtJS API (wrapped by CQ): http://dev.day.com/docs/en/cq/current/widgets-api/index.html?class=CQ.Ext.form.Checkbox

M

Mateusz_ChrominAccepted solution

Your problem is a typical place to make the dialog dynamic with ExtJS coding.

Firstly, for your dialog, preferably on the top level (so on the level of xtype=dialog) add plugins="yourCustomPlugin" property.

I'm assuming your checkbox is defined as:

<type jcr:primaryType="cq:Widget" fieldLabel="Corporate users" name="./corporateUsers" type="checkbox" xtype="selection"> <options jcr:primaryType="cq:WidgetCollection"> <one jcr:primaryType="nt:unstructured" text="CRM" value="crm"/> <two jcr:primaryType="nt:unstructured" text="CRMA" value="crma"/> <three jcr:primaryType="nt:unstructured" text="CQ5FDA" value="cq5fda"/> </options> </preferenceType>

Then, create JS file with following structure:

(function($) { var plugin = CQ.Ext.extend(CQ.Ext.emptyFn, { init: function(dialog) { var checkboxGroup = dialog.find('name', './corporateUsers'); //checkboxGroup contains all the checkboxes plus wrapping selection object. //you can skip first element (of index 0) //for each consecutive add on change listener checkboxItem.on('change' function(field, value) { //use setValue() function to reset other checkboxes values }); } }); CQ.Ext.ComponentMgr.registerPlugin('yourCustomPlugin', plugin); }($CQ));

Please note, that if you want to stick to the disable solution you won't be able to switch from group1 selection to group2 (and viceversa, cause the other group will be whole disabled). You might want to think about solution, where unchecking checkbox (or both two checkboxes from group 2) enables the other group.

Finally, you need to ensure that your js is fetched to the current page. The easiest way is to put it into clientlib which will be included on page load. I see, that the dialog is used inside damadmin. By default, damadmin fetches some of the following clientlibs (not sure which one, you can use both): cq.wcm.edit and cq.wcm.admin. So your clientlib should contain following property:

categories="[cq.wcm.edit,cq.wcm.admin]" />

Hope this helps, if any questions - don't hestitate to ask.
Mateusz

PS. Useful link with ExtJS API (wrapped by CQ): http://dev.day.com/docs/en/cq/current/widgets-api/index.html?class=CQ.Ext.form.Checkbox

DEBAL_DASAuthor

Hi Mateusz,

Thanks for your reply. But, I have 1 query.Could you please explain how to create a dynamic dialog and

how to implement the dialog dynamic with ExtJS coding ?

Thanks,

Debal

M

Mateusz_Chromin

Debal,

Dynamic dialog from my point of view means dialog with ExtJs code attached. to make it, just follow given steps: add property plugins=... for your dialog definition (inside dialog.xml, there is node, where xtype is defined as dialog - put there plugin binding), then add your JS plugin to current site (by using clientlibs). Following the javascript snippet I pasted gives you possibility to handle dialog events.

Two JS methods you might be interested are setValue() (as mentioned) and disable()/enable().

DEBAL_DASAuthor

Mateusz,

I have created custom metadata (eg corporate usergroup) in the location- /apps/dam/content/asseteditors/application/pdf/formitems is shown in the attached screen shot[img]metadata.JPG[/img]. Could please guide me, what should be exact structure if am going to achieve enable/disable functionality through dialog.xml, clientlibs. What are the things , needs to be mentioned in dialog.xml?

Thanks,

Debal

M

Mateusz_Chromin

Oh, now I get your problem. Asseteditor even though inside is a typical dialog - it's not defined as dialog.xml, therefore there is no xtype=dialog definition.

Perhaps you can attach plugin to the formitems level, if not - for sure on the corporate users level. So add the plugins='yourCustomPluginName' property to one of those.

Regarding clientlibs - take a look at /libs/dam/clientlibs/edit clientlib. Make a mirror in the /apps branch and add there your js file with the code skeleton from the first post. Remember to update js.txt file. For detailed info about clientlibs please refer official documentation (http://dev.day.com/docs/en/cq/current/developing/clientlibs.html).

DEBAL_DASAuthor

Hi Mateusz,

I have added one more property 'plugins' to the corporate users level and created clientlibs under /apps also.

Here, clientlibs contains the js file and have updated the js.txt file as well.

. So, I need your help , regarding the customize plugin.

I am getting 1 javascript error 'init' is null or no an object due to 'plugins'.

Thanks ,

Debal

M

Mateusz_Chromin

Debal,

The error you're referring to seems, that your plugin is not available in current scope (page). Please revise scripts that are loaded to the page (using some browser inspector like firebug) and search for your custom plugin name (e.g. 'yourCustomPlugin'). I bet it won't be available. Please make sure, that your clientlib is attached to proper categories (there should be an entry of 'categories' property with value of '[cq.wcm.edit,cq.wcm.admin]')

Mateusz

DEBAL_DASAuthor

Could you please explain how we can create a custom plugin?

M

Mateusz_Chromin

Hey, to be exact with terms we use in the conversation:

dialog - set of fields for editing asset metadata
clientlib - (in our context) set of scripts, that will be included (automatically) when rendering some (e.g. damadmin) page
plugin - singular script in the clientlib responsible for dynamic behaviour on dialog

"Could you please explain how we can create a custom plugin?"
This was described in the first post. Please create js script, attach it to the clientlib, and configure the clientlib to be included while rendering damadmin.

I was using 'yourCustomPlugin' name several times. This is an ID of your plugin, so you can call it whatever, just make sure you are defining and referring the same ID.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded