Concatenate and Write Cascading Dropdown Selections to Text Field

[MikeS]

Alex,

I’ve reviewed several posts but nothing does exactly what I’m looking for.

Use case: Multi-value lookup to a second list. User selects Choice 1, and one or more Choices in the second text box. Once user selects these a script runs that concatenates Choice 1 with each of the choices in the second text box and writes these to a multi-line text box in the form. Output example: Choice 1-Choice 1a, Choice 1b, Choice 1c. This should appear in the form in front of the user so they see the captured selections.

Then the Selected Options are cleared (and it would be nice if they did not re-appear in the Available Options boxes to avoid confusion) so that the user can select a second choice (Choice 2) from the first text box and one or more Choices from the second text box. The same concatenation then occurs in real time and results (e.g., Choice 2-Choice 2a, Choice 2b) are written to the same multi-line text box. A pipe symbol can serve as a delimiter between the sequence of choices.

Example:
Choice 1-Choice 1a, Choice 1b, Choice 1c | Choice 2-Choice 2a, Choice 2b

We will then do a lookup to this multi-line text box from another list. This will enable aggregation of data in numerous combinations.

Thanks for your help. Let me know if you need a diagram or more info.

Mike

• This topic was modified 5 years, 8 months ago by MikeS. Reason: update title

[Alexander Bautz]

I’m not sure exactly what you try to do here, but is seems a bit cumbersome. Are you using a sharepoint multilookup column, or the cascading dropdown with multi choice?: https://spjsblog.com/dffs/dffs-plugins/spjs-cascading-dropdowns/

Unfortunately you cannot use a multiline textbox in a lookup column so I’m not sure your suggested solution will work.

If you have some more detains I might be able to help.

Alexander

[MikeS]

I’m using the DFFS cascading dropdown with multi-choice.

I still need a solution (as described above) that copies the selected cascading dropdown options to a multi-line text box, deletes the selected options in the cascading boxes, then allows another set of available options to be selected and copied to the same multi-line text box.

I’ll use a SPD workflow to copy the multi-line text box to another list.

Thanks

Mike

[Alexander Bautz]

You can use something like this:

function concatenateCasc(fin1,fin2,targetField){
	var v1 = getFieldValue(fin1);
	var v2Arr = getFieldValue(fin2).split(";\n");
	// Remove the last blank item
	v2Arr.pop();
	var nVal = v1+"-"+v2Arr.join(", ");
	// Set the value in the other field
	var currValue = getFieldValue(targetField);	
	setFieldValue(targetField,currValue !== "" ? currValue + "|" + nVal : nVal);
	// Remove the current option in the first select
	jQuery("#"+fin1+"_casc option:selected").remove();
	// Clear the value in the casc-select by selecting the fiest option in the first dropdown
	jQuery("#"+fin1+"_casc option:first").prop("selected",true).trigger("change");
}

// Call with the FieldInternalName of level 1 and 2 of the cascading dropdown and the internal name of the target to write the value to.
concatenateCasc("Level1Single","Level2Multi","TargetField");

I’m not sure how you want to trigger this writing of the values – from a button maybe?

Alexander

[MikeS]

Yes, a button in the form could trigger writing each set of selected options chosen from the cascading dropdown available options. What would I need to call it?

Mike

[Alexander Bautz]

Add a HTML section in your form and add a button like this:

<input type="button" value="The name of the button" onclick="concatenateCasc('Level1Single','Level2Multi','TargetField');return false;">

Alexander

[MikeS]

The script and button are doing exactly what is needed.

Just need a bit of formatting for the text written to the Target Field (noted in the first post above):

Choice 1-Choice 1a, Choice 1b, Choice 1c | Choice 2-Choice 2a, Choice 2b (continuous string of text without introduced line breaks and no characters before “Choice 1-“)

Please ensure there are not any extraneous symbols at the end of the Target Field string upon script completion.

Thanks,
Mike

[Alexander Bautz]

I tested it in my setup and it game me the correct layout of the string – can you show me how it looks in your multiline field?

NOTE: You must use a plain text multiline field.

Alexander

[MikeS]

My output (plain text multi-line field, SP 2013) looks like this:

Choice1;
-Choice1a, Choice1b|Choice2;
-Choice2a, Choice2b, Choice2c, Choice2d, Choice2e

• This reply was modified 5 years, 8 months ago by MikeS. Reason: update
• This reply was modified 5 years, 8 months ago by MikeS. Reason: updates

[Alexander Bautz]

I’m not able to recreate this issue. I guess it is related to the separator used in the split function in this line:

var v2Arr = getFieldValue(fin2).split(";\n");

If you bring up the developer tools (hit F12 > Console) and type in this line and hit enter – what do you get?

getFieldValue("NAME_OF_YOUR_MULTISELECT_FIELD").split(";\n");

Which browser and which SharePoint version are you using?

Alexander

[MikeS]

Yes, experimenting with the separator used in the spit-line function has some effect on the output, but nothing that hits the mark. Still getting split line. No line breaks would meet the mininimum requirement.

When I press F12 in the EDIT form I cannot find the “getFieldValue” in the page markup.

Results are the same with Firefox 60.5.2 or IE 11. Using SharePoint 2013 Foundation (in house).

Mike

[Alexander Bautz]

If you open the form in a dialog you must ensure the console is attached to the modal window and not the parent page. Right click somewhere in the modal form and select “Inspect” to ensure it is attached to the correct window and then rerun the snippets I suggested above.

Alexander

[MikeS]

