Custom column template

Forms SharePoint Online
1

Hello guys,
I am facing another issue with templating of the column for several libraries on the page. There are 5 to 20 libraries and I need to customize always the same column - it is Name column.

The code is working when I use the column manually, choose it and add it in Plumsail Designer.

fd.spRendered(() => {
  const value = ctx.row;
  const { row, listId, webUrl, rootFolder } = ctx;
  const baseUrl = `https://${window.location.host}${
    webUrl.length > 1 ? webUrl : ""
  }`;
  let formUrl = `${baseUrl}/_layouts/15/listform.aspx?PageType=4&ListId=${listId}&ID=${row.ID}`;

  if (rootFolder) formUrl += `&RootFolder=${encodeURIComponent(rootFolder)}`;
  if (row.ContentTypeId) formUrl += `&ContentTypeID=${row.ContentTypeId}`;
  if (!value) {
    return "";
  }

  // Check if the item is a .url file by checking for the _ShortcutUrl property or extension
  if (row.FileLeafRef.endsWith(".url") && row._ShortcutUrl) {
    // For .url files, make the name clickable and open the link in a new tab
    return `
        <a href="${row._ShortcutUrl}" target="_blank" data-interception="off" style="text-decoration: none;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">
            ${row.FileLeafRef}
        </a>`;
  }

  // For regular documents (PDFs, Word files, etc.), open the document directly using FileRef
  return `
<a href="${row.FileRef}" target="_blank" data-interception="off" style="text-decoration: none;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">
    ${row.FileLeafRef}
</a>`;
});

But I need it this way, programtically:

libraryTitles.map((title) => {
    fd.control(title)
      .ready()
      .then(() => {
        console.log(title);
        fd.control(title).templates = {
          LinkFilename: (ctx) => {
            console.log(ctx);
            const value = ctx.row;
            // console.log(value);
            const { row, listId, webUrl, rootFolder } = ctx;
            const baseUrl = `https://${window.location.host}${
              webUrl.length > 1 ? webUrl : ""
            }`;
            let formUrl = `${baseUrl}/_layouts/15/listform.aspx?PageType=4&ListId=${listId}&ID=${row.ID}`;

            if (rootFolder)
              formUrl += `&RootFolder=${encodeURIComponent(rootFolder)}`;
            if (row.ContentTypeId)
              formUrl += `&ContentTypeID=${row.ContentTypeId}`;
            if (!value) {
              return "";
            }

            // Check if the item is a .url file by checking for the _ShortcutUrl property or extension
            if (row.FileLeafRef.endsWith(".url") && row._ShortcutUrl) {
              // For .url files, make the name clickable and open the link in a new tab
              return `
            <a href="${row._ShortcutUrl}" target="_blank" data-interception="off" style="text-decoration: none;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">
                ${row.FileLeafRef}
            </a>`;
            }

            // For regular documents (PDFs, Word files, etc.), open the document directly using FileRef
            return `
    <a href="${row.FileRef}" target="_blank" data-interception="off" style="text-decoration: none;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">
        ${row.FileLeafRef}
    </a>`;
          },
        };
      });
  });

It looks like it does not execute when I try to console.log something.

Thank you for your help
Stepan

2

Hello @StepanS,

Why are you using map() function? Have you tested the code with forEach() function?

If it won't work, please share the complete code you are using and the screenshot of all errors from the browser console when form loads.

3

Hello @Margo ,

I am mapping the array of libraries stored in array. I have tested it like this:

  const libraryTitles = [
    "libraryPurchasingProductionPlanning",
    "libraryProcurementManagement",
    "libraryIncomingGoods",
    "libraryProductionPlanning",
    "librarySuppliers",
    "libraryPaperTrading",
  ];

libraryTitles.forEach((title) => {
    const library = fd.control(title);

    library
      .ready()
      .then(() => {
        console.log(`Setting template for: ${title}`); // Logs the library title

        library.templates = {
          LinkFilename: (ctx) => {
            const { row, listId, webUrl, rootFolder } = ctx;
            if (!row) return ""; // Early exit if row data is missing
            console.log("Row data:", row); // Log row data for debugging

            const baseUrl = `https://${window.location.host}${
              webUrl.length > 1 ? webUrl : ""
            }`;
            let formUrl = `${baseUrl}/_layouts/15/listform.aspx?PageType=4&ListId=${listId}&ID=${row.ID}`;

            if (rootFolder)
              formUrl += `&RootFolder=${encodeURIComponent(rootFolder)}`;
            if (row.ContentTypeId)
              formUrl += `&ContentTypeID=${row.ContentTypeId}`;

            // Check if the item is a .url file by checking for the _ShortcutUrl property or extension
            if (row.FileLeafRef.endsWith(".url") && row._ShortcutUrl) {
              return `
              <a href="${row._ShortcutUrl}" target="_blank" data-interception="off" style="text-decoration: none;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">
                ${row.FileLeafRef}
              </a>`;
            }

            // For regular documents, open the document directly using FileRef
            return `
            <a href="${row.FileRef}" target="_blank" data-interception="off" style="text-decoration: none;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">
              ${row.FileLeafRef}
            </a>`;
          },
        };
      })
      .catch((error) => {
        console.error(`Error setting up template for ${title}:`, error);
      });
  });

I know there is some additional code with url of the form, which I do not need, but If I add this script to the column specifically, it works. This script added to the JS section in Plumsail Designer, it does not. No errors in browser console.

image
image1523×885 75.2 KB

When I hover over the .url, (when the customizing script is added to the column - it works), it does not work as expected - it "maybe correctly" points to the "Link" itself. Which si not wrong, but I need a different behavior, that's why I want to use this customizer to use:

row._ShortcutUrl

Where the link to the page is stored. I hope I explained it a bit more. Thank you.

Stepan