Capture User Input in Popup

[Chandan Kumar]

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.

[Alexander Bautz]

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

[John Garrido]

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

[Alexander Bautz]

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

• This reply was modified 4 years, 1 month ago by Alexander Bautz.

[John Garrido]

Thanks Alex! Exactly what I needed.

[Bryan Waldrop]

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 2 years, 10 months ago by Bryan Waldrop.

[Alexander Bautz]

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

[Bryan Waldrop]

Much appreciated! thank you sir!

[Jon Whisman]

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?

[Alexander Bautz]

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

• This reply was modified 1 year, 2 months ago by Alexander Bautz.

[Author]

Posts