Capture User Input in Popup

Forums Classic DFFS Capture User Input in Popup

Viewing 9 reply threads
  • Author
    Posts
    • #20944
      Chandan Kumar
      Participant

      Hi Alex,

      I am new to the DFFS. I have a requirement to create a button Onclick function, which will open a popup with people picker control, where user will select the people. I have to capture the user input people value and append that value in existing people picker column. I tried to look similar requirement in forum but couldn’t find. I am checking if you have existing object/function to handle this scenario.

    • #20948
      Alexander Bautz
      Keymaster

      Hi,
      Start by adding this to a HTML section in one of your tabs:

      <input type="button" onclick="popUpPeoplePickerExample()" value="Show People picker">

      Then add this to your Custom JS:

      function popUpPeoplePickerExample(){
          spjs.dffs.alert({
              "title":"People picker example",
              "msg":"<div id='customPeoplePicker' onkeydown='event.stopPropagation()' style='height:22px'></div>",
              "ok":function(){
                  var pp = SPClientPeoplePicker.SPClientPeoplePickerDict.customPeoplePicker_TopSpan, users = pp.GetAllUserInfo(), arr;
                  // Get current PP values
                  arr = spjs.utility.getFieldValue({"fin":"Requester","key":"loginName"});
                  jQuery.each(users,function(i,o){
                      arr.push(o.Key);
                  });
                  setFieldValue("Requester",arr);
              },
              "cancel":function(){
                  // Close dialog
              }
          });
          var schema = {};
          schema.PrincipalAccountType = 'User,DL,SecGroup,SPGroup';
          schema.SearchPrincipalSource = 15;
          schema.ResolvePrincipalSource = 15;
          schema.AllowMultipleValues = true;
          schema.MaximumEntitySuggestions = 50;
          schema.Width = '350px';
          schema.Height = '55px';
          this.SPClientPeoplePicker_InitStandaloneControlWrapper("customPeoplePicker", null, schema);
      }

      You must change “Requester” in the above snippet with the name of the People picker you want to update with the values.

      Let me know how this works out.

      Alexander

    • #26578
      John Garrido
      Participant

      Hi Alex,
      Do you have a similar solution that could be used with a multi-choice field instead of the people picker?

    • #26607
      Alexander Bautz
      Keymaster

      Something like this:

      function popUpMultichoiceSelect(fin, arrOfOptions) {
          var b = [];
          b.push("<div id='customMultichoiceSelector'>");
          jQuery.each(arrOfOptions, function (i, v) {
              b.push("<input id='customMultichoice_" + i + "' type='checkbox' value='" + v + "'><label for='customMultichoice_" + i + "'>" + v + "</label>");
          });
          b.push("</div>");
          spjs.dffs.alert({
              "title": "Multichoice Example",
              "msg": b.join(""),
              "ok": function () {
                  var arr = [];
                  jQuery("#customMultichoiceSelector").find("input:checkbox:checked").each(function (i, elm) {
                      arr.push(jQuery(elm).val());
                  });
                  setFieldValue(fin, arr);
              },
              "cancel": function () {
                  // Close dialog
              }
          });
      }
      popUpMultichoiceSelect("ChoiceColumn3", ["Enter Choice #1", "Enter Choice #2", "Enter Choice #3"]);

      Replace “ChoiceColumn3” with your field name, an the array with your fields options.

      Alexander

    • #26645
      John Garrido
      Participant

      Thanks Alex! Exactly what I needed.

    • #32122
      Bryan Waldrop
      Participant

      could the multichoice be modified to use the values of other columns as choices?

      I gave this a whirl but no go

      
      
      function popUpMultichoiceSelect(fin, arrOfOptions) {
          var b = [];
          var cx=getFieldValue('phone1');
          var dx=getFieldValue('phone2');
          b.push("<div id='customMultichoiceSelector'>");
          jQuery.each(arrOfOptions, function (i, v) {
              b.push("<input id='customMultichoice_" + i + "' type='checkbox' value='" + v + "'><label for='customMultichoice_" + i + "'>" + v + "</label>");
          });
          b.push("</div>");
          spjs.dffs.alert({
              "title": "Multichoice Example",
              "msg": b.join(""),
              "ok": function () {
                  var arr = [];
                  jQuery("#customMultichoiceSelector").find("input:checkbox:checked").each(function (i, elm) {
                      arr.push(jQuery(elm).val());
                  });
                  setFieldValue(fin, arr);
              },
              "cancel": function () {
                  // Close dialog
              }
          });
      }
      popUpMultichoiceSelect("phselect", [cx,dx]);
      • This reply was modified 3 years, 4 months ago by Bryan Waldrop.
    • #32125
      Alexander Bautz
      Keymaster

      Almost correct, but you are trying to pass in the cx and dx variables that are not yet defined. Move these out of the function and add them right before the function call like this:

      var cx=getFieldValue('phone1');
      var dx=getFieldValue('phone2');
      popUpMultichoiceSelect("phselect", [cx,dx]);

      Alexander

    • #32153
      Bryan Waldrop
      Participant

      Much appreciated! thank you sir!

    • #36007
      Jon Whisman
      Participant

      This is great! How about just having a text field in the pop-up that I can then use as a variable to do other stuff with once they click ok?

      • #36014
        Alexander Bautz
        Keymaster

        Hi,
        You can do that like this:

        // Define variable on the root
        var varFromAlertInput = "";
        
        spjs.dffs.alert({
            "title": "Test alert with input field",
            "msg": "<input id='varFromAlertInput_input' type='text'>",
            "ok": function(){
                // Update the variable before closing
                varFromAlertInput = jQuery("#varFromAlertInput_input").val();
            }
        });
        

        Alexander

    • #37193
      Rick Cedergren
      Participant

      The multiselect code you provided above seems to allow the save without any options selected, Any suggestions how to require a selection prior to triggering the save on button click?

      • #37194
        Alexander Bautz
        Keymaster

        There is no validation of the input in the popup dialog, but because the value is written to the form you can create a rule in your DFFS configuration to set the field as required – this will not allow saving the form if the field is empty.

        Alexander

      • #37308
        Rick Cedergren
        Participant

        Noticed I’m still having issues with this code. The selected options (email distlists) are not being saved to the form before the SPD Workflow kicks, and the workflow auto-cancels due to a coercion failure. Any ideas/suggestions would be greatly appreciated.

        var fin = “distlist”;
        var arrOfOptions = [“Staff Hires”, “Attorney Hires”];
        var b = [];
        b.push(“<div id=’customMultichoiceSelector’>”);
        jQuery.each(arrOfOptions, function (i, v) {
        b.push(“<input id=’customMultichoice_” + i + “‘ type=’checkbox’ value='” + v + “‘><label for=’customMultichoice_” + i + “‘>” + v + “</label>”);
        });
        b.push(“</div>”);
        spjs.dffs.alert({
        “title”: “Multichoice Example”,
        “msg”: b.join(“”),
        “ok”: function () {
        var arr = [];
        jQuery(“#customMultichoiceSelector”).find(“input:checkbox:checked”).each(function (i, elm) {
        arr.push(jQuery(elm).val());
        });
        setFieldValue(fin, arr);
        spjs.dffs.closeDlg();
        dlgBoxOkClicked = true;
        // Trigger save again
        jQspjs(“input[id$=’diidIOSaveItem’]:last”).trigger(“click”);
        },
        “okBtnLabel”:”Save & Send”,
        “cancel”: function () {
        // Close dialog
        },
        “cancelBtnLabel”: “Cancel”,
        });

      • #37309
        Alexander Bautz
        Keymaster

        It is hard to tell without looking at the code live, but looking at it you might want to join the array with semicolon when writing it to the field – like this:

        jQuery("#customMultichoiceSelector").find("input:checkbox:checked").each(function (i, elm) {
            arr.push(jQuery(elm).val());
        });
        setFieldValue(fin, arr.join(";"));
        

        Alexander

Viewing 9 reply threads
  • You must be logged in to reply to this topic.