Replicating infopath dropdown with values

[James]

I am working on replacing InfoPath for our assessments that we process in the current InfoPath system. We use the drop-down list with the value driven and display name drop-down option. I would like to leverage the DFFS for this but if we’re not able to identify how to replicate the scoring, then we’ll have to look at alternate solution. Is there any way to create a value driven drop-down that displays different verbiage similar to InfoPath? The other features in DFFS will be a substantial upgrade, but I could not figure this piece out.

[Alexander Bautz]

Hi,
I haven’t really used InfoPath so I’m not familiar with the type of dropdown you refer to. Please clarify what kind of functionality you are looking for – and also what type of field this is (in the SharePoint list settings).

Alexander

[James]

My apologies for the delay. The share point field is a choice field with drop down. The values that reflect on the Sharepoint list are 0-3. The drop down in the form displays text of proficient or not proficient, creating a score of 3 or 1. The value portion is then used in a calculated single line of text field to generate an overall average score. Essentially the functionality needs to display an unrelated choice in the drop down but the field only receives the value on the list.

[Alexander Bautz]

You can do this using some custom js. Add this code to your forms custom js and replace “YOUR_FIELD_NAME” with the actual name of your field.

Please note that you will also need to change the field type to Single line of Text for this to work.

function textFieldAsDropdown(fin) {
    let options = [
        { "val": "3", "text": "proficient" },
        { "val": "1", "text": "not proficient" }
    ];
    let currFieldValue = getFieldValue(fin);
    let b = [];
    b.push("<select onchange='changeCustomDropdown(\"" + fin + "\", this)' style='padding: 6px 10px'>");
    b.push("<option value=''>---</option>");
    options.forEach(opt => {
        b.push("<option value='" + opt.val + "'" + (currFieldValue === opt.val ? " selected=true'" : "") + ">" + opt.text + "</option>");
    });
    b.push("</select>");
    jQuery("#dffs_" + fin).find("input").hide().after(b.join(""));
}

function changeCustomDropdown(fin, elm) {
    var value = elm.value;
    // Set the value to ensure it is saved with the form
    setFieldValue(fin, value);
}

// Call the function with the internal name of the text field
textFieldAsDropdown("YOUR_FIELD_NAME");

Alexander

[James]

I have been trying to leverage this and can’t seem to get past an error on line 11.
b.push(“<option value=”>—</option>”);
It is giving an unclosed regular expression error. I’be never used JavaScript prior so I apologize if this is a simple mistake on my part.

[Alexander Bautz]

I guess the quotes have been messed up in the copy-paste process. The line you refer to should be like this (double quotes at the ends and two single quotes inside):

b.push("<option value=''>—</option>");

Alexander

[James]

Thank you very much. The custom is no longer has any errors on it. I have one last follow up question and I could not find anything in the JavaScript sections of prior questions.
I have the code fully entered in the custom js tab, but the field is still not reacting to the function. Am I missing a step to execute the function? I saw references to cewp on some of your older posts but I’m not seeing that option anywhere. My apologies for all of the extra questions on this

[Alexander Bautz]

Please show me a screenshot of your custom js and the form (the field you are trying to make into a dropdown) so I can see if you have set it up correctly.

Alexander

[James]

I read through the code again and missed a punctuation. Everything is working on the drop down now. The only follow up challenge we are running into is the variations of JavaScript I’ve written are not able to calculate an average using the values. It continues to provide an error of NaN. The most recent version I tried was in rules using this code.
{inline}
setFieldValue(‘myfield1’, ((“myfield2” + “myfield3” + “myfield4”)/3))
When I tried writing a function in the custom js tab it is canceling the drop down functionality.

[Alexander Bautz]

You cannot just refer the fields by their name here – you are adding the actual text strings together so you basically divide myfield2myfield3myfield4 by 3.

Change it like this:

setFieldValue("Title", ((getFieldValue("myfield2") + getFieldValue("myfield3") + getFieldValue("myfield4"))/3));

Also, the quotes in your code snippets were the wrong type so you might need to retype them when copy-pasting the code.

Alexander

[Author]

Posts