How to open form in dialog from Title link but not default

Hi, I managed to open forms in dialogs from lookups field. I followed this tutorial: Customize view of columns in List or Library — SharePoint forms (plumsail.com).

Now, I want to do the same but for "Title" column. Unfortunately, without success and default form for list is still opening. Is it possible?

WF

Dear @wflorczyk,
Looks like a bug - it should open in dialog by default. Does it not? We'll try to fix this as soon as possible.

It's not a bug. It opens dialog by default but a default form. I want to customize a Title link to open a certain form instead of default for.

I tried to use code below:

fd.spRendered(function() {
    fd.control('SPDataTable1').templates = {
        // Open Predecessors lookup in a dialog
        Title: function(ctx) {
            var value = ctx.row.Title;
            if (!value) {
                return '';
            }
            return value.map(function(v) {
                    return '<a target="_blank" data-interception="off" ' +
                        'onclick="window[\'' + ctx.openDialogFuncName + '\'](\url to my special form&ID=' + v.itemId + '\'); return false;" ' +
                        'href="url to my special form">' + v.itemValue + '</a>';
                })
                .join(', ');
        }
    }
})

Dear @wflorczyk,
The code in the example (with value.map) is for a multilookup field, for Title, you can try something like this:

fd.spRendered(function() {
    fd.control('SPDataTable1').templates = {
        // Open Predecessors lookup in a dialog
        Title: function(ctx) {
            console.log(ctx);
            var value = ctx.row.Title;
            if (!value) {
                return '';
            }
            return '<a target="_blank" data-interception="off" ' +
                    'onclick="window[\'' + ctx.openDialogFuncName + '\'](\'https://domain.sharepoint.com/sites/sitename/SitePages/PlumsailForms/ListName/Item/EditForm.aspx?item=' + ctx.row.ID + '\'); return false;" ' +
                    'href="https://domain.sharepoint.com/sites/sitename/SitePages/PlumsailForms/ListName/Item/EditForm.aspx?item=">' + value + '</a>';
        }
    }
})

OK, thank You I will test it.

WF

I doesn't work. It looks like this part of code is ignored. I see that there is an error in execution of code because other my customization doesn't work but when I click Title link a standard dialog with default form is opening. Title is main link on the list.

Dear @wflorczyk,
Are you sure that the URL is correct? This is literally the code that I've used on my end, only the domain is slightly changed.

Please, show me the console error, perhaps it can give us a clue as to what is wrong here.

Correct me if I wrong, but when URL is wrong there should be an Error 404? Even if I wrote wrong URL I should see a dialog window with info that page doesn't exist. Instead of this I got default form.

I'll check this code once again. Maybe I missed something.

WF

Dear @wflorczyk,
Can you just copy and paste the code as you have it, so I can try it as well? I am also interested in the URL, so if you can - do not change it (or change it slightly, for example, only the domain) that would be good.

Hi, that's strange. Code for Lookup fields works, for Title not.

    Stanowisko: function(ctx) {
        var value = ctx.row.Stanowisko;
        if (!value) {
            return '';
        }
        return value.map(function(v) {
                return '<a target="_blank" data-interception="off" ' +
                    'onclick="window[\'' + ctx.openDialogFuncName + '\'](\''+window.siteName+'/SitePages/PlumsailForms/Stanowiska/Item/DisplayForm.aspx?item=' + v.lookupId + '\'); return false;" ' +
                    'href="'+window.siteName+'/SitePages/PlumsailForms/Stanowiska/Item/DisplayForm.aspx?item=' + v.lookupId + '">' + v.lookupValue + '</a>';
            })
            .join(', ');
    },
            
    Title: function(ctx) {
        var value = ctx.row.Title;
        if (!value) {
            return '';
        }
        return value.map(function(v) {
                return '<a target="_blank" data-interception="off" ' +
                    'onclick="window[\'' + ctx.openDialogFuncName + '\'](\''+window.siteName+'/SitePages/PlumsailForms/Pomieszczenia/Item/DisplayForm.aspx?item=' + ctx.row.Id + '\'); return false;" ' +
                    'href="'+window.siteName+'/SitePages/PlumsailForms/Pomieszczenia/Item/DisplayForm.aspx?item=' + ctx.row.Id + '">' + value + '</a>';
            })
            .join(', ');
    },        
    Pomieszczenie: function(ctx) {
        var value = ctx.row.Pomieszczenie;
        if (!value) {
            return '';
        }
        return value.map(function(v) {
                return '<a target="_blank" data-interception="off" ' +
                    'onclick="window[\'' + ctx.openDialogFuncName + '\'](\''+window.siteName+'/SitePages/PlumsailForms/Pomieszczenia/Item/DisplayForm.aspx?item=' + v.lookupId + '\'); return false;" ' +
                    'href="'+window.siteName+'/SitePages/PlumsailForms/Pomieszczenia/Item/DisplayForm.aspx?item=' + v.lookupId + '">' + v.lookupValue + '</a>';
            })
            .join(', ');
    }     
}

I made a test. I added a random word to Name and for Lookup fields exchanging name works, but for Title doesn't.

       Title: function(ctx) {
        var value = ctx.row.Title;
        if (!value) {
            return '';
        }
        return value.map(function(v) {
                return '<a target="_blank" data-interception="off" ' +
                    'onclick="window[\'' + ctx.openDialogFuncName + '\'](\''+window.siteName+'/SitePages/PlumsailForms/Elementy%20stanowisk/Item/DisplayForm.aspx?item=' + ctx.row.Id + '\'); return false;" ' +
                    'href="'+window.siteName+'/SitePages/PlumsailForms/Elementy%20stanowisk/Item/DisplayForm.aspx?item=' + ctx.row.Id + '">' + "Random![randowrd word" + value + '</a>';
            })
            .join(', ');
    },

Dear @wflorczyk,
Can you include a bigger screenshot? Also, I would ask to remove ALL the code from the form for now, and test only this part:

fd.spRendered(function() {
    fd.control('SPDataTable1').templates = {
        // Open Predecessors lookup in a dialog
        Title: function(ctx) {
            console.log(ctx);
            var value = ctx.row.Title;
            if (!value) {
                return '';
            }
            return '<a target="_blank" data-interception="off" ' +
                    'onclick="window[\'' + ctx.openDialogFuncName + '\'](\'https://domain.sharepoint.com/sites/sitename/SitePages/PlumsailForms/ListName/Item/EditForm.aspx?item=' + ctx.row.ID + '\'); return false;" ' +
                    'href="https://domain.sharepoint.com/sites/sitename/SitePages/PlumsailForms/ListName/Item/EditForm.aspx?item=">' + value + '</a>';
        }
    }
})

Nothing else in the JavaScript editor to avoid conflicts and to simplify debugging. Also, make sure to share ALL the code, and not just pieces.

The whole code?

Download it here: WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free

Bigger screenshot

Dear @wflorczyk,
Since we're testing specifically this functionality, I would ask to remove the rest of the code for now, and just focus on changing the Title field leaving only this on the form for now:

fd.spRendered(function() {
    fd.control('SPDataTable1').templates = {
        // Open Predecessors lookup in a dialog
        Title: function(ctx) {
            console.log(ctx);
            var value = ctx.row.Title;
            if (!value) {
                return '';
            }
            return '<a target="_blank" data-interception="off" ' +
                    'onclick="window[\'' + ctx.openDialogFuncName + '\'](\'https://domain.sharepoint.com/sites/sitename/SitePages/PlumsailForms/ListName/Item/EditForm.aspx?item=' + ctx.row.ID + '\'); return false;" ' +
                    'href="https://domain.sharepoint.com/sites/sitename/SitePages/PlumsailForms/ListName/Item/EditForm.aspx?item=">' + value + '</a>';
        }
    }
})

Don't use value.map() or join() - these are not needed here. Also, use the site's URL instead of window.siteName - just follow the example.

This is code. The resulat in attachment. Two different outcomes depends on setting of component. Edit Inline (only one empty row) and Dialog (all rows but all empty).

 fd.spRendered(function () {
    fd.control('SPDataTable1').templates = {
    // Open Predecessors lookup in a dialog
    Title: function(ctx) {
        console.log(ctx);
        var value = ctx.row.Title;
        if (!value) {
            return '';
        }
        return '<a target="_blank" data-interception="off" ' +
                'onclick="window[\'' + ctx.openDialogFuncName + '\'](\'https://mycompany.sharepoint.com/sites/devrepo/SitePages/PlumsailForms/Elementy%20stanowisk/Item/DisplayForm.aspx?item=' + ctx.row.ID + '\'); return false;" ' +
                'https://mycompany.sharepoint.com/sites/devrepo/SitePages/PlumsailForms/Elementy%20stanowisk/Item/DisplayForm.aspx?item=">' + "Random" + value + '</a>';
    }
} });

Dear @wflorczyk,
Try it like this:

fd.spRendered(function () {
    fd.control('SPDataTable1').templates = {
    Title: function(ctx) {
        console.log(ctx);
        var value = ctx.row.Title;
        if (!value) {
            return '';
        }
        return '<a target="_blank" data-interception="off" ' +
                'onclick="window[\'' + ctx.openDialogFuncName + '\'](\'https://mycompany.sharepoint.com/sites/devrepo/SitePages/PlumsailForms/Elementy%20stanowisk/Item/DisplayForm.aspx?item=' + ctx.row.ID + '\'); return false;" ' +
                'href="https://mycompany.sharepoint.com/sites/devrepo/SitePages/PlumsailForms/Elementy%20stanowisk/Item/DisplayForm.aspx?item=">' + "Random" + value + '</a>';
    }
  } 
});

OK, that works. I'll try this code in my first form.

Works great thanks. Finally !

1 Like