Show additional information on multilookup items in DispForm

[Alexander Bautz]

This is a quick solution if you like to show additional information on a multi lookup field in DispForm of an item, but doesn’t like the look you get by adding this info with “Add a column to show each of these additional fields” in the list setting for this field.

Add this to your DispForm Custom JS and change the field names to match

jQspjs("#dffs_YOUR_LOOKUP_FIELD_INTERNAL_NAME .ms-formbody a").each(function (i, a) {
    var id = GetUrlKeyValue("ID", false, a.href);
    var listId = GetUrlKeyValue("ListId", false, a.href);
    var item = spjs.utility.getItemByID({
        "listName": listId,
        "id": id,
        "viewFields": ["Title", "ProjectNumber", "Created"]
    });
    var title = item.Title;
    if(title === null){
        title = "[empty]";
    }
    var ProjectNumber = item.ProjectNumber;
    if(ProjectNumber === null){
        ProjectNumber = "[empty]";
    }
    var created = item.Created;
    if(created === null){
        created = "[empty]";
    }else{
        created = new Date(item.Created.split(" ").join("T")).toLocaleDateString();
    }
    var b = [];
    b.push("Title: " + title);
    b.push("Project number: " + ProjectNumber);
    b.push("Created: " + created);
    jQuery(a).append("<div>" + b.join("<br>") + "</div>");
});
// Separate each item
jQspjs("#dffs_YOUR_LOOKUP_FIELD_INTERNAL_NAME .ms-formbody").contents().filter(function () {
    return (this.nodeType === 3 && this.nodeValue === "; ");
}).replaceWith("<hr>");

Alexander

• This topic was modified 3 years, 10 months ago by Alexander Bautz. Reason: Clarified the code and checked all values for null with a proper if-else and not a shorthand if for better readability
• This topic was modified 3 years, 10 months ago by Alexander Bautz. Reason: Fixed / in closing div tag

[MikeS]

I keep getting a field value of NULL returned for the Related Fields, or an error message to that effect.

My script:
`jQspjs(“#dffs_TNLookup .ms-formbody a”).each(function (i, a) {
var id = GetUrlKeyValue(“ID”, false, a.href);
var listId = GetUrlKeyValue(“ListId”, false, a.href);
var item = spjs.utility.getItemByID({
“listName”: listId,
“id”: id,
“viewFields”: [“TNLookup_x003a_TNDecision”,”TNLookup_x003a_TNPOC”,”TNLookup_x003a_TNDate”]
});
var b = [];
b.push(“<br>TNDecision: ” + item.TNLookup_x003a_TNDecision);
b.push(“TNPOC: ” + (item.TNLookup_x003a_TNPOC !== null ? item.TNLookup_x003a_TNPOC : “”));
b.push(“TNDate: ” + new Date(item.TNLookup_x003a_TNDate.split(” “).join(“T”)).toLocaleDateString());
jQuery(a).append(b.join(“<br>”));
});
// Separate each item
jQspjs(“#dffs_TNLookup .ms-formbody”).contents().filter(function () {
return (this.nodeType === 3 && this.nodeValue === “; “);
}).replaceWith(“<hr>”);’

Screen shots are attached.

Thanks for your help. The UI looks like it will work fine once this is resolved.
Mike

• This reply was modified 3 years, 10 months ago by MikeS.

Attachments:

1. 

   Change-Request-list.png
   

2. 

   Ticket-List.png
   

3. 

   Change-Request-Display-form.png
   

[Alexander Bautz]

You are not supposed to use the internal name of the “additional lookup field”, but the actual internal name of the field that you previously used the “additional lookup field” to pull in – most likely the fields you are looking for is “TNDate”, “TNDecision” and “TNPOC”.

Alexander

[MikeS]

Revised JS

`jQspjs(“#dffs_TNLookup .ms-formbody a”).each(function (i, a) {
var id = GetUrlKeyValue(“ID”, false, a.href);
var listId = GetUrlKeyValue(“ListId”, false, a.href);
var item = spjs.utility.getItemByID({
“listName”: listId,
“id”: id,
“viewFields”: [“TNDecision”,”TNPOC”,”TNDate”]
});
var b = [];
b.push(“<br>TNDecision: ” + item.TNDecision);
b.push(“TNPOC: ” + (item.TNPOC !== null ? item.TNPOC : “”));
b.push(“TNDate: ” + new Date(item.TNDate.split(” “).join(“T”)).toLocaleDateString());
jQuery(a).append(b.join(“<br>”));
});
// Separate each item
jQspjs(“#dffs_TNLookup .ms-formbody”).contents().filter(function () {
return (this.nodeType === 4 && this.nodeValue === “; “);
}).replaceWith(“<hr>”);’

Gives me this error in the Display form when launching

DFFS: There is an error in the Custom JS textarea:
*************************************
TypeError: item.TNDate is null
*************************************
Please enter setup and revise.

The Display form then has incorrect formatting as shown in attached screen shot.

Mike

Attachments:

1. 

   Change-Request-Display-form-UPDATE.png
   

[Alexander Bautz]

If you are not 100% sure the TNDate field is filled in all items you must check if it is null before running the new Date function – something like this:

b.push("TNDate: " + item.TNDate !== null ? new Date(item.TNDate.split(" ").join("T")).toLocaleDateString() : "");

Alexander

[MikeS]

There could be multiple items with one of more blank (empty) Related Fields. For example the TNDate field could be empty on one or all Lookups. I’m fine with testing for that, but still getting error on form load (TypeError: item.TNDate is null) and no <hr> break between records with multiple lookups.

A single lookup with empty Related Fields displays fine.

Script:
jQspjs(“#dffs_TNLookup .ms-formbody a”).each(function (i, a) {
var id = GetUrlKeyValue(“ID”, false, a.href);
var listId = GetUrlKeyValue(“ListId”, false, a.href);
var item = spjs.utility.getItemByID({
“listName”: listId,
“id”: id,
“viewFields”: [“TNDecision”,”TNPOC”,”TNDate”]
});
var b = [];
b.push(“<br>TNDecision: ” + (item.TNDecision !== null ? item.TNDecision : “”));
b.push(“TNPOC: ” + (item.TNPOC !== null ? item.TNPOC : “”));
b.push(“TNDate: ” + item.TNDate !== null ? new Date(item.TNDate.split(” “).join(“T”)).toLocaleDateString() : “”);
jQuery(a).append(b.join(“<br>”));
});
// Separate each item
jQspjs(“#dffs_TNLookup .ms-formbody”).contents().filter(function () {
return (this.nodeType === 4 && this.nodeValue === “; “);
}).replaceWith(“<hr>”);

Mike

[Alexander Bautz]

I have updated the original code snippet to clarify the check for null-values. Please check it out and let me know if you still have problems.

Alexander

[MikeS]

Much better! This will work.

One issue: I have field names that start with numeric values, e.g., 123Date, and the script throws an error in the CustomJS box. Is there a way to escqpe such fields in the script? Changing field names is not an option.

UI thing: the <hr> hardly shows up between records. Original script had a dark line.

Thanks,
Mike

[Alexander Bautz]

If your internal name has numbers you must write it like this:

var ProjectNumber = item["123ProjectNumber"];

To style the hr just change it like this:

<hr style='border-top: 2px #000000 solid;'>

Alexander

[MikeS]

I keep getting an [empty] date returned with this mod. See screen shot.

Script:

jQspjs(“#dffs_TNLookup .ms-formbody a”).each(function (i, a) {
var id = GetUrlKeyValue(“ID”, false, a.href);
var listId = GetUrlKeyValue(“ListId”, false, a.href);
var item = spjs.utility.getItemByID({
“listName”: listId,
“id”: id,
“viewFields”: [“TNDecision”,”TNPOC”,”123Date”]
});
var TNDecision = item.TNDecision;
if(TNDecision === null){
TNDecision = “[empty]”;
}
var TNPOC = item.TNPOC;
if(TNPOC === null){
TNPOC = “[empty]”;
}
var Date123 = item[“123Date”];
if(Date123 === null){
Date123 = “[empty]”;
}else{
Date123 = new Date(item[“123Date”].split(” “).join(“T”)).toLocaleDateString();
}
var b = [];
b.push(“TNDecision: ” + TNDecision);
b.push(“TNPOC: ” + TNPOC);
b.push(“123Date: ” + Date123);
jQuery(a).append(“<div>” + b.join(“<br>”) + “/<div>”);
});
// Separate each item
jQspjs(“#dffs_TNLookup .ms-formbody”).contents().filter(function () {
return (this.nodeType === 3 && this.nodeValue === “; “);
}).replaceWith(“<hr>”);

One other thing: I had to remove the ‘/’ before the closing div or it would appear in the UI. Doesn’t seem like a good work-around due to markup standards. You can see the ‘/’ in the attached screen shot.

Mike

Attachments:

1. 

   Change-Request-Display-form-UPDATE2.png
   

[Alexander Bautz]

I have fixed the \ in the closing div tag – it was in the wrong place.

The [empty] return value most likely occurs because the internal name of the field is not right – go to the list and ensure it is correct.

To see the data returned from the query you can add a console.log here:

var item = spjs.utility.getItemByID({
"listName": listId,
"id": id,
"viewFields": ["TNDecision","TNPOC","123Date"]
});
console.log(item);

You must open up the dev tools by hitting F12 to see the output – expand it and look at the returned data.

Please note that the console.log must be removed when you are done debugging.

Alexander

[MikeS]

The console log query placed in the Display form Custom JS (same place I have the script above) returns the following:

ReferenceError: listId is not defined.

Mike

[Alexander Bautz]

