How to bold a currency field in a table?

I have a table with a currency field which I would like to style the font-weight but I have added a custom snippet / css (which I then set the field to render from custom snippet) and also tried adding styling directly to the XML, but no luck.  Here is the snippet / css in its current form:

Snippet:

var params = arguments[0],
$ = skuid.$;

var field = arguments[0];
var element = field.element;
var price = field.model.getFieldValue(field.row,‘Current_Price__c’);
skuid.ui.fieldRenderers[field.metadata.displaytype]field.mode;
element.addClass(‘boldPrice’);

CSS:

.boldPrice {
    font-weight: bold;
}

I have played around with this some, but that is basically what it looks like, and I have used variations of this on other pages and it works.  Is there a limitation around formatting currency fields?

Thanks in advance for any help.

Hi Danny, hope you and your loved ones are safe and well with all that’s going on in the world.

Have you tried using a template field with HTML to bold the field?

To do this, add the template component into your table and select “Allow HTML.” Then style the field as desired e.g.

{{Current_Price__c}}
```
See Using Template Fields in the Table documentation for more information.

Thanks, Anna.  You too.

I did try the template field and there were a few issues. 

  1. I need users to be able to edit the Current Price field - which I think you can’t do with template fields?
  2. The styling did not take
  3. The field reverted back to the default number of decimal places (6), and I only want to show two.  I am guessing I could format this with CSS, but I didn’t bother considering the first two issues.

Thanks for the quick reply, Danny.  

What version of Skuid are you using?

Spark 12.1.5

Hi Danny, here are a few thoughts.

  1. The template field should be editable, you just double click and it will open a popup where you can edit the field.
  2. In the model properties for your currency field, use "override field metadata" to change aspects of field's setup, e.g. how many decimals it should show. (see the screenshot)
![](upload://tfXaNex77VValMhCnVDfj83ZoNO.png "Image: https://d2r1vs3d9006ap.cloudfront.net/s3_images/1833766/25645-1k9c4io_inline.png?1587977937")

I made a basic page demonstrating how to achieve this. Let me know if you have any questions or if this method doesn’t work for you.

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
<models>
<model id="Opportunity" limit="1" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Opportunity">
<fields>
<field id="Amount" overridemetadata="true" ogdisplaytype="CURRENCY" displaytype="CURRENCY" scale="0"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<basicfieldeditor showheader="true" showsavecancel="true" showerrorsinline="true" model="Opportunity" uniqueid="sk-2ws9-372" mode="read">
<columns>
<column width="50%" uniqueid="sk-2ws9-368">
<sections>
<section uniqueid="sk-2ws9-369" collapsible="no">
<fields>
<field uniqueid="sk-2ws9-373" id="Amount">
<label>Amount - standard
</label>
</field>
<field uniqueid="sk-2wsB-433" type="COMBO" editmodebehavior="autopopup" allowhtml="true">
<label>Amount - template</label>
<template>&amp;lt;b&amp;gt;{{Amount}}&amp;lt;/b&amp;gt;</template>
</field>
</fields>
</section>
</sections>
</column>
<column width="50%" uniqueid="sk-2ws9-370">
<sections>
<section title="Section B" uniqueid="sk-2ws9-371">
<fields/>
</section>
</sections>
</column>
</columns>
</basicfieldeditor>
</components>
<resources>
<labels/>
<javascript/>
<css/>
<actionsequences uniqueid="sk-2wrs-312"/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>

Hi Anna,

Thanks for getting back to me. The suggestions for the ability to edit and format decimal places worked on the template field. Thanks! However, I still can’t seem to style the field to bold. Here is my template field:

{{Current_Price__c}}

Here is the XML for that field:

Current Price &lt;div style="font-weight:bold;"&gt;{{Current_Price__c}}&lt;/div&gt;

Thanks for your help!

Hi Danny, I think the

tag might be messing it up; I tried with just the bold tag () and it appears to be editable as expected.

Is there a reason you’re using

instead of just ?

I tried the tag and it didn’t have an effect on the boldness. I just tried it again and can confirm that it’s not bolding the text. Would a Theme override the style for a given field?

Hi Danny, it’s possible it could be an issue with your theme. Try changing the page’s theme to a standard Skuid theme and see if the tag works as expected.

Additionally you can try:

  • Updating out of date themes. (If you have out of date Themes, this option will show in the Themes list page).
  • Upgrading to the most recent version of Skuid in Sandbox and see if the problem persists.