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

  • 1
  • Problem
  • Updated 1 year ago
  • Solved
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/skuid/topics/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?
Photo of Paul Ginther

Paul Ginther

  • 896 Points 500 badge 2x thumb

Posted 1 year ago

  • 1
Photo of Pete O'Connell

Pete O'Connell

  • 214 Points 100 badge 2x thumb
Can you post the rest of your code to show how you're applying the value to the element?
Photo of Paul Ginther

Paul Ginther

  • 896 Points 500 badge 2x thumb
Here is the XML from the one of the pages where the Client Name field is being rendered in a table.

<skuidpage unsavedchangeswarning="yes">
    <models>
        <model type="" id="Clients" sobject="Account" adapter="salesforce" createrowifnonefound="false" query="true" limit="20" orderby="Name">
            <fields>
                <field id="Name"/>
                <field id="Id"/>
                <field id="RecordTypeId"/>
                <field id="RecordType.Name"/>
                <field id="OwnerId"/>
                <field id="Owner.Name"/>
                <field id="Relationship__c"/>
                <field id="Relationship__r.Name"/>
                <field id="Additional_Information__c"/>
                <field id="Do_Not_Email__c"/>
                <field id="Do_Not_Mail__c"/>
                <field id="Do_Not_Call__c"/>
                <field id="Phone"/>
                <field id="Segment__c"/>
                <field id="Segment_Specialization__c"/>
                <field id="Merge_RGA_Client__c"/>
                <field id="Merge_RGA_Client__r.Name"/>
                <field id="Merge_RGA_Party_ID__c"/>
                <field id="Needs_to_be_Merged__c"/>
                <field id="Type"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="Y" enclosevalueinquotes="true" field="Purged_Indicator__c" operator="!="/>
                <condition type="multiple" value="" enclosevalueinquotes="true" field="RecordType.Name" operator="in">
                    <values>
                        <value>Prospect</value>
                        <value>Client</value>
                    </values>
                </condition>
                <condition type="join" name="ClientReviewOwner" value="" enclosevalueinquotes="true" field="Id" operator="in" joinobject="Restricted_Client_Information__c" joinfield="Client__c" state="filterableoff" inactive="true">
                    <conditions>
                        <condition type="userinfo" value="" enclosevalueinquotes="true" field="PWM_Client_Review_Owner__c" operator="=" userinfotype="userid"/>
                    </conditions>
                </condition>
                <condition type="join" name="ClientTeamMember" value="" enclosevalueinquotes="true" field="Id" operator="in" joinobject="AccountTeamMember" joinfield="AccountId" state="filterableoff" inactive="true">
                    <conditions>
                        <condition type="userinfo" value="" enclosevalueinquotes="true" field="UserId" operator="=" userinfotype="userid"/>
                    </conditions>
                </condition>
                <condition type="userinfo" name="ClientOwner" value="" enclosevalueinquotes="true" field="OwnerId" operator="=" state="filterableon" inactive="false" userinfotype="userid"/>
                <condition type="join" name="PrivateWealthAdvisor" value="" enclosevalueinquotes="true" field="Id" operator="in" joinobject="Restricted_Client_Information__c" joinfield="Client__c" state="filterableoff" inactive="true">
                    <conditions>
                        <condition type="userinfo" value="" enclosevalueinquotes="true" field="Private_Wealth_Advisor_Orig__c" operator="=" userinfotype="userid"/>
                    </conditions>
                </condition>
                <condition type="fieldvalue" name="RecordTypeName" value="" enclosevalueinquotes="true" field="RecordType.Name" state="filterableoff" inactive="true"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <pageregioncontents>
        <pageregioncontent uniqueid="sk-1qH2s1-81" regionid="sk-1X-ECi-253">
            <components>
                <skootable uniqueid="sk-1qH5a--114" model="Clients" showerrorsinline="true" buttonposition="" mode="readonly" showsavecancel="false" createrecords="false" pagesize="10" showexportbuttons="false" searchbox="true" searchmethod="server" showconditions="true">
                    <fields>
                        <field id="Name" valuehalign="" type="CUSTOM" snippet="ClientLinkRenderer"/>
                        <field type="" id="RecordType.Name" valuehalign="" allowordering="true">
                            <label>Client Record Type</label>
                        </field>
                        <field type="" id="Type" valuehalign=""/>
                        <field type="" id="Phone" valuehalign=""/>
                        <field type="" id="Segment__c" valuehalign=""/>
                        <field type="" id="Segment_Specialization__c" valuehalign=""/>
                        <field type="" id="OwnerId" valuehalign="" allowordering="true"/>
                        <field type="" id="Relationship__c" valuehalign="" allowordering="true"/>
                    </fields>
                    <rowactions>
                        <action type="drawer" label="Run multiple actions" icon="sk-icon-component-pack" openicon="sk-icon-go-to-full-detail-page">
                            <drawer title="Drawer Area" width="90%" closehandle="true">
                                <components>
                                    <basicfieldeditor uniqueid="sk-s-jY4-152" model="Clients" showerrorsinline="true" buttonposition="" mode="read" showheader="true" showsavecancel="true">
                                        <columns>
                                            <column width="50%">
                                                <sections>
                                                    <section title="Marketing Opt Out" collapsible="no">
                                                        <fields>
                                                            <field id="Do_Not_Call__c"/>
                                                            <field id="Do_Not_Email__c"/>
                                                            <field id="Do_Not_Mail__c"/>
                                                        </fields>
                                                    </section>
                                                </sections>
                                            </column>
                                            <column width="50%">
                                                <sections>
                                                    <section title="Merge" collapsible="no">
                                                        <fields>
                                                            <field type="" id="Needs_to_be_Merged__c" valuehalign="" showhelp="true"/>
                                                            <field type="" id="Merge_RGA_Client__c" valuehalign="" showhelp="true"/>
                                                            <field type="" id="Merge_RGA_Party_ID__c" valuehalign=""/>
                                                        </fields>
                                                    </section>
                                                </sections>
                                            </column>
                                        </columns>
                                    </basicfieldeditor>
                                </components>
                            </drawer>
                        </action>
                    </rowactions>
                    <massactions usefirstitemasdefault="true"/>
                    <views>
                        <view type="standard"/>
                    </views>
                    <filters>
                        <filter type="select" createfilteroffoption="true" filteroffoptionlabel="My Clients" affectcookies="false" autocompthreshold="25" conditionsource="manual" labelmode="no">
                            <sources>
                                <source type="manual" effectsbehavior="justdefault">
                                    <options>
                                        <option type="complex" label="My Client Teams">
                                            <effects>
                                                <effect value="" condition="ClientOwner" action="deactivate"/>
                                                <effect value="" condition="ClientReviewOwner" action="deactivate"/>
                                                <effect value="" condition="ClientTeamMember" action="activate"/>
                                                <effect value="" condition="PrivateWealthAdvisor" action="deactivate"/>
                                            </effects>
                                        </option>
                                        <option label="PWM Client Review Owner" type="complex">
                                            <effects>
                                                <effect action="activate" value="" condition="ClientReviewOwner"/>
                                                <effect action="deactivate" value="" condition="ClientTeamMember"/>
                                                <effect action="deactivate" value="" condition="ClientOwner"/>
                                                <effect action="deactivate" value="" condition="PrivateWealthAdvisor"/>
                                            </effects>
                                        </option>
                                        <option type="complex" label="Private Wealth Advisor">
                                            <effects>
                                                <effect value="" condition="PrivateWealthAdvisor" action="activate"/>
                                                <effect value="" condition="ClientReviewOwner" action="deactivate"/>
                                                <effect value="" condition="ClientTeamMember" action="deactivate"/>
                                                <effect value="" condition="ClientOwner" action="deactivate"/>
                                            </effects>
                                        </option>
                                    </options>
                                </source>
                            </sources>
                        </filter>
                        <filter type="select" condition="RecordTypeName" createfilteroffoption="true" filteroffoptionlabel="Record Type: Any" affectcookies="false" autocompthreshold="25" conditionsource="manual" labelmode="no">
                            <sources>
                                <source type="manual" effectsbehavior="justdefault">
                                    <options>
                                        <option type="simple" label="Record Type: Prospect" value="Prospect"/>
                                        <option type="simple" label="Record Type: Client" value="Client"/>
                                    </options>
                                </source>
                            </sources>
                        </filter>
                    </filters>
                    <actions usefirstitemasdefault="true" defaulticon="sk-icon-magic" defaultlabel="Global Actions"/>
                </skootable>
            </components>
        </pageregioncontent>
    </pageregioncontents>
    <components/>
    <resources>
        <labels/>
        <css/>
        <javascript/>
    </resources>
</skuidpage>
Photo of Pete O'Connell

Pete O'Connell

  • 214 Points 100 badge 2x thumb
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
Photo of Paul Ginther

Paul Ginther

  • 896 Points 500 badge 2x thumb
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.
Photo of Paul Ginther

Paul Ginther

  • 896 Points 500 badge 2x thumb
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();
        }
    });
}
(Edited)
Photo of Paul Ginther

Paul Ginther

  • 896 Points 500 badge 2x thumb
// Use the link below the client detail page in the same tab
    if (clientName && clientId) {
clientLink = $('<a>').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 = $('<a>').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](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);
Photo of Paul Ginther

Paul Ginther

  • 896 Points 500 badge 2x thumb
The code I posted originally sits between the last two posts.
Photo of Pete O'Connell

Pete O'Connell

  • 214 Points 100 badge 2x thumb
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&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 && clientId) {
      clientLink = $('<a href="/apex/skuid__ui?page=WealthTab_ClientDetail&clientid=' + clientId + '#client-review-tab">' + clientName + '</a>');
      clientLink = $('<a>').attr('href', '/apex/skuid__ui?page=WealthTab_ClientDetail&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);
  }
});
Photo of Paul Ginther

Paul Ginther

  • 896 Points 500 badge 2x thumb
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 :-)