Restricting Multifield - Dropdown

[sai_santhosht50]

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.

[Jineet_Vora]

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

[sai_santhosht50]

Hi @Jinnet_Vora ,

[sai_santhosht50]

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

[sai_santhosht50]

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

[Anudeep_Garnepudi · Accepted solution]

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

[kautuk_sahni]

Great reply.

[sai_santhosht50]

@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

[Anudeep_Garnepudi]

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