The listId parameter is attempted pulled from the href attribute on the link, but maybe your link is different than mine in Office 365. Try changing this line:

var listId = GetUrlKeyValue("ListId", false, a.href);

to this:

var listId = "Display name of your list";

Alexander

[MikeS]

I have done more testing and added back in a Date field without the numeric prefix. That works fine. See script and screen shot.

However the Date field with the numeric prefix seems to be the issue. FIN has been checked. Still can’t get the console.log script to run w/o error even with the replaced line in the script.

Is there another way to characterize the numeric date FIN in the script?

jQspjs(“#dffs_TNLookup .ms-formbody a”).each(function (i, a) {
var id = GetUrlKeyValue(“ID”, false, a.href);
var listId = GetUrlKeyValue(“ListId”, false, a.href);
var item = spjs.utility.getItemByID({
“listName”: listId,
“id”: id,
“viewFields”: [“TNDecision”,”TNPOC”,”TNDate”,”123Date”]
});
var TNDecision1 = item.TNDecision;
if(TNDecision1 === null){
TNDecision1 = “[empty]”;
}
var TNPOC1 = item.TNPOC;
if(TNPOC1 === null){
TNPOC1 = “[empty]”;
}
var TNDate1 = item.TNDate;
if(TNDate1 === null){
TNDate1 = “[empty]”;
}else{
TNDate1 = new Date(item.TNDate.split(” “).join(“T”)).toLocaleDateString();
}
var Date123 = item[“123Date”];
if(Date123 === null){
Date123 = “[empty]”;
}else{
Date123 = new Date(item[“123Date”].split(” “).join(“T”)).toLocaleDateString();
}
var b = [];
b.push(“TNDate: ” + TNDate1);
b.push(“TNDecision: ” + TNDecision1);
b.push(“TNPOC: ” + TNPOC1);
b.push(“123Date: ” + Date123);
jQuery(a).append(“<div>” + b.join(“<br>”) + “</div>”);
});
// Separate each item
jQspjs(“#dffs_TNLookup .ms-formbody”).contents().filter(function () {
return (this.nodeType === 3 && this.nodeValue === “; “);
}).replaceWith(“<hr>”);

Attachments:

1. 

   Change-Request-Display-form-UPDATE3.png
   

[Alexander Bautz]

I tried to create a field named 123Date and SharePoint changed the internal name to _x0031_23Date.

Go to the list settings of the list where this field is added, click the field and look at the URL to find the internal name like this:

&Field=_x0031_23Date

Is it prefixed like mine with _x003?

Alexander

[MikeS]

Yes. That was the issue and I had forgot to check that. The script works great now! Thanks for your help.
Mike

[Alexander Bautz]

Great! – I’m glad we got this sorted out.

Alexander

[MikeS]

How could I add formatting (e.g., bold or font-size) to one of the displayed fields? That would help the lookup field stand out from the related fields.

Thanks
Mike

[Alexander Bautz]

You just use regular HTML / CSS like this:

b.push("<div style='font-size:14px;font-weight:bold;'>TNPOC: " + TNPOC1 + "</div>");

Alexander

[MikeS]

That script change adds a line break for some reason (see attached screenshot).

How could I format the main lookup field (TNLookup), e.g., in this line:
jQspjs(“#dffs_TNLookup .ms-formbody a”).each(function (i, a) {

or this line (not sure where the style commands should go):
jQspjs(“#dffs_TNLookup .ms-formbody”).contents().filter(function () {

Thanks,
Mike

Attachments:

1. 

   Change-Request-Display-form-UPDATE4.png
   

[Alexander Bautz]

Sorry, I forgot that the new lines already were joined by a line break <br> – the div tag is a block element (creating a new line) – change it for a span tag instead.

To style the original element you can try changing this line:

jQuery(a).append("<div>" + b.join("<br>") + "</div>");

like this:

jQuery(a).css({"font-style": "bold", "font-size": "14px"}).append("<div>" + b.join("<br>") + "</div>");

Please note that this style will by default be applied to all new lines inside the a tag, but if you add individual styles to the other additional lines you can style these individually.

Alexander

[MikeS]

Alexander,

I would like to write the Associated Fields, e.g., ProjectNumber, into another single-line plain text field for DFFS email purposes. The ProjectNumber FIN is of the format “YOUR_LOOKUP_FIELD_INTERNAL_NAME_x003a_ProjectNumber”.

The Lookup Field is a multi-value lookup so more than one associated field is returned. All of them should appear in the Edit form in the single-line text field when the form loads (and Lookup Fields have been chosen). This will allow the user to edit this field and choose the desired ProjectNumber for the subsequent email.

How could I do that?

Thanks,
MikeS

[Alexander Bautz]

This code is only for DispForm – have you looked at this solution for NewForm / EditForm?

You find information about writing the value to a separate field in the comments.

Alexander

[MikeS]

Thanks for reminding me of that solution. Works great once again.

MikeS

[Author]

Posts