Custom Field Renderer Not Showing Apostrophes Correctly (&#39)

A user recently brought it to my attention that apostrophes are not rendering correctly.  Instead of the correct character, it inserts “&#39” instead.  Based on what I’ve see in this article:
https://community.skuid.com/t/field-renderer-causing-apostrophe-to-turn-into-39
the fix is to insert .getFieldValue infront of the field reference to get the correct value.  However that is already present in the Custom Renderer.  Here is the code:

// A custom field renderer for Client fields. Links user to the Client page within the Wealth tab, while still allowing field to be editable if in edit mode.
skuid.snippet.registerSnippet(‘ClientLinkRenderer’, function(field, value){    
    var model = field.model,
row = field.row,
clientName,
clientId,
        clientLink,
elem = field.element,
        modelObject = model.objectName;
    console.log(field);

    // Based on the model’s object, use different fields for the Client Id and Name
    switch(modelObject) {
        // Client (Account) model
        case ‘Account’:
            clientName = model.getFieldValue(row, ‘Name’);
        clientId = model.getFieldValue(row, ‘Id’);
            break;
        // Pipeline (Opportunity) model
        case ‘Opportunity’:
            clientName = model.getFieldValue(row, ‘Account.Name’);
        clientId = model.getFieldValue(row, ‘AccountId’);
            break;
        // Call Plan model
        case ‘Call_Plan__c’:
            clientName = model.getFieldValue(row, ‘Client__r.Name’);
        clientId = model.getFieldValue(row, ‘Client__c’);
            break;
        // Restricted Client Information model
        case ‘Restricted_Client_Information__c’:
            clientName = model.getFieldValue(row, ‘Client__r.Name’);
            clientId = model.getFieldValue(row, ‘Client__c’);
            break;

Any ideas on what needs to be done to correct this?

Can you post the rest of your code to show how you’re applying the value to the element?

Here is the XML from the one of the pages where the Client Name field is being rendered in a table.

Prospect Client Client Record Type

I was talking about the rest of the Javascript that you originally posted. It would help me understand how you’re assigning this value, whether it’s through jQuery or skuid default rendering and whatnot

Don’t know if there are limits on this or not but I’m having trouble pasting the code now.  Give me just a minute please.

var $ = skuid.$;

// Function to show queue search and filters by default. Will be applied to any queue within another element (e.g. Panel, Wrapper) that has a unique id of ‘regions-show-queue-filters’.
// This function can be called on page load or from a snippet.
function showQueueFilters() {
    var queuePanels = $(‘.regions-show-queue-filters’);
    $.each(queuePanels, function(i,panel){
        var filtersRegion = $(panel).find(‘.nx-queue-settings’),
            toggleIcon = $(panel).find(‘.ui-icon-gear.nx-queue-titleicon’);
        if (toggleIcon && filtersRegion && filtersRegion.css(‘display’) === ‘none’) {
            toggleIcon.click();
        }
    });
}

// Use the link below the client detail page in the same tab
if (clientName && clientId) {
clientLink = $(‘’).attr(‘href’, ‘/apex/skuid__ui?page=WealthTab_ClientDetail&clientid=’ + clientId + ‘#client-review-tab’ ).text(clientName);
}

// Use the link below below to open the client detail in a separate tab
//var link = $(‘
’).attr(‘href’, ‘/apex/skuid__ui?page=WealthTab_ClientDetail&clientid=’ + clientId ).attr(‘target’,‘_blank’).text(clientName);

// Read and read-only mode
if (field.mode === ‘read’ || field.mode === ‘readonly’) {
// If Client Name and Id are found, use a custom link
if (clientName && clientId) {
skuid.ui.fieldRenderers[field.metadata.displaytype]
field.mode;
elem.find(‘.nx-fieldtext’).append(clientLink);
// If Client Name and Id are not found, use the standard field renderer
} else {
skuid.ui.fieldRenderers[field.metadata.displaytype]field.mode;
}
// For edit mode, use the standard field renderer
} else if (field.mode === ‘edit’) {
skuid.ui.fieldRenderers[field.metadata.displaytype]field.mode;

The code I posted originally sits between the last two posts.

Cool, Skuid is probably giving you the value already escaped when the field is in read-only mode. Try using this instead

clientLink = $('<a href="/apex/skuid__ui?page=WealthTab_ClientDetail&amp;clientid=' + clientId + '#client-review-tab">' + clientName + '</a>');

Total snippet would look like this:

// A custom field renderer for Client fields. Links user to the Client page within the Wealth tab, while still allowing field to be editable if in edit mode. skuid.snippet.registerSnippet('ClientLinkRenderer', function(field, value) { var model = field.model, row = field.row, clientName, clientId, clientLink, elem = field.element, modelObject = model.objectName; console.log(field); if (field.mode === 'read' || field.mode === 'readonly') { // Based on the model's object, use different fields for the Client Id and Name switch(modelObject) { // Client (Account) model case 'Account': clientName = model.getFieldValue(row, 'Name'); clientId = model.getFieldValue(row, 'Id'); break; // Pipeline (Opportunity) model case 'Opportunity': clientName = model.getFieldValue(row, 'Account.Name'); clientId = model.getFieldValue(row, 'AccountId'); break; // Call Plan model case 'Call_Plan__c': clientName = model.getFieldValue(row, 'Client__r.Name'); clientId = model.getFieldValue(row, 'Client__c'); break; // Restricted Client Information model case 'Restricted_Client_Information__c': clientName = model.getFieldValue(row, 'Client__r.Name'); clientId = model.getFieldValue(row, 'Client__c'); break; } // If Client Name and Id are found, use a custom link if (clientName &amp;&amp; clientId) { clientLink = $('<a href="/apex/skuid__ui?page=WealthTab_ClientDetail&amp;clientid=' + clientId + '#client-review-tab">' + clientName + '</a>'); clientLink = $('<a>').attr('href', '/apex/skuid__ui?page=WealthTab_ClientDetail&amp;clientid=' + clientId + '#client-review-tab' ).html(clientName); skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,''); elem.find('.nx-fieldtext').append(clientLink); // If Client Name and Id are not found, use the standard field renderer } else { skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); } // For edit mode, use the standard field renderer } else if (field.mode === 'edit') { skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); } });

Thank you Pete!  This worked perfectly.  And as an interesting side note, the client who was responsible for us finding the issue had the last name O’Connell.  The world is ultimately circular I think :slight_smile: