Concatenate and Write Cascading Dropdown Selections to Text Field

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

Viewing 22 reply threads
  • 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 9 months 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 8 months, 3 weeks ago by  Mike. Reason: update
      • This reply was modified 8 months, 3 weeks 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

    • #27764
      Mike
      Participant

      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

    • #27786
      Alexander Bautz
      Keymaster

      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

    • #27811
      Mike
      Participant

      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

    • #27836
      Alexander Bautz
      Keymaster

      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

    • #27872
      Mike
      Participant

      Awesome solution Alexander. Works perfectly. Thank you!

      Mike

    • #27877
      Alexander Bautz
      Keymaster

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

      Alexander

Viewing 22 reply threads
  • You must be logged in to reply to this topic.