Capture User Input in Popup

Forums Dynamic Forms for SharePoint Capture User Input in Popup

Viewing 7 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]);
    • #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!

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