Restricting Multifield - Dropdown | Community
Skip to main content
sai_santhosht50
sai_santhosht50
October 23, 2020
Solved

Restricting Multifield - Dropdown

  • October 23, 2020
  • 2 replies
  • 2466 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Anudeep_Garnepudi

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

2 replies

Jineet_Vora
Community Advisor and Adobe Champion
Jineet_VoraCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
October 23, 2020

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
    sai_santhosht50Author
    October 23, 2020
    Hi @Jinnet_Vora ,
      Anudeep_Garnepudi
      Community Advisor
      Anudeep_GarnepudiCommunity AdvisorAccepted solution
      Community Advisor
      October 26, 2020

      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

        sai_santhosht50
        sai_santhosht50Author
        October 27, 2020
        @12365029 , 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
          Terms & ConditionsAccessibility statement

          Loading footer...