Capture User Input in Popup

Forums Dynamic Forms for SharePoint Capture User Input in Popup

Viewing 4 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.

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