Formatting a Column with Link not opening in _blank

Forms
1

I am using the following code to replace some a Choice field with a linked fabric icon in List Control. However the links are not opening in a blank tab as I would expect. Is there an issue with my code?

return '<a style="padding-right:8px;"href="https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=39d02a64-ec32-467c-b396-61dd86087085&item=' + ctx.row.ID + '" target="_blank"><i data-icon-name="Settings" class="ms-Icon ms-Icon--Settings" style="vertical-align: middle;"></i></a><a style="padding-right:8px;"href="https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=24c7f034-142c-4d7d-a256-950e9e71d0a0&item=' + ctx.row.ID + '" target="_blank"><i data-icon-name="Commitments" class="ms-Icon ms-Icon--Commitments" style="vertical-align: middle;"></i></a><a style="padding-right:8px;"href="https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?item=' + ctx.row.ID + '" target="_blank"><i data-icon-name="DeveloperTools" class="ms-Icon ms-Icon--DeveloperTools" style="vertical-align: middle;"></i></a>';
2

Hello @cwalter2,

Please share the complete code you are using and control screenshots.

3

Here you go:
window.fd = fd;
window.pnp = pnp;
window.Web = Web;
window.Site = Site;
window.$ = $;

function applyFilter (dt) {
var filter = "Active Project"
dt.filter = filter;
dt.refresh();
};

function applyEstFilter (dt) {
var filter = "Estimating"
dt.filter = filter;
dt.refresh();
};

function applyQualFilter (dt) {
var filter = "Qualifying"
dt.filter = filter;
dt.refresh();
};

function applyTemplate (dt) {
dt.templates = {
Dashboard: function(ctx) {
var value = ctx.row.Dashboard;
if (!value) {
return '';
}

        return '<a style="padding-right:8px;"href="https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=39d02a64-ec32-467c-b396-61dd86087085&item=' + ctx.row.ID + '" target="_blank"><i data-icon-name="Settings" class="ms-Icon ms-Icon--Settings" style="vertical-align: middle;"></i></a><a style="padding-right:8px;"href="https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=24c7f034-142c-4d7d-a256-950e9e71d0a0&item=' + ctx.row.ID + '" target="_blank"><i data-icon-name="Commitments" class="ms-Icon ms-Icon--Commitments" style="vertical-align: middle;"></i></a><a style="padding-right:8px;"href="https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?item=' + ctx.row.ID + '" target="_blank"><i data-icon-name="DeveloperTools" class="ms-Icon ms-Icon--DeveloperTools" style="vertical-align: middle;"></i></a>';
    }
}

};

function applyEstTemplate (dt) {
dt.templates = {
Dashboard: function(ctx) {
var value = ctx.row.Dashboard;
if (!value) {
return '';
}

        return '<a style="padding-right:8px;"href="https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=39d02a64-ec32-467c-b396-61dd86087085&item=' + ctx.row.ID + '" target="_blank"><i data-icon-name="Settings" class="ms-Icon ms-Icon--Settings" style="vertical-align: middle;"></i></a><a style="padding-right:8px;"href="https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=24c7f034-142c-4d7d-a256-950e9e71d0a0&item=' + ctx.row.ID + '" target="_blank"><i data-icon-name="Commitments" class="ms-Icon ms-Icon--Commitments" style="vertical-align: middle;"></i></a>';
    }
}

};

function applyQualTemplate (dt) {
dt.templates = {
Dashboard: function(ctx) {
var value = ctx.row.Dashboard;
if (!value) {
return '';
}

        return '<a style="padding-right:8px;"href="https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=39d02a64-ec32-467c-b396-61dd86087085&item=' + ctx.row.ID + '" target="_blank"><i data-icon-name="Settings" class="ms-Icon ms-Icon--Settings" style="vertical-align: middle;"></i></a>';
    }
}

};

function POFiltering (value) {
if (!value || value == 'All Items') {
$('.csPOAllItems').show()
$('.csPOAccounting').hide()
$('.csPOLateItems').hide()
$('.csPOOpen').hide()
} else if (value == 'Accounting') {
$('.csPOAllItems').hide()
$('.csPOAccounting').show()
$('.csPOLateItems').hide()
$('.csPOOpen').hide()
} else if (value == 'Open Items') {
$('.csPOAllItems').hide()
$('.csPOAccounting').hide()
$('.csPOLateItems').hide()
$('.csPOOpen').show()
} else if (value == 'Late Items') {
$('.csPOAllItems').hide()
$('.csPOAccounting').hide()
$('.csPOLateItems').show()
$('.csPOOpen').hide()
}
}

function POButtons (dt) {
dt.buttons.forEach(function(button){
if(button.icon == "Add") {
button.visible = false
}
})
}

fd.spRendered(function() {

localStorage.clear();
fd.field('sourceCheck').value = '';
$('.hideMe').hide();
$('.csActiveProj').hide();
$('.csEstimating').hide();
$('.csQualifying').hide();
$('.csVendor').hide()
$('.csPOAllItems').show()
$('.csPOAccounting').hide()
$('.csPOLateItems').hide()
$('.csPOOpen').hide()
$('.csProcurement').hide()
fd.field('POView').value = 'All Items';
/*
POAllItems
POAccounting
POLateItems
POOpen
*/
var scrWidth = Number(window.innerWidth) * .75
var scrHeight = Number(window.innerHeight) * .75

fd.control('ActiveProjects').ready().then(function(dt) {
    applyFilter(dt);
    applyTemplate(dt);
});

fd.control('Estimating').ready().then(function(dt) {
    applyEstFilter(dt);
    applyEstTemplate(dt);
});

fd.control('Qualifying').ready().then(function(dt) {
    applyQualFilter(dt);
    applyQualTemplate(dt);
});

fd.control('Vendor').ready().then(function(dt) {
    dt.dialogOptions = {
        width: scrWidth, 
        height: scrHeight
    }
    dt.buttons.forEach(function(button){
        if(button.icon == "Add") {
            button.visible = false
        }
    });
    fd.field('FilterVendor').$on('change', function(value) {
        if (value) {
            var newValue = value.replace(/&/g, "&amp;").replace(/</g,"&lt;").replace(/>/g, "&gt;").replace(/'/g,"&#039;").replace(/"/g, "&quot;");
            var vApplyFilter = "<Contains><FieldRef Name='Title' /><Value Type='Text'>" + newValue + "</Value></Contains>";
            dt.filter = vApplyFilter;
            dt.refresh();
        } else {
            dt.filter = '';
            dt.refresh();
        }
    });
});
fd.control('POProjFilter').ready().then(function(control) {
    var tmp = '#: data.LookupValue + " - " + data.Title #';
    control.widgetOptions = {
        template: tmp,
        valueTemplate: tmp
    }
});
fd.field('POView').$on('change', function(value) {
    POFiltering(value)
});
fd.control('POAllItems').ready().then(function(dt) {
    POButtons(dt);
    fd.control('POProjFilter').$on('change', function(value) {
        if (value) {
            var filter = "<Eq><FieldRef Name='Project_x0020__x0023_' LookupId='TRUE' /><Value Type='Lookup'>" + value.ID + "</Value></Eq>";
            dt.filter = filter;
            dt.refresh();
        } else {
            dt.filter = '';
            dt.refresh();
        }
    });
});
fd.control('POAccounting').ready().then(function(dt) {
    POButtons(dt);
    fd.control('POProjFilter').$on('change', function(value) {
        if (value) {
            var filter = "<Eq><FieldRef Name='Project_x0020__x0023_' LookupId='TRUE' /><Value Type='Lookup'>" + value.ID + "</Value></Eq>";
            dt.filter = filter;
            dt.refresh();
        } else {
            dt.filter = '';
            dt.refresh();
        }
    });
});
fd.control('POLateItems').ready().then(function(dt) {
    POButtons(dt);
    fd.control('POProjFilter').$on('change', function(value) {
        if (value) {
            var filter = "<Eq><FieldRef Name='Project_x0020__x0023_' LookupId='TRUE' /><Value Type='Lookup'>" + value.ID + "</Value></Eq>";
            dt.filter = filter;
            dt.refresh();
        } else {
            dt.filter = '';
            dt.refresh();
        }
    });
});
fd.control('POOpen').ready().then(function(dt) {
    POButtons(dt);
    fd.control('POProjFilter').$on('change', function(value) {
        if (value) {
            var filter = "<Eq><FieldRef Name='Project_x0020__x0023_' LookupId='TRUE' /><Value Type='Lookup'>" + value.ID + "</Value></Eq>";
            dt.filter = filter;
            dt.refresh();
        } else {
            dt.filter = '';
            dt.refresh();
        }
    });
});

});

4

Hello @cwalter2,

The issue is in multiple query parameters. Try out opening links in a new tab using window.open() function:

var url = "'https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=39d02a64-ec32-467c-b396-61dd86087085&item=" + ctx.row.ID + "'";
return '<a style="padding-right:8px;" href="#" onclick="window.open('+ url +')" ><i data-icon-name="Settings" class="ms-Icon ms-Icon--Settings" style="vertical-align: middle;"></i></a>'
1 Like
5

@mnikitina ,
Is there a way to use the same scenario but open in dialog with a specified window size in stead of in a new browser tab?

6

Hello @cwalter2,

Yes, please find the example in our documentation here:
https://plumsail.com/docs/forms-sp/how-to/list-or-library-columns.html#open-lookup-fields-in-a-dialog

7

I saw that documentation. However this field is not a Lookup. It is a choice field I am replacing, the choices with links to different forms related to the item. I assume I need to replace: ctx.field.DispFormUrl but when I tried no onclick action was taken. Also, I do not see in the documentation how to define the window size.

Thanks, Chad

8

Hello @cwalter2,

You can change the dialog window size using ths code:

fd.control('SPDataTable1').dialogOptions = {
    width: 1280,
    height: 720
}

You can find more information about the List or Library properties in the documentation here.

How do you create a link to the corresponding form? Where is the item id of the linked form stored?

9

This is how I am retrieving the ID. I just want to open in dialog in lieu of a new tab.

10

Hello @cwalter2,

You can try out the code below to open a display form in a dialog. Make sure the column internal name is valid and and update the listID.

fd.control('SPDataTable1').templates = {
    // Open Predecessors lookup in a dialog
    Text: function(ctx) {
        var value = ctx.row.Text;
        var siteURL = 'https://mysite.sharepoint.com/sites/pwa/';
        //update the list ID. You can find it in the list settings
        var listID = 'f02aae93-efaf-415b-aa2f-bee032150dcd';

                return '<a target="_blank" data-interception="off" ' +
                    'onclick="window[\'' + ctx.openDialogFuncName + '\'](\'' + siteURL + '_layouts/15/listform.aspx?PageType=4&ListId=' + listID + '&ID=' + ctx.row.ID + '\'); return false;" ' +
                    'href="' + + siteURL + '_layouts/15/listform.aspx?PageType=4&ListId=' + listID + '&ID=' + ctx.row.ID + '">' + '<i data-icon-name="Settings" class="ms-Icon ms-Icon--Settings" style="vertical-align: middle;"></i>' + '</a>';
    }
}