I am working on a custom action in the item_commonhoverpanel_actions display template that links to the item properties (dispform.aspx) of the item. So far it's working, however I would like to show the item properties in a modal dialog through the onclick event. So far I am not able to get this done. Below is my code that adds a custom action to the hover panel.

<!--#_ var viewDocumentUrl = ctx.CurrentItem.ParentLink;
viewDocumentUrl = viewDocumentUrl.replace("AllItems.aspx","");
var viewDocumentHtml = String.format('<a href="{0}DispForm.aspx?id={1}" title="{3}">VIEW PROPERTIES</a>',
                                                $htmlEncode(viewDocumentUrl), $htmlEncode(ctx.CurrentItem.ListItemID), $htmlEncode(ctx.CurrentItem.Title));

Now what I would like to do is add an onlick="show modal dialog". I can't find a solution to this. Is it even possible to place an onclick within a String.format? I am not a javascript expert so any help is appreciated.



You can use SharePoint's SP.UI.ModalDialog to achieve your goal. You can read about it further here.


function redirectToURL()
    //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";


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

<button onclick="redirectToURL()">Redirect me</button>

In the url option you can pass the url of the display form you are trying to redirect the user to.

| improve this answer | |
  • I have tried this, but it doesn't work. Where should I implement this code? Can I put it in the onclick event of the link that I am building? – KevinvG Jul 10 '15 at 14:07
  • Write that in a function, and then call the function from button click. I'll update my answer :) – Taran Goel Jul 10 '15 at 14:12
  • thnx, this helped! – KevinvG Jul 12 '15 at 19:33
<button onclick="javascript:popup(); return false;">Modal</button>

function popup(){
            url: "URL of List", 
            title: "Title of page", 
            allowMaximize: true, 
            showClose: true, 
            width: 850, 
            height: 600, 
            dialogReturnValueCallback: newCallback 
function newCallback(dialogResult, returnValue) { 
| improve this answer | |
  • thanks @Keerthi, but where do I have to place this? – KevinvG Jul 10 '15 at 14:08
  • There are couple of ways you can do this. Include a script editor web part and paste the code into it or just follow the steps described here - sharepoint.stackexchange.com/questions/147255/… – Keerthi Jul 10 '15 at 14:12
  • thnx, this helped me as well! – KevinvG Jul 12 '15 at 19:33

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.