Multi value lookup field as table in display form


#1

Hello community,
is it possible to format a lookup field (multi value) as a table with extra fields in the display form?
Maybe like this:
| Title | Extra Field 1 |
| Title 1 | Value 1 |
| Title 2 | Value 2 |
It would be great if there is a way to do it.
Thank you in advance


#2

Dear Felix,

Sure, why not? :smile:

  1. You can gain access to the Lookup data by this code:fd.field("Lookup").widget.dataSource.data(), where “Lookup” is an internal name of your Lookup field.

  2. You can populate the data table by this code: fd.control("DataTable0").widget.setOptions({dataSource:[{Column0: "Jane"},{Column0:"Ed"}]}): https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/datasource

Notice that you should replace “DataTable0” with the internal name of your data table and “Column0” with the internal name of your column.

  1. You can form a data array from the Lookup data and pass it to the data source of the data table as shown above.

To have access to “fd” in the browser console, add this code in the JavaScript Editor: window.fd = fd;.

If you have any question about implementation - feel free to ask!


#3

Hello Alex,
thank you for your answer. I am trying to accomplish your suggestion but a have some problems with it.
The widget member seems to be null/undefined.
This is my code:
fd.spRendered(function() { console.log(fd.field("abbreviations")); DSabbr = fd.field("abbreviations").widget.dataSource; console.log(DSabbr); fd.control("DTabbreviations").widget.setOptions({dataSource:DSabbr}); });

This is the error message:
Cannot read property ‘dataSource’ of null

Do you have an idea what the problem ist?
Thank you in advance

Felix


#4

Dear Felix,

Most probably the issue is that the Lookup field is not rendered yet - use “ready()” event handler to guarantee that the Lookup field is ready: https://plumsail.com/docs/forms-sp/javascript/fields.html#events


#5

Hello Alex,

you are right. The widget was not loaded yet.
It works now in edit form. In display form there seems to be no widget object (is undefined and the ready method is not called).
Is it possible to access not just the LookupValue but additional fields in the target list as it works in the edit form?


#6

I finally managed it with the help of pnp webservices: The script looks like this:

fd.spRendered(function() {
$(fd.field(‘abbreviations’).$parent.$el).hide();
fd.control(“DTabbreviations”).widget.setOptions({dataSource:[]});
var abbrIDs = fd.field(“abbreviations”).value;
for (var i = 0; i< abbrIDs.length; i++) {
pnp.sp.web.lists.getByTitle(“abbreviations”).items.getById(abbrIDs[i].LookupId).get().then(function (item) {
fd.control(“DTabbreviations”).widget.dataSource.data().push({abbreviation:item.abbreviation,meaning:item.meaning});
});
}
});


#7

Dear Felix,

Really good solution, nice work! Thank you for contributing to community.