Restricting Multifield - Dropdown

Avatar

Avatar

sai_santhosht50

Avatar

sai_santhosht50

sai_santhosht50

22-10-2020

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Anudeep_Garnepudi

Avatar

Anudeep_Garnepudi

Anudeep_Garnepudi

26-10-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

Answers (1)

Answers (1)

Avatar

Avatar

Jineet_Vora

Avatar

Jineet_Vora

Jineet_Vora

23-10-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