Posted on:
Categories: SharePoint

​SharePoint 2013 introduced Content By Search web part (CSWP) that leverages the power of search and display template to show dynamic content in a formatted fashion. One of the many uses is to roll up list items across your lists and/or sites.

For a list or library, there is an option to launch new, edit and display forms in a dialog. The option is available at List/Library Settings > Advanced Settings > Dialog. What if we want to do the same for items returned by CSWP?

Within your custom display template, add the following javascript before rendering of item html:

EnsureScriptFunc("sp.ui.dialog.js", "SP.UI.ModalDialog.showModalDialog", null);

In the item html, modify the link as follows:

<a … onclick="javascript:SP.UI.ModalDialog.showModalDialog({ url: '_#= linkURL =#_', title: '_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_' }); return false;" … >_#= line1 =#_</a>

Now when you click on a result item returned by CSWP, the item form should show up in a modal dialog.