Problem displaying of list item detail from the pnp search results in a popup / modal / iframe

[agpldev]

Hell all,

I have deployed a standard pnp modern search set up using v4.13.1.0. Searches and other out of the box all works fine; it would be great if fuzzy searches were built in or KQL allowed wildcard prefixes (e.g. a search for "*bank"), but that's a story for another day.

TL;DR

I need to display the details of items in the search results list, preferably in an area to the side of or below the search results, rather than in the same window or by opening a new tab, similar to the image / mockup below.

I saw a vague mention of a custom webpart being a solution, but not clear on that approach.

The details

Business requirement

1. Allow selection of the layout of the results based on user preference e.g. card, list, etc.
2. Configure the detailed item to appear in one of the following formats when viewing/editing:
   2.1. Open in a modal
   2.2. Open in a new pop-up window using window.open(listItemUrl)
   2.3. Display in an iframe webpart on the same page

I have tried several approaches to this and can't seem to get it working. What common to all approaches is that I am using Javascript events i.e. onclick to manage the task.

I have tried several variations of the following, which has been stripped back for debugging - adding this modified href detail to the Managed column layout:

` {{slot item @root.slots.Title}} ` ` {{slot item @root.slots.Title}} `

View

{{slot item @root.slots.Title}}

Problem

1. SampleHTML1: The link continues to open the target URL in a new tab without logging anything to the console. On closer inspection in the devtools, it appears the content is being stripped out leaving the following span:

<span><style></style><a data-interception="off" style="color: #03787c" href="https://27ccl7.sharepoint.com/sites/DWFCRM/Lists/CRM People/DispForm.aspx?ID=12" tabindex="-1"> Miles Miller [ABC Research Institute] </a></span>

2. SampleHTML2: Changing to 'href="#"' results in an error that seems to point further to pnp search extracting recognised / preferred elements from the managed column value elements and in this instance fails to find something relevant to an actual href, so throws a:

modern-search-filters-web-part_d374ae734c5e9718eb50.js:2 Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML') at t.<anonymous> (modern-search-filters-web-part_d374ae734c5e9718eb50.js:2:1288746) ......

3. SampleHTML3: Using a DIV and BUTTON approach to avoid the issues in 2, we still see the same issues with javascript event elements stripped off the DIV and BUTTON elements.

Appreciate your feedback / assistance in advance.

[agpldev]

One more thing to include ... I see a pop-up approach suggested here: https://medium.com/@tempmailwithpassword/how-to-open-links-in-a-popup-window-in-pnp-modern-search-webpart-sfx-777bf55cbc39 which I have not been able to get to work, either.

[kasperbolarsen]

Is you trying something like here, https://medium.com/@tempmailwithpassword/how-to-open-links-in-a-popup-window-in-pnp-modern-search-webpart-sfx-777bf55cbc39 ?
Please note the comment on the post by Mikael Svenson, that scripts are stripped from the templates

[agpldev]

Hi Kasper, Thank you for the response. I did have a look at that article and having tried it was not able to get it to work. I think I missed the bit abut stripping scripts. Thanks for pointing that out. Let me have another look at that. Much appreciated. Kind regards, Paul

…

________________________________ From: Kasper Larsen ***@***.***> Sent: Sunday, October 27, 2024 11:54:50 AM To: microsoft-search/pnp-modern-search ***@***.***> Cc: Annatis Group Dev ***@***.***>; Author ***@***.***> Subject: Re: [microsoft-search/pnp-modern-search] Problem displaying of list item detail from the pnp search results in a popup / modal / iframe (Discussion #4069) Is you trying something like here, ***@***.***/how-to-open-links-in-a-popup-window-in-pnp-modern-search-webpart-sfx-777bf55cbc39 ? Please note the comment on the post by Mikael Svenson, that scripts are stripped from the templates — Reply to this email directly, view it on GitHub<#4069 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/APM3G57OA2JT3TKCFZJ3ICTZ5SS5VAVCNFSM6AAAAABQUXLEIKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMBWGUZDENI>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[agpldev]

I've spent some time on this and I do see the stripping mentioned in the comment by Mikael Svenson. I created a webpart (no framework) to work on a custom solution for this. Interestingly, seeing issues with window.onload not triggering scripts even for a basic console.log(). Now looking at alternatives for updating the click behaviour. Will share what I find. If anyone has any ideas, please share.

At the moment, custom webpart loads with some custom javascript once the page loads (or some sort of interval timer checking for the presence of a structure) the elements with a pre-defined property, e.g. data-popup="true", have their click event behaviour modifoed to open a pop-up or modal or updating an embeded iframe's src.