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 5 years, 4 months 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 4 years 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 2 years, 4 months ago by Alexander Bautz.

[Rick Cedergren]

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?

[Alexander Bautz]

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

[Rick Cedergren]

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”,
});

[Alexander Bautz]

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

[Author]

Posts