Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Make the requirement of a field dependent on chosen value in show-hide dropdown

Avatar

Avatar
Ignite 1
Level 1
miar10726509
Level 1

Likes

0 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
View profile

Avatar
Ignite 1
Level 1
miar10726509
Level 1

Likes

0 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
View profile
miar10726509
Level 1

21-11-2019

Hello all,

I'm creating a component that has a background that can be either an image or a video.


For both the image and the video some additional info should be provided by the author, so i created a show-hide-dropdown in _cq_dialog that toggles fields depending on the chosen value in the dropdown.


A lot of this extra additional info is required (for SEO reasons).

The problem is that when the author chooses for example 'image', there is no possibility to close the dialog, as the 'required video details' are not filled out.
So my question is: is there a possibility to make the property 'required' dependent on the chosen value in the dropdown.
I add the code, but it is a simplified version of only the relevant tab of the dialog.

Thanks so much for your input!

<tabMedia
  jcr:primaryType="nt:unstructured"
  jcr:title="Media"
  sling:resourceType="granite/ui/components/coral/foundation/container"
  margin="{Boolean}true">
       <items jcr:primaryType="nt:unstructured">
            <columns
                  jcr:primaryType="nt:unstructured"
                  sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                  margin="{Boolean}true">
                 <items jcr:primaryType="nt:unstructured">
                      <column
                       jcr:primaryType="nt:unstructured"
                       sling:resourceType="granite/ui/components/foundation/container">
                           <items jcr:primaryType="nt:unstructured">
                                <background
                                 jcr:primaryType="nt:unstructured"
                                 sling:resourceType="granite/ui/components/foundation/form/select"
                                 fieldLabel="Background"
                                 class="cq-dialog-dropdown-showhide"
                                 cq-dialog-dropdown-showhide-target=".select-source-showhide-target"
                                 name="./background"
                                 required="true">
                                     <items jcr:primaryType="nt:unstructured">
                                          <picture jcr:primaryType="nt:unstructured"
                                           text="Photo"
                                           value="photo"/>
                                          <video jcr:primaryType="nt:unstructured"
                                           text="Video"
                                           value="video"/>
                                     </items>
                                </background>
                                <backgroundPhoto
                                  jcr:primaryType="nt:unstructured"
                                  sling:resourceType="granite/ui/components/foundation/container">
                                     <layout
                                      jcr:primaryType="nt:unstructured"
                                      sling:resourceType="granite/ui/components/foundation/layouts/well"/>
                                     <items jcr:primaryType="nt:unstructured">
                                          ...
                                     </items>
                                </backgroundPhoto>
                                <backgroundVideo
                                  jcr:primaryType="nt:unstructured"
                                 sling:resourceType="granite/ui/components/foundation/container"
                                 class="select-source-showhide-target"
                                 showhidetargetvalue="video">
                                     <layout
                                      jcr:primaryType="nt:unstructured"
                                      sling:resourceType="granite/ui/components/foundation/layouts/well"/>
                                          <items jcr:primaryType="nt:unstructured">
                                               <videoContainer
                                                jcr:primaryType="nt:unstructured"
                                                jcr:title="Video"
                                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                                    <items jcr:primaryType="nt:unstructured">
                                                            ...
                                                         <videoName
                                                          jcr:primaryType="nt:unstructured"
                                                          sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                          required="true"
                                                          fieldLabel="Name"
                                                          fieldDescription="The title of the video"
                                                          name="./videoName"/>
                                                    </items>
                                               </videoContainer>
                                          </items>
                                     </backgroundVideo>
                                </items>
                           </column>
                      </items>
                 </columns>
            </items>
</tabMedia>

Replies

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,156 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,279 likes

Total Posts

3,156 posts

Correct Reply

889 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

21-11-2019

Yes, you can remove the required property from the dialog and do the validation in js based on the given input in the dialog.

Please check the basic sample code -

It's Gonna be Legendary: AEM Touch UI Dialog Validation

Check https://aemlab.blogspot.com/2019/05/aem-touch-ui-component-dialog-field.html to cover all the input fields validation.