How to make the multifiled readonly in Touch UI

[Sandeep6]

Hi Team ,

I am trying to make multifiled readonly in Touch UI in aem 6.5.But it is not working as expected. 

<options
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
renderReadOnly="{Boolean}true"
fieldLabel="Add Options">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./hearEvServiceOptions">
<items jcr:primaryType="nt:unstructured">
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldLabel="Text"
name="./optionText"/>
</items>
</field>
</options>

Any suggestion would be helpful. Thank you in advance.

Thanks,

Sandeep. 

[Sady_Rifat]

Hello @Sandeep6 ,

As per the documentation read-only is not supported in multifield, https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... 

If you need this to meet the business requirement you can write custom JS and integrate with the component dialog by extraclientlibs. Add an additional class in the multifield and based on that class disable the 'Add' button.

[Sandeep6]

Hi @Sady_Rifat ,

In below link 

https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... .

it clearly mentioned multifield extends Field component.

check this below link

https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... 

where i can see it supports read only functionality.

Thanks,

Sandeep 

[Mahedi_Sabuj]

Hi @Sandeep6, Although Multifield extend Field component, readOnly is not supported in multifield as @Sady_Rifat mentioned. Alternatively, you can add readOnly={Boolean}true to all the dialog fields of multifield, then all of the fields will be Read Only. 

<listItems jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
  composite="{Boolean}true"
  fieldDescription="Click 'Add Field' to add more item in list."
  fieldLabel="Item List"
  required="{Boolean}true">
  <field jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/container"
    name="./listItems">
    <items jcr:primaryType="nt:unstructured">
      <firstName jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
        fieldLabel="First Name"
        readOnly="{Boolean}true"
        name="./firstName"/>
      <lastName jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
        fieldLabel="Last Name"
        readOnly="{Boolean}true"
        name="./lastName"/>
    </items>
  </field>
</listItems>

[Sandeep6]

Hi,

I tried to add readOnly={Boolean}true to all the dialog fields of multifield, still no luck.