Capture User Input in Popup

Forums Dynamic Forms for SharePoint Capture User Input in Popup

This topic contains 4 replies, has 3 voices, and was last updated by  John Garrido 1 week, 3 days ago.

  • 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.

You must be logged in to reply to this topic.