Show additional information on multilookup items in DispForm

Forums Dynamic Forms for SharePoint Show additional information on multilookup items in DispForm

Viewing 20 reply threads
  • Author
    Posts
    • #30452
      Alexander Bautz
      Keymaster

      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 4 months, 2 weeks 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 4 months, 2 weeks ago by Alexander Bautz. Reason: Fixed / in closing div tag
    • #30472
      MikeS
      Participant

      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 4 months, 2 weeks ago by MikeS.
    • #30481
      Alexander Bautz
      Keymaster

      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

    • #30483
      MikeS
      Participant

      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

    • #30486
      Alexander Bautz
      Keymaster

      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

    • #30488
      MikeS
      Participant

      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

    • #30491
      Alexander Bautz
      Keymaster

      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

    • #30493
      MikeS
      Participant

      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

    • #30495
      Alexander Bautz
      Keymaster

      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

    • #30497
      MikeS
      Participant

      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

    • #30501
      Alexander Bautz
      Keymaster

      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

    • #30503
      MikeS
      Participant

      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

    • #30505
      Alexander Bautz
      Keymaster

      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

    • #30508
      MikeS
      Participant

      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>”);

    • #30544
      Alexander Bautz
      Keymaster

      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

    • #30562
      MikeS
      Participant

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

    • #30568
      Alexander Bautz
      Keymaster

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

      Alexander

    • #30588
      MikeS
      Participant

      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

    • #30593
      Alexander Bautz
      Keymaster

      You just use regular HTML / CSS like this:

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

      Alexander

    • #30600
      MikeS
      Participant

      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

    • #30603
      Alexander Bautz
      Keymaster

      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

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