How to bold a currency field in a table?

Danny HartleyDanny Hartley ✭✭✭
edited April 30, 2020 in Questions
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](field,price);
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.







Comments

  • Anna WiersemaAnna Wiersema 🛠️ 
    edited April 23, 2020
    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.

    <b>{{Current_Price__c}}</b>

    See Using Template Fields in the Table documentation for more information.

  • Danny HartleyDanny Hartley ✭✭✭
    edited April 23, 2020
    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.

  • Anna WiersemaAnna Wiersema 🛠️ 
    edited April 23, 2020
    Thanks for the quick reply, Danny.  

    What version of Skuid are you using?
  • Danny HartleyDanny Hartley ✭✭✭
    edited April 23, 2020
    Spark 12.1.5
  • Anna WiersemaAnna Wiersema 🛠️ 
    edited April 30, 2020
    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)
    image

    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>&lt;b&gt;{{Amount}}&lt;/b&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>
  • Danny HartleyDanny Hartley ✭✭✭
    edited April 27, 2020
    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:  


    <div style="font-weight:bold;">{{Current_Price__c}}</div>

    Here is the XML for that field:

    <field type="COMBO" hideable="true" uniqueid="fi-2yJH-1883" allowhtml="true" redirecttype="none" editmodebehavior="autopopup">
    <label>Current Price</label>
    <template>&lt;div style="font-weight:bold;"&gt;{{Current_Price__c}}&lt;/div&gt;</template>
    </field>

    Thanks for your help!

















  • Anna WiersemaAnna Wiersema 🛠️ 
    edited April 29, 2020
    Hi Danny, I think the <div/> tag might be messing it up; I tried with just the bold tag (<b/>) and it appears to be editable as expected. 

    Is there a reason you're using <div style="font-weight:bold;"> instead of just <b>?
  • Danny HartleyDanny Hartley ✭✭✭
    edited April 29, 2020
    I tried the <b> 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?imageimage
  • Anna WiersemaAnna Wiersema 🛠️ 
    edited April 30, 2020
    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 <b> 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.


Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!