Expand my Community achievements bar.

SOLVED

Unlock selected fields of component in structure mode of editable template

Avatar

Level 2

Hello,

After a component is added and unlocked in the structure mode of an editable template, the whole component i.e every field of the component is available for edit in page authoring mode.

I have a requirement where, when I unlock a component, I want only the selected fields of the component to be available for edit in page authoring mode.

Say, for example, Text core component has following fields:

  1. text
  2. id

In structure mode after I add a Text component to my template, I want to author just the 'id' field and leave the 'text' field open for edit in the page authoring stage.

So the behavior after unlocking should be -

a) Only 'text' field be available for the normal authors to edit at page authoring level and not the 'id' field.

b) But the value of 'id' element gets copied to the page instance level.

 

The solution that I used to achieve this behavior is - 

a) In the template, after authoring 'id' field, I'm disabling it using a policy (so that it is not available at the page level) and then unlocked the component. For disabling I'm using

granite:hide="${cqDesign.disableId}"

b) I'm reading the value of 'id' field from under the initial content of the template (as the resource name is similar)

 

Is there a better/elegant and fault-tolerant way to achieve this behavior?

 

Thanks

Ved

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @ved_s,

Another possible option for your use case,

  • Have "id" field(/granite/ui/components/coral/foundation/form/textfield) as part of cq:design_dialog and author it in template level via policy. 
  • In the "id" field(/granite/ui/components/coral/foundation/form/textfield) of cq:dialog, 
    • Set the value of the dialog with value from design via property named value -> ${cqDesign.idField} [String]
    • To avoid editing at page level, set the property named "disabled" -> true [Boolean]

Id value can then be retrieved like any other dialog field of a component.

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @ved_s,

Another possible option for your use case,

  • Have "id" field(/granite/ui/components/coral/foundation/form/textfield) as part of cq:design_dialog and author it in template level via policy. 
  • In the "id" field(/granite/ui/components/coral/foundation/form/textfield) of cq:dialog, 
    • Set the value of the dialog with value from design via property named value -> ${cqDesign.idField} [String]
    • To avoid editing at page level, set the property named "disabled" -> true [Boolean]

Id value can then be retrieved like any other dialog field of a component.

Avatar

Level 2

Hi @Vijayalakshmi_S

Thanks for the answer and guidance.
I tried this approach and it worked fine but my excitement was short-lived as I'm experiencing weird behavior.

It works fine and is all good but, when I save the content or unlock/lock the component the cqdesing values disappear and do not show up thereafter.

I'm not sure what wrong I'm doing. I'm using core component version - 2.11.0/ AEM 6.5.4.0 

 

Here are a few screenshot and code snippet (if it helps to troubleshoot) 

cq dialogcq_design_dialog
<items jcr:primaryType="nt:unstructured">
<contentLabel
jcr:primaryType="nt:unstructured"
sling:orderBefore="text"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Defines the label of this field"
fieldLabel="Field Label"
value="Enter Content Label"
maxlength="255"
name="./contentLabel"/>
<contentId
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="HTML ID attribute to apply to this component."
fieldLabel="ID"
value="Enter Content Identifier"
name="./contentId"
required="{Boolean}true"/>
</items>
<items jcr:primaryType="nt:unstructured">
<fieldLabel
jcr:primaryType="nt:unstructured"
sling:orderBefore="text"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Defines the label of this field"
fieldLabel="Field Label"
value="${cqDesign.contentLabel}"
disabled="{Boolean}true"
maxlength="255"
name="./fieldLabel"/>
<id
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="HTML ID attribute to apply to this Image collection component."
fieldLabel="ID"
value="${cqDesign.contentId}"
disabled="{Boolean}true"
name="./id"
required="{Boolean}true"/>

</items>

Before saving or lock/unlocking the component, ${cqDesign.propertyName} value shows correctly

 

value-shows.png

But after lock/unlocking the component or saving  ${cqDesign.propertyName} value do not show

noshow.png

Policy

policy.png

 

 

If possible plz help me understand or troubleshoot where I'm going wrong.

 

Thanks

Ved