List/Library Lookup Column Redirect

Forms
1

Hello. I’m not sure how to accomplish what I need after trial/error and looking here and in the documentation.

I am using Site Pages in SP to show forms in new/edit/display mode using Form Webparts. On ~/SitePages/Contacts.aspx I have a List/Library control for my contacts. One of the columns is a lookup to another list (Matters). The column itself is named relatedMattersLookup.

The normal SP behavior is when a user clicks on the Lookup link it will send you to the standard SP list page to display the form.

However, I have other Site Pages and want to redirect to one of them. So, when a user clicks on an item inrelatedMattersLookup I want them to be redirected to the display form under `~/SitePages/Matters/Details.aspx for that lookup but cannot figure out how to get the ID of the actual related matter so that I can append ?item=[ID#] to the link.

I already have a Forms WebPart on ~/SitePages/Matters/Details.aspx set to receive the ID (and it is working in redirects I already have in place).

Currently, to disable the standard SP functionality, I have this JS on the form:

/* === Disable Link for relatedMattersLookup Column === */
fd.control('ContactsList').templates = { 
     relatedMattersLookup: function(ctx) {
     var value = ctx.row.relatedMattersLookup;
     if (!value) {
          return '';
     }
     return value.map(function(v) {
          return v.lookupValue;
     })
}
};

But I would rather have the page open up at ~/SitePages/Matters/Details.aspx.

Appreciate in advance any help. Thank you.

2

Sorry! I made a mistake in how I applied a solution.

In the List/Library control’s Custom Template Properties dialog I used the following to get this to work (for anyone else needing similar functionality):

// relatedMattersLookup Column Hyperlink
let sitePath = '[My Site Page URL]';
let value = ctx.row.relatedMattersLookup;
if (!value) {
     return '';
}
return value.map(v => {
     return '<a href="' + sitePath + '?item=' + v.lookupId + '">'+ v.lookupValue + '</a>';
}).join(', ');