I’ve inspected the entire edit.aspx markup (View Page Source) in Firefox and there is no GetFieldValue after I click the HTML button to run the script. I do not load forms in a dialog. Am I missing something obvious?

Mike

[Alexander Bautz]

Just hit F12 to bring up the console and type in the snippet like the attached image – then hit Enter. Replace “Level2Multi” with your field internal name.

Alexander

Attachments:

1. 

   getFieldValue_in_console.png
   

[MikeS]

Followed instructions and nothing appears when I type in the snippet with my own Level2Multi internal field name. Any other options?

Any way to modify the JS to eliminate line breaks?

Mike

[Alexander Bautz]

Please post (or email me) some more screenshots of what you do when trying to check the snippet in the console – I need to see the output in the console to see what the problem is.

Alexander

[MikeS]

I had mis-configured a DFFS Cascading dropdowns entry. Once I removed “multi” from the Level 1 field in “Comma separated list of fields in the current list” your script worked perfectly. Thanks again for your help. Sorry I didn’t realize this sooner.

Mike

[Alexander Bautz]

No problem, I’m glad you figured it out.

Alexander

[MikeS]

Alexander,

I would appreciate you assistance on a variation of this code.

I’m using a DFFS cascading dropdown in an Inventory list with a multi-choice on a Rack Number field from a lookup to a Rack number list. I need to select one or more Rack Numbers in my Inventory list and automatically pull forward additional fields from the Rack list. These additional fields (Serial Number, Mfr Date) do not need to be part of any dropdown in the Inventory List as they are fixed for each Rack. However they should be visible below the Lookup field when a Rack No is chosen. (There will be duplicate Rack Numbers in the Rack Number list but your code above does a good job of just showing one Rack Number in the lookup field no matter how many duplicates.)

I then need to concatenate each Rack No and the pulled forward additional fields in a multi-line Rich Text field (with line breaks) in my Inventory list. It appears I must use a Rich Text field for this collection of concatenated fields as I need a line break that will translate to a Word document (via a SPD Workflow) and show up as a set of rows (like a table) rather than one long string.

Example of the final multi-line field in SharePoint:
Rack1 – Serial Number, Mfr Date </br>
Rack2 – Serial Number, Mfr Date </br>
etc.

Thanks for your help,
Mike

[Alexander Bautz]

Hi,
The cascading dropdown plugin does not currently have functionality like that, but the autocomplete plugin does – have you checked this out to see if you might be able to use it in stead?

It should however be possible to do something like this by using the dataSource option and preload all the items from the Rack number list (including the extra fields you need to pull in), and then run a custom function on save to loop trough all selected values in the cascading dropdown – looking up the value in the dataSource object and getting the extra values from there before concatenating and writing the values to the rich text field.

Alexander

[MikeS]

Alexander,

I’ve worked for some time with the AutoComplete plug-in based on your suggestion. I’m unable to get a concatenated list of the three fields in the toFIN field. All I see in the toFIN box is the last field specified in the array. Do my array statements look OK?

"setFields": [
     {
			"fromFIN":"Title",
			"joinBy":",",
			"toFIN":"RackCombo",
			"parseFunction":"",
			"skipIfEmpty":true
		},
		{
			"fromFIN":"SerialNo",
			"joinBy":",",
			"toFIN":"RackCombo",
			"parseFunction":"",
			"skipIfEmpty":true
		},
		{
			"fromFIN":"MfrDate",
			"joinBy":",",
			"toFIN":"RackCombo",
			"parseFunction":"",
			"skipIfEmpty":true
		},

Once I get that solved I still need to be able to add additional sets of three fields to the same toFIN text box (or another text box) with a <br> separating each set of three fields – like a collector or aggregator text box. Any tips on that would be much appreciated.

Thanks
Mike

[Alexander Bautz]

If you want to set multiple values and control the format you must add the setFields array like this:

    ...
    ...
    "setFields": [
        {
            "fromFIN":["Title", "SerialNo", "MfrDate"],
            "joinBy":"",
            "toFIN":"", // Leave this empty
            "parseFunction":"parseRackCombo",
            "skipIfEmpty":true
        }
    ]
});

If you plan to use the autocomplete to select multiple times (please note that using it in multiselect mode will not work because the setField section is not active) you must use an empty string in the toFIN and have the parseFunction set the value to the proper field – if not it will be cleared when you select a new item. See parseFunction below.

function parseRackCombo(a){
    // a is an array with all the values from the fromFIN array
    var currVal = getFieldValue("RackCombo"); // RackCombo must be a plain multiline text field
    var title = a[0];
    var serialNo = a[1];
    var mfrDate = new Date(a[2].split(" ").join("T")).toLocaleDateString();
    var thisVal = title + " - " + serialNo + ", " + mfrDate;
    var newVal = currVal !== "" ? currVal + "\n" + thisVal : thisVal;
    setFieldValue("RackCombo", newVal);
}

Let me know how this works out.

Alexander

[MikeS]

Alexander,

I need to extend this excellent solution just a bit. How could I set up another SetFields and parseFunction that only concatenates the Title and the Serial No (excludes the mfrDate) to a separate multi-line text field called RackSNCombo?

Thanks
MikeS

[Alexander Bautz]

Hi,
Just add this to the bottom of the parseRackCombo function:

// Concatenate only Title and SerialNo
setFieldValue("AnotherField", title + " - " + serialNo);

Alexander

[MikeS]

Works great.

Thanks
MikeS

[MikeS]

Awesome solution Alexander. Works perfectly. Thank you!

Mike

[Alexander Bautz]

Thanks for the feedback – I’m glad it worked!

Alexander

[Author]

Posts