Autocomplete Issue

[Saikia Kashmiri]

Hi Alex,

Have two items –

1. I am trying to use Autocomplete on a lookup field in a form, where a user enters a record ID or record name and the search is run on two other fields from the *same* list. If a match is found and selected, it will populate the rest of the current form fields with info from the selected record.
My issue is, whenever more than one match is found, the drop down only displays one result. The debug mode shows all the matches.

2. My records have about 120+ fields and I need all of them to be copied over to the current form whenever a match is selected – Do I have to write 120+ blocks under “setFields” or is there a simpler way to copy the entire record into the current record and leave open for editing?

PS: Reg the first issue. it occurred on both (DFFS v4.4.5.47 – July 30, 2023||spjs-utility version: 1.356|Loader version: v2) and (DFFS v4.4.5.34 – October 15, 2021||spjs-utility version: 1.354|Loader version: v1).

Thanks as always!

[Alexander Bautz]

1: I’s hard to tell without looking at the code for your autocomplete and a screenshot of the dropdown / search.

2: Copying 120+ fields using setFields in an autocomplete most likely won’t work, but you can try. It would most likely be best to write a custom function to do the copying / creation of the new item. I’m curious as to why you would want to copy 120+ fields – what are you trying to achieve?

Alexander

[Saikia Kashmiri]

Attaching screen shots of the code for AC (All fields- Source and Destination – belong to same list).

Reg your question about fields copy – Each record in the list contains questions for the requestor to specify their need (and there are indeed way too many questions : ) ). Not all fields will be populated of course – since many fields are presented conditionally – But at any point in time, I’d say an average of 50 fields will have data for each record.

There will be occasions when the requestor would come back and add another request very similar to a previous record with some changes – The ask is to let the person search for the earlier record, copy it into a new record, make their edits and then submit as a new record.

Technically cloning of the existing record into a new record ..

Thank You!
Kash

Attachments:

1. 

   Form-Field-and-Debug-View.jpg
   

2. 

   Code-Snippet.jpg
   

[Alexander Bautz]

The reason you only see one is that “Cast name” is not unique. The way this works, the “ShowField” value must be unique. To achieve this you can concatenate for example CAST_x0020_Name and Title in a calculated column and use that new field as “ShowField”.

What kind of fields are there in this list? – the code would have to query the other list item and will retrieve the data stored in sharepoint and not the “display value” used in the form. This means people pickers, multichoice fields, lookup fields and date fields must be manipulated before it can be filled into the form.

I have some functions to copy an item already in the forum, but can write up a new example if I know what kind of fields you are using.

Alexander

[Saikia Kashmiri]

Ah! Thank you about the unique field – Will try with a calculated field now.

Reg the fields in the list – Below is a break down of what I got – Thank you!

Attachment – 1 – Do Not Copy
Choice – 23 – Copy All Bar 1 (Skip the very first choice that triggers the copy record function)
Currency – 1 – Do Not Copy
DateTime – 3 – Do Not Copy
LookupMulti – 5 – Copy All
MultiChoice – 33 – Copy All
Multiple lines of text – 38 – Copy All
Single line of text – 18 – Copy All Bar 3 (3 flag fields need to be set to zero)
URL – Do Not Copy (Created by Sharepoint designer for email workflow – Not sure how these behave )
User – 3 – Copy All Bar 1 (Submitter name is captured automatically)
UserMulti – 1 – Do Not Copy
System Field – 4 – Do Not Copy

[Alexander Bautz]

Here is an example. Add it to your NewForm and configure the spjs.ac.textField call to match your field and the arrOfFieldsToPrefill to include all the fields you want to prefill.

spjs.ac.textField({
  "applyTo": "Name_of_autocomplete_field",
  "helpText": "Start typing",
  "loadText": "Searching...",
  "listGuid": _spPageContextInfo.pageListId,
  "listBaseUrl": _spPageContextInfo.webServerRelativeUrl,
  "showField": "Title",
  "searchFields": ["Title"],
  "filterCAML": "",
  "useREST": true,
  "preloadData": false,
  "filterREST": "",
  "optionDetailFields": [],
  "optionDetailPrefix": [],
  "enforceUniqueValues": false,
  "rowLimit": 15,
  "listOptionsOnFocus": true,
  "minLengthBeforeSearch": 1,
  "reValidateOnLoad": true,
  "allowAddNew": true,
  "isLookupInSelf": false,
  "addNewAdditionalFields": [],
  "multiselect": false,
  "multiselectSeparator": "; ",
  "orderBy": [],
  "clearSetFieldsOnInvalidSelection": true,
  "setFields": [{
    "fromFIN": "ID",
    "joinBy": "",
    "toFIN": "DUMMY_USING_CUSTOM_JS",
    "parseFunction": "getSelectedItemAndPrefill",
    "skipIfEmpty": false
  }],
  "debug": false
});

function getSelectedItemAndPrefill(id) {
  var arrOfFieldsToPrefill = [
    "Field_1",
    "Field_2",
    "Field_3"
  ];

  var select = [];
  var expand = [];

  arrOfFieldsToPrefill.forEach(fin => {
    var type = spjs.dffs.fieldtype[fin];
    console.log(type);
    switch (type) {
      case "SPFieldUser":
      case "SPFieldUserMulti":
        select.push(fin + "/Name");
        expand.push(fin);
        break;
      case "SPFieldLookup":
      case "SPFieldLookupMulti":
        select.push(fin + "Id");
        break;
    }
  });

  jQuery.ajax({
    "url": _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getbyid('" + _spPageContextInfo.pageListId + "')/items(" + id + ")?$select=*," + select.join(",") + "&$expand=" + expand.join(","),
    "method": "GET",
    "headers": {
      "Accept": "application/json;odata=verbose",
      "content-type": "application/json;odata=verbose"
    },
    "success": function (data) {
      arrOfFieldsToPrefill.forEach(fin => {
        var item = data.d;
        var type = spjs.dffs.fieldtype[fin];
        var val;
        switch (type) {
          case "SPFieldUser":
            val = item[fin];
            if (val.Name !== undefined) {
              setFieldValue(fin, val.Name);
            }
            break;
          case "SPFieldUserMulti":
            val = item[fin];
            if (val.results !== undefined) {
              val.results.forEach(user => {
                if (user.Name !== undefined) {
                  setFieldValue(fin, user.Name);
                }
              });
            }
            break;
          case "SPFieldLookup":
            val = item[fin + "Id"];
            if (val !== null) {
              setFieldValue(fin, val);
            }
            break;
          case "SPFieldLookupMulti":
            val = item[fin + "Id"];
            setFieldValue(fin, val.results);
            break;
          case "SPFieldMultiChoice":
            val = item[fin];
            if (val !== null && val.results !== undefined) {
              setFieldValue(fin, val.results);
            }
            break;
          case "SPFieldTaxonomyFieldType":
            val = item[fin];
            if (val !== null) {
              setFieldValue(fin, val.Label);
            }
            break;
          case "SPFieldTaxonomyFieldTypeMulti":
            val = item[fin];
            if (val !== undefined && val.results !== undefined) {
              var arr = [];
              val.results.forEach(tax => {
                arr.push(tax.Label);
              });
              setFieldValue(fin, arr);
            }
            break;
          case "SPFieldURL":
            val = item[fin];
            if (val !== null) {
              setFieldValue(fin, val.Url + "," + val.Description);
            }
            break;
          case "SPFieldDateTime":
            val = item[fin];
            if (val !== null) {
              spjs.utility.setDateFieldFromDateObject(fin, new Date(val));
            }
            break;
          default:
            val = item[fin];
            if (val !== null) {
              setFieldValue(fin, val);
            }
            break;
        }
      });
    },
    "error": function (data) {
      console.log(data);
    }
  });
}

Alexander

[Saikia Kashmiri]

THANK you! We’re customizing the code now for our need! Appreciate the customized code : )!

[Kristen Moore]

Hi Alexander,

Quick follow up question related to this code – if 2 of the multi line text fields we want to copy over are configured as cascading drop downs (via the cascading dropdowns tab in DFFS backend), how do we handle the copying over of those fields? Currently they are not getting set. I logged the values to the console and can see the correct values there but those values are not selected in the actual form – the ‘selected options’ boxes for both fields remain blank after autocomplete executes.

[Alexander Bautz]

You might have to remove the cascading dropdown and re-initiate it when the values are set. Read about it here and use the spjs.casc.kill(fin) and then spjs.casc.init({…}) to reapply it after the copy is done.

Alexander

[Kristen Moore]

Thanks for the response! I added the code to remove the cascading dropdown directly above the “arrOfFieldsToPrefill.forEach(fin => {…” code and put the code to reapply the cascading dropdown immediately after the forEach loop. These two fields are both configured as multiselect cascading dropdowns, which I accounted for in the spjs.casc.init() function by appending “:multi” to the FINs for thisListFields array.

The result (after all values are copied over) is that the “Selected options” boxes contain all of the originally selected values concatenated in a single line, delimited by a semicolon and space. The fields get outlined in red with error “The selection “{concatenated string of selected options}” is not valid”.

For example, if the original record had two selected options for cascDDField1: “Apple” and “Banana”, when the values are copied over to the new item, the selected options box contains “Apple; Banana” and is highlighted in red as an error. The available options box still contains both “Apple” and “Banana”.

Is there a way to copy over the selected options so that they are registered as valid selections (moved from available box to selected box and displayed on separate lines without the semicolons)?

Related question: since I reapplied the cascading dropdown via customJS, should I remove the configuration from the Cascading Dropdowns tab in backend? Not sure if it being invoked via the tab and also in the custom code is causing the issue.

[Alexander Bautz]

I think the problem is the default delimiter for multiple values. It is by default “;\r\n”, but this format causes problems.

Try invoking the cascading dropdown manually as described in the user manual here: https://spjsblog.com/dffs/dffs-plugins/spjs-cascading-dropdowns/#Invoke_the_function_manually

and use

"multichoiceDelimiter": ";" + String.fromCharCode(10)

See if that helps.

Alexander

[Author]

Posts