vLookup

[Rad]

Hi, I am trying to build a form with a dropdown to select from then show related items in a Grid below allowing inline editing on certain fields. I was trying to use vLookup to achieve this. Do you happen to have an example for this setup?

[Rad]

I was able to setup the vLookup but trying to see how to show as a dropdown/grid view layout.

Please see the attached image – col2 will have the values for the dropdown to search from and rest of the columns will need to show in the grid.

Attachments:

1. 

   2025-09-23_11-49-11.png
   

[Alexander Bautz]

In the classic DFFS vLookup you can use custom js to add inline editing as shown in this post: https://spjsblog.com/2019/08/31/vlookup-inline-editing-examples/

Alexander

[Rad]

thanks but how do I get the grid layout in order to display the related items for the search ?

Col2 (this will be the search drop down)

when a user selects an item from above dropdown, the below grid must refresh

col1 col3 col4 col5 col6…

[Rad]

pls ignore the above q, was able figure out the issue.

Diff q-

Tried setting up inline editing using

function edit_inline_multichoice(val, id, listGuid, fin, choices) {}

but getting below error

EditForm.aspx?List=…&ID=2&Source=…/DispForm.aspx%3FID=2&ContentTypeId=0x010040F651B0E5831C449C0AF0A0AD1E0C16:1 Uncaught ReferenceError: toggleEditField is not defined
at HTMLDivElement.onclick (EditForm.aspx?List=…=2&Source=/sites/…/DispForm.aspx%3FID=2&ContentTypeId=0x010040F651B0E5831C449C0AF0A0AD1E0C16:1:1)

[Alexander Bautz]

The function toggleEditField is in the code snippet in the top of the article I linked to – it must be included in the Custom JS of the form where you want to use the functionaltity.

Alexander

[Rad]

got it, thought it was an inbuilt function. Works great, thank you!

[Rad]

sorry a follow up on inline editing. I’ve a a few checkbox fields that need inline editing enabled but wonder if there’s a way to always have the checkbox show regardless of checked or not. Currently, it only shows if value is set.

Attachments:

1. 

   2025-09-24_08-17-09.png
   

[Rad]

so, if unchecked and saved, the checkbox goes away. I would like to have the checkbox always display (checked or not checked).

Attachments:

1. 

   2025-09-24_09-23-50.png
   

[Alexander Bautz]

If you can show me the code you use for this field I’ll take a look – is it a boolean (Yes/No) field?

Alexander

[Rad]

it’s exactly what you’ve in https://spjsblog.com/2019/08/31/vlookup-inline-editing-examples/

function edit_inline_multichoice(val, id, listGuid, fin, choices) {
var dVal = val, arr = val.split(/<br\s*\/?>/i), b = [];
if (dVal === “”) {
dVal = ” “;
}
b.push(“<div style=’white-space:nowrap;’>”);
b.push(“<div class=’vLookupDispWrap’ onclick=’toggleEditField(this);’>”);
b.push(“<span class=’vLookupCurrVal’>” + dVal + ” </span>”);
b.push(“</div>”);
b.push(“<div class=’vLookupEditWrap’>”);
jQuery.each(choices, function (i, v) {
b.push(“<input id=’inline_” + fin + “_” + i + “‘ type=’checkbox’ value='” + v + “‘”);
if (jQuery.inArray(v, arr) > -1) {
b.push(” checked=’checked'”);
}
b.push(“/><label for=’inline_” + fin + “_” + i + “‘>” + v + “</label><br>”);
});
b.push(“<span title=’Save’ style=’cursor:pointer;margin:3px;color:green;font-weight:bold;’ onclick=’saveChangesMultichoice(this,\”” + fin + “\”,\”” + id + “\”,\”” + listGuid + “\”)’>✔</span>”);
b.push(“</div>”);
b.push(“</div>”);
return b.join(“”);
}

function toggleEditField(elm) {
jQuery(elm).hide().next().show();
}

[Rad]

this is how I am calling it:

function edit_inline_obenroll(val, item) {
var fin = “tstenroll”, choices = [“enroll”], id = item.get_item(“ID”);
return edit_inline_multichoice(val, id, listGuid, fin, choices);
}

[Rad]

it’s currently not a yes/no but I can change it to Yes/No if that’ll allow the functionality I am looking for.

Also, wanted to point out something that’s not a big deal but nice to have – when using {“prefix”:”$”} within special config in vLookup tab, it keeps adding additional $ on save. As an example, if I save a value – $4000, the next time i refresh it shows $$4000. It would be nice to have a check if the $ already exists then not to add it.

[Rad]

apologies for multiple messages. I am trying to send as and when I see an issue. Will try to consolidate all next time.

I’ve some additional observations for special config field: the “nullToZero”:true doesn’t seem to work. When i delete an entry from a text field in vlookup it just removes the textbox control and doesn’t convert to 0.

this is how i have it setup
{“prefix”:”$”,”function”:”edit_inline_fn1″,”nullToZero”:true}

[Alexander Bautz]

Hi,
This inline editing is not an “official” solution so it is provided as a starting point for users that want to tinker with it.

I can get you started by showing how you can have it show in edit mode all the time, but the functionality will not be optimal and it will require some more tweaks to work 100%.

Replace the function “edit_inline_multichoice” with this and you should see the checkboxes initially as readonly:

function edit_inline_multichoice(val, id, listGuid, fin, choices) {
    var dVal = val,
        arr = val.split(/<br\s*\/?>/i),
        b = [];
    if (dVal === "") {
        dVal = " ";
    }
    const buildOptions = (readonly) => {
        const buffer = [];
        choices.forEach((v, i) => {
            const inputId = inline_${fin}_${id}_${i}_${readonly ? "readonly" : ""};
            buffer.push(<label><input id='${inputId}' type='checkbox' value='${v}');
            if (arr.includes(v)) {
                buffer.push(" checked='checked'");
            }
            if (readonly) {
                buffer.push(" disabled='disabled'");
            }
            buffer.push("/>" + v + "</label><br>");
        });
        return buffer.join("");
    }
    b.push("<div>");
    b.push("<div class='vLookupDispWrap' onclick='toggleEditField(this);'>");
    b.push(buildOptions(true));
    b.push("</div>");
    b.push("<div class='vLookupEditWrap'>");
    b.push(buildOptions(false));
    b.push(<span title='Save' style='cursor:pointer;margin:3px;color:green;font-weight:bold;' onclick='saveChangesMultichoice(this,"${fin}",${id},"${listGuid}")'>&#x2714;</span>);
    b.push("</div>");
    b.push("</div>");
    return b.join("");
}

If you want to reload the vLookup table after save (to recalculate) you can change the function named “saveInline_vLookupChanges” by adding this line at the bottom (before the closing curly brace):

spjs.vLookup._init("Your_vLookup_field_name",false,true);

Replace “Your_vLookup_field_name” with the actual name of your vLookup field.

Alexander

• This reply was modified 3 months, 3 weeks ago by Alexander Bautz. Reason: Fixed code snippet

[Rad]

thanks, getting an error (for below line) – Unexpected Token {

inline_${fin}_${id}_${i}_${readonly ? “readonly” : “”};

[Rad]

Also, if I I changed the field to Yes/No Checkbox instead of a Choice field, will this function work?

[Alexander Bautz]

It might be an issue with copying the code from my comment – try the attached version.

No, the code will not work for a yes/no field – it would have to be changed as the value on a boolean field (using this kind of code / api) is 0 for no and 1 for yes.

Alexander

Attachments:

1. edit_inline_multichoice.txt

[Rad]

works great! thank you so much! exactly what i needed.

one more q – Is there a code for inline editing for Numeric or Currency field?

I set up few currency fields as single line text in order to use the inline functionality and when using {“prefix”:”$”} within special config for a field, it keeps adding additional $ on save. As an example, $4000 is being saved as $$4000, $$4000 saved as $$$4000 and so on.

Attachments:

1. 

   2025-09-26_12-27-50.png
   

[Rad]

is there a way to hide the checkbox text value “Yes” in the display?

[Alexander Bautz]

The text shown in the field is controlled in the custom function used for enabling the inline editing so you can control what is viewed and saved by changing the corresponding functions.

Just change the code to strip away the $ when enabling editing (or when saving the value).

Alexander

[Rad]

got it, thank you

[Rad]

hopefully this should be my final q around vlookup. Since vLookup renders as a table, is there a way to draw boxes around a group fields. For example, if I have 9 columns/fields. I would like to group them into 3 ad draw box around them or have title for each of the 3 groups.

I figured how to draw a borders around the vLookup table itself sing below code but need to group the fields now.

#sbs_FieldTable_MyvLookupTable {
border-top: 3px solid navy !Important;
border-radius: 5px !important;
border-left: 3px solid navy !Important;
border-right: 3px solid navy !Important;
}

[Alexander Bautz]

Not sure exactly what you mean – can you add a screenshot as an attachment (or email it to me) where you have marked the sections you want to add the border around?

Alexander

[Rad]

i would like to show some king of border to separate groups of 3 fields and have a Title on top like shown in the img.

Also, how do I change the background color of checkboxes in the vLookup from red to blue?

Tried below code for borders on right but didn’t work.

#dffs_vLookup_myVLookup table td:nth-child(2),
#dffs_vLookup_myVLookup table td:nth-child(3) {
border-right: 3px solid #444;
}

Attachments:

1. 

   2025-10-01_14-15-30.png
   

[Rad]

i was able to figure out to draw borders around groups. Now I just need to know how to change checkbox background from red to blue.

[Alexander Bautz]

You can style the background color like this in Custom CSS:

.childTableCell input[type='checkbox'] {
    accent-color: blue;
}

[Rad]

perfect, thank you!

[Rad]

sorry one more layout issue- the save checkmark appears on the right side for text boxes but it displays below for check box. I need them aligned on the right side like the textboxes.

Attachments:

1. 

   2025-10-02_13-18-43.png
   

[Alexander Bautz]

You must use CSS on the HTML element wrapping the checkbox and the checkmark. Try either white-space:nowrap or display:flex.

Alexander

[Rad]

i did already try those but won’t work

[Alexander Bautz]

Edit your Custom CSS and add this declaration to both .vLookupEditWrap and .vLookupDispWrap

white-space:nowrap;

[Rad]

didn’t work

[Alexander Bautz]

Can you show me your function (edit_inline_multichoice if you still use the multichoice field) and your Custom CSS?

Alexander

[Rad]

function edit_inline_multichoice(val, id, listGuid, fin, choices) {

var dVal = val,

arr = val.split(/<br\s*\/?>/i),
b = [];
if (dVal === “”) {
dVal = ” “;
}

const buildOptions = (readonly) => {
const buffer = [];
choices.forEach((v, i) => {
const inputId = inline_${fin}_${id}_${i}_${readonly ? "readonly" : ""};
buffer.push(<label><input id='${inputId}' class='cbDispWrap' type='checkbox' value='${v}');
if (arr.includes(v)) {
buffer.push(” checked=’checked'”);

}
if(!spjs.dffs.data.isDispForm) {
buffer.push(” disabled=’disabled'”);
b.push(“<div class=’vLookupDispOnly’>”)
}
buffer.push(“/>” + “” + “</label><br>”);

});

return buffer.join(“”);
};
b.push(“<div>”);
if(spjs.dffs.data.isDispForm){b.push(“<div class=’vLookupDispWrap’ onclick=’toggleEditField(this);’>”);};
b.push(buildOptions(true));
b.push(“</div>”);
b.push(“<div class=’vLookupEditWrap’ style=’white-space:nowrap’ display=’flex’;>”);
b.push(buildOptions(false));
b.push(<span title='Save' style='cursor:pointer;margin:5px;color:green;font-weight:bold;' onclick='saveChangesMultichoice(this,"${fin}",${id},"${listGuid}")'>✔</span>);
b.push(“</div>”);
b.push(“</div>”);

return b.join(“”);
}

.vLookupDispOnly{
padding-left:1.1em;
cursor:pointer;
width:100%;
box-sizing:border-box;
/* white-space: normal; */
white-space:nowrap;
color: gray;

}

.vLookupDispWrap{
padding-left:1.1em;
padding-right:1.1em;
cursor:pointer;
width:100%;
box-sizing:border-box;
/* white-space: normal; */
white-space:nowrap;

}

[Alexander Bautz]

I have attached the function I tested with – there are some differences between the one you have and mine. The format of your code was a bit corrupted so if you need to post code, just save it in a .txt file and add it as an attachment.

Try the attached version and see if it makes any difference.

Alexander

Attachments:

1. edit_inline_multichoice_091025.txt

[Rad]

perfect, this code seems to have fixed the issue. thank you so much

[Alexander Bautz]

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

Alexander

[Rad]

q regarding vLookupIds – if I bulk loading recs, do the LookupIds need to be in the DFFS format or can it be a GUID?

[Alexander Bautz]

I think that should be OK as long as the ID is unique.

[Rad]

hi, is there a limit for vLookup, like how many records can be associated to the parent and or how many can display?

[Alexander Bautz]

Not really, but this being SharePoint it will start making it difficult if the list has more than 5000 items when you try to filter items. Index the fields you want to use as the connection between the two lists and it should be OK.

Alexander

[Rad]

Hi again, how do I reference an item in fld1 in a vLookup, corresponding to the item being edited in fld3?

vlookup
fld1 fld2 fld3

[Alexander Bautz]

You must get the value using code like this:

const row = document.querySelector("#vLookupTableRow_vLookupTasks_301");
if(row !== null){
    const field = row.querySelector(".vLookupTasks_Number");
    if(field !== null){
        const val = field.innerText;
        console.log(val);
    }    
}

Use the developer tools to inspect the table TR and TD to see the format of the id as it uses both the internal name of the vLookup, the item ID and the internal name of the field.

Alexander

[Rad]

for some reason, the logic const row = document.querySelector… returns a null although the element id does exist. See attaced screenshot.

Attachments:

1. 

   2025-11-12_07-34-36.png
   

2. 

   2025-11-12_07-33-17.png
   

[Alexander Bautz]

Strange. Are you running the query in the console, or in custom js?

If you run it in the console you must ensure the devtools are connected to the correct context (if you open the vLookup in a dialog).

Alexander

[Rad]

custom js

[Rad]

I am in debug mode and stepping through the code so it’s connected

[Alexander Bautz]

And the custom js is in the “parent” form and not the “child” form?

If so, you might have to wrap the code in a function to only run it after the vLookup table has been rendered on the page. See the user manual her: https://spjsblog.com/vlookup-for-sharepoint/vlookup-user-manual/#vLookupIsLoadedCallback

Alexander

[Alexander Bautz]

Yes, but is the vLookup table showing on the form when you step through the code?

Email me some screenshots so I can see what you see on the screen.

Alexander

[Rad]

ah, its not. it’s in the refresh mode

[Rad]

got it working now. thank you!

[Rad]

Hi, the vLookup grid was working fine until today when i users are seeing the threshold error. What’s causing this and how can I resolve it?

Attachments:

1. 

   2026-01-21_07-43-01.png
   

[Alexander Bautz]

You must index (in list settings) the field used as filter on the vLookup config.

Alexander

[Rad]

thank you, that resolved it

[Author]

Posts