Formatting a Column with Link not opening in _blank

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>';

Hello @cwalter2,

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

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();
        }
    });
});

});

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