Concatenate and Write Cascading Dropdown Selections to Text Field

Forums Dynamic Forms for SharePoint Concatenate and Write Cascading Dropdown Selections to Text Field

This topic contains 17 replies, has 2 voices, and was last updated by  Alexander Bautz 4 months, 4 weeks ago.

  • Author
    Posts
  • #24308

    Mike
    Participant

    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 months, 1 week ago by  Mike. Reason: update title
  • #24313

    Alexander Bautz
    Keymaster

    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

  • #24325

    Mike
    Participant

    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

  • #24340

    Alexander Bautz
    Keymaster

    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

  • #24355

    Mike
    Participant

    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

  • #24357

    Alexander Bautz
    Keymaster

    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

  • #24359

    Mike
    Participant

    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

  • #24370

    Alexander Bautz
    Keymaster

    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

  • #24374

    Mike
    Participant

    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 months ago by  Mike. Reason: update
    • This reply was modified 5 months ago by  Mike. Reason: updates
  • #24389

    Alexander Bautz
    Keymaster

    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

  • #24441

    Mike
    Participant

    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

    • #24447

      Alexander Bautz
      Keymaster

      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

  • #24451

    Mike
    Participant

    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

  • #24453

    Alexander Bautz
    Keymaster

    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

  • #24459

    Mike
    Participant

    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

  • #24465

    Alexander Bautz
    Keymaster

    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

  • #24509

    Mike
    Participant

    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

  • #24513

    Alexander Bautz
    Keymaster

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

    Alexander

You must be logged in to reply to this topic.