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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Restricting Multifield - Dropdown

Avatar

Level 2

Hello,

 

As part of requirement, We have a drop down which contains 3 values (ex:- list view, tile view & box view)

and when we select any one of these three options it refers to the same multi field which will be there in the next tab of dialog box.

 

Question :- If we select box view , we have to restrict the author that he/she needs to add atleast 3 multifields fields. No conditions for other views.

 

Thanks in advance.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @sai_santhosht50 

You can alert the author on dialog submit. See the below code snippet.

 

(function (document, $, ns) {
"use strict";
$(document).on("click", ".cq-dialog-submit", function (e) {
    e.stopPropagation();
    e.preventDefault();

    var $form = $(this).closest("form.foundation-form");
    let multi = $form.find("coral-multifield");
    let val = $(form).find("#dropdown").data('select').getValue(); //coral2 dropdown
   //let val = $(form).find("#dropdown")[0].selectedItem.value; //coral3 dropdown
   if(val =="select box" && multi.find("coral-multifield-item").length < 3) {
         ns.ui.helpers.prompt({
              title: Granite.I18n.get("Invalid Input"),
              message: "Please Enter atleast 3 items",
              actions: [{
                    id: "OK",
                   text: "OK",
                   className: "coral-Button"
              }],
              callback: function (actionId) {
                    if (actionId === "OK") {
                   }
             }
       });
    } else {
        $form.submit();
     }
  });
})(document, Granite.$, Granite.author);

 

Make sure your dropdown has id, if not change the selector in the above code.

Hope this will resolve issue.

AG

View solution in original post

8 Replies

Avatar

Level 5

Hello @sai_santhosht50,

It will be all custom jQuery based on coral multifield. You need to use basic jQuery to find number of items added.

For example $('coral-multifield-item').length; will give you number of items added. So you can put a condition that it should be greater than 3. Else while submitting the dialog, you can show a coral alert:

 

$(document).on("click",".coral3-Button", function (event) {
      ui.alert("Error", "Minimum of " + size + " items required!", "error");

}

 

Hope this gives you an idea to build the logic.

Jineet

Avatar

Level 2
Hi @Jinnet_Vora , Thanks for the explanation we have built the component on coral2.It will be help ful if you give the generic code as well. I am a beginner in using AEM

Avatar

Level 2
and that too the restriction should be for box view only (value from drop down). All the drop down modes are referring to the same multifield FYI. Thanks

Avatar

Correct answer by
Community Advisor

Hi @sai_santhosht50 

You can alert the author on dialog submit. See the below code snippet.

 

(function (document, $, ns) {
"use strict";
$(document).on("click", ".cq-dialog-submit", function (e) {
    e.stopPropagation();
    e.preventDefault();

    var $form = $(this).closest("form.foundation-form");
    let multi = $form.find("coral-multifield");
    let val = $(form).find("#dropdown").data('select').getValue(); //coral2 dropdown
   //let val = $(form).find("#dropdown")[0].selectedItem.value; //coral3 dropdown
   if(val =="select box" && multi.find("coral-multifield-item").length < 3) {
         ns.ui.helpers.prompt({
              title: Granite.I18n.get("Invalid Input"),
              message: "Please Enter atleast 3 items",
              actions: [{
                    id: "OK",
                   text: "OK",
                   className: "coral-Button"
              }],
              callback: function (actionId) {
                    if (actionId === "OK") {
                   }
             }
       });
    } else {
        $form.submit();
     }
  });
})(document, Granite.$, Granite.author);

 

Make sure your dropdown has id, if not change the selector in the above code.

Hope this will resolve issue.

AG

Avatar

Level 2
@anudeep , thanks for this. I have written the js which is similar to above.but the problem now am facing is - on dialog submission all the fields are getting freezed i mean that fields are getting dissappered

Avatar

Community Advisor
Hi @SAI_santhosh, Please share dialog xml and listener code snippet