1

Like the following site I have a content search web part with events, When i click the link I want a pop up to happen and I am unsure how i can accomplish this I have

Using the DialogOptions class.

var options = SP.UI.$create_DialogOptions();

options.title = "My Dialog Title";
options.width = 400;
options.height = 600;
options.url = "/_layouts/DialogPage.aspx";

SP.UI.ModalDialog.showModalDialog(options);

//Using a generic object.
var options = {
    title: "My Dialog Title",
    width: 400,
    height: 600,
    url: "/_layouts/DialogPage.aspx" };

SP.UI.ModalDialog.showModalDialog(options);

as an approach but not sure how to properly use it... the site I saw using it is http://glenview.il.us/

I want my site to do exactly what their events does when each are clicked!

1

Items displayed in a Content Search web part is controlled by the chosen display template in the web part properties.

To make the results open in a modal dialog, go to the site collection where the web part is > site settings > Master pages and page layouts > Display templates > Content Web Parts.

Download a copy of the display template HTML file that you are using to display your data, for example Item_TwoLines.html

Open the display template in any text editor ( notepad or notepad++ ).

Begin with changing line 3 so that you know which one is your custom display template, for example <title>Two lines Custom</title>

Then replace the following value on line 67 ( Item-TwoLines.html. )

<a class="cbs-Line1Link ms-noWrap ms-displayBlock" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= line1LinkId =#_">_#= line1 =#_</a>

to

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

Save your custom Display template as Item_TwoLinesCustom.html as an example. Upload the file to the same place where you downloaded it. Then a javascript ( .js file ) file should be created with the same name. Make sure that you publish the html file that you uploaded.

Go back to the site where your content search web part is and edit the web part, you should now be able to set your custom template "Two lines Custom" as the Display Template to use. Select it and save the page. When clicking on a result, it should now open in a dialog.

1
  • works like a charm for me! – Patrick Jan 27 '16 at 7:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.