Use of Bold in a rich text area, without using triple brackets

  • 1
  • Question
  • Updated 12 months ago
  • Answered
Hi maybe a stupid question, but never had to use this before and now facing a weird issue

In a rich text area, I want to Bold some Currency & Date Fields, using field merge, But unless I use triple brackets, it would not go bold

Problem with using triple brackets is that it loses the formatting of field (currency or date formatting)

Any way to bold some merge fields using Double brackets only?

See example below: the first line is using triple bracket, so I lose currency formatting but goes bold
the 2nd line does not go bold but has proper currency formatting



Thank you
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Dave,

This is a tricky one.  Like you I have not had the need to format a currency field.  I am seeing the same behavior in a template field rendered in a table.  It looks like the mustache templating is overriding any formatting applied to the field unless you render the 'value' only (triple mustache).  I don't have an answer on this one.

Bill
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Ty for trying Bill, Anyone has any suggestions?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Should be able to tackle this with CSS for bold font and the double brackets for formatting.

Right click and inspect the element, and see what css classes skuid is using. Adding a css class to your element and using that class in combination with whatever classes skuid uses should allow you to control.

That said, you may have to use a template component instead of Rich Text, and do the html yourself so you can put a <span> with a specific class around the text you want to make bold.
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Matt,

Great suggestion!

Dave,

I was able to do this with a Template field and CSS.

The CSS I used is:

.nx-fieldtext > .nx-template > .nx-field > .nx-fieldtext {    font-weight: bold;
}

Here is a sample page:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true" tabtooverride="Opportunity">
    <models>
        <model id="Opportunity" limit="1" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Opportunity" type="">
            <fields>
                <field id="Name"/>
                <field id="CreatedDate"/>
                <field id="Amount"/>
            </fields>
            <conditions>
                <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Opportunity" uniqueid="sk-3WIfQT-203">
            <maintitle>
                <template>{{Name}}</template>
            </maintitle>
            <subtitle>
                <template>{{Model.label}}</template>
            </subtitle>
            <actions>
                <action type="savecancel" window="self" uniqueid="sk-3WIfQR-201"/>
            </actions>
        </pagetitle>
        <basicfieldeditor showsavecancel="false" showheader="true" model="Opportunity" mode="read" uniqueid="sk-3WIfQu-219">
            <columns>
                <column width="50%">
                    <sections>
                        <section title="Basics" collapsible="no">
                            <fields>
                                <field id="Name" uniqueid="sk-3WIfQf-211"/>
                                <field uniqueid="sk-3WIjkA-267" type="COMBO" valuehalign="" editmodebehavior="autopopup">
                                    <label>Bold Amount</label>
                                    <template>{{Amount}}</template>
                                </field>
                            </fields>
                        </section>
                    </sections>
                </column>
                <column width="50%">
                    <sections>
                        <section title="System Info">
                            <fields>
                                <field id="CreatedDate" uniqueid="sk-3WIfQm-217"/>
                            </fields>
                        </section>
                    </sections>
                </column>
            </columns>
        </basicfieldeditor>
    </components>
    <resources>
        <labels/>
        <css>
            <cssitem location="inline" name="boldAmountCSS" cachelocation="false">.nx-fieldtext &gt; .nx-template &gt; .nx-field &gt; .nx-fieldtext {
    font-weight: bold;
}</cssitem>
        </css>
        <javascript/>
        <actionsequences uniqueid="sk-3WIh1m-249"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Nice work.

You may want to add a class (like "my-bold-money") to your field or editor and to the css to be more specific, so you don't have bold text all over the page.