How to bold values in a Form?

  • 0
  • 1
  • Question
  • Updated 10 months ago
  • Answered
I want to make the value of my field (PO TOTAL) in bold to emphasize it. Is it possible?
Please see the image the I attached for reference.
Photo of Bernard

Bernard

  • 116 Points 100 badge 2x thumb

Posted 10 months ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,884 Points 20k badge 2x thumb
A cheap way to do it is to create a formula rich text field with the following definition:
"<b>" & ToText([number]) & "</b>"
But you may need a more complicated formula if you need (1) to preserver commas and (2) are worried about having right justification in reports (string justify the the left).
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,884 Points 20k badge 2x thumb
You can also do it with IOL without any additional data fields and keep the original commas and justification. You of course have to use and IOL field but you should have this in every application so you can immediately implement new script solutions without delay.

Assuming the label is "number" this script finds the cell with the label, selects the next cell (which contains the value) and wraps in in bold tags.
$("td.label:has(label.fieldLabel b:contains(number))").next("td").wrapInner("<b></b>");
Reference the unmodified HTML:
<tr class="formRow ">
  <td id="tdl_0" class="label lc">
    <label class="fieldLabel">
      <b>number</b>
    </label>
  </td>
  <td id="tdf_0" class="cell cc nowrap" colspan="100">5,029.36</td>
</tr>
and the modified HTML:
<tr class="formRow ">
  <td id="tdl_0" class="label lc">
    <label class="fieldLabel">
      <b>number</b>
    </label>
  </td>
  <td id="tdf_0" class="cell cc nowrap" colspan="100"><b>5,029.36</b></td>
</tr>
(Edited)
Photo of Bernard

Bernard

  • 116 Points 100 badge 2x thumb
I'm not familiar with IOL. Can you help me where to find this option? :)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,884 Points 20k badge 2x thumb
It is a workaround to inject JavaScript into your page to fix any problem. There are hundreds of solutions that use it in the Pastie Database.

Start here:

How Do I Setup the Image Onload Technique (IOL)?

https://community.quickbase.com/quickbase/topics/how-do-i-setup-the-image-onload-technique-iol

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m3z
Photo of Bernard

Bernard

  • 116 Points 100 badge 2x thumb
Hi Dan,

Thanks for your help. I just want to ask, what if I want 2 labels to be in bold, does the below scripts correct?

$("td.label:has(label.fieldLabel b:contains(PO TOTAL; PO Currency))").next("td").wrapInner("<b></b>");
Photo of Bernard

Bernard

  • 116 Points 100 badge 2x thumb
And is there a way to increase the font size of the value as well?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,884 Points 20k badge 2x thumb
That string inside quotes is called the selector. To use multiple selectors you list both using a comma:

$("td.label:has(label.fieldLabel b:contains(PO TOTAL)),
  td.label:has(label.fieldLabel b:contains(PO Currency)")
").next("td").wrapInner("<b></b>");
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,884 Points 20k badge 2x thumb
That  is because the PO Currency label is empty as you say. Try this:
$("td.label:has(label.fieldLabel b:contains(PO TOTAL)),
   td.label:has(label.fieldLabel b:empty"))
.next("td")
.wrapInner("<b></b>");
Let me know if it works.  I have never used :empty - that's why its worth answering questions! Through our combined efforts we have advanced the great corpus of QuickBase knowledge.

Go Team QuickBase!

BTW, this is how doctors learn their skills:
  1. See One
  2. Do One
  3. Teach One
(Edited)
Photo of Bernard

Bernard

  • 116 Points 100 badge 2x thumb
It worked perfectly. Thank you Dan. ^_^

$("td.label:has(label.fieldLabel b:contains(PO TOTAL)), td.label:has(label.fieldLabel b:empty)")
.next("td")
.css({fontSize: 15, fontWeight: "bold"});

Photo of Bernard

Bernard

  • 116 Points 100 badge 2x thumb
Additional Info. the script applied to all the empty label. ^_^ hehe
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,884 Points 20k badge 2x thumb
Doesn't it feel glorious?

I sometimes get a bit snarkly about this whole Builder / Low Code / No Code marketing thingy. But this is the bottom line whether you work with QuickBase using  native features or with script:
Normally computers control our lives - more so than you may ever realize. But at whatever your skill level work or at with whatever technology your are using, when you can actually get the computer to do your bidding you experience a rush of accomplishment and freedom. Call it Builder if you want.

When a user can g
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,884 Points 20k badge 2x thumb
>the script applied to all the empty label. ^_^ hehe

You have to find some other criteria to select just the intend empty labels. It would be great if QuickBase coded the fids into the source code of the view page so we could use simple pinpoint selectors but it unfortunately it doesn't (it does on new and edit forms). The ids that are in the view page markup refers to the position of the row in the form:

<tr class="formRow ">
  <td id="tdl_5" class="label lc">
    <label class="fieldLabel">
      <b>number</b>
    </label>
  </td>
  <td id="tdf_5" class="cell cc nowrap" colspan="100"><b>5,029.36</b></td>
</tr>

You could use these ids for selection but I think they will change if you inconsequentially modify the form in another area.
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,884 Points 20k badge 2x thumb
As to your other question about increasing the font you can add this:
$("td.label:has(label.fieldLabel b:contains(number))")
  .next("td")
  .wrapInner("<b></b>")
  .css({fontSize: 20});
But if you knowledgable of CSS you can just get rid of the <b> tag altogether (<b> is deprecated) and add the fontWeight property:
$("td.label:has(label.fieldLabel b:contains(number))")
  .next("td")
  .css({fontSize: 20, fontWeight: "bold"});

You will see <b> and <font> tags used in QuickBase formulas and in QuickBase's own HTML. They are considered deprecated by most of the web community today. But they still work and will continue to work for backward comparability. And the renegade in me sees the simplicity in their use - that's why it is called "markup" - like proofreader's marks that are inserted into the text of a manuscript to indicated formatting and layout:



Sometimes using CSS gets outrageous in its complexity to do simple things..
(Edited)
Photo of Bernard

Bernard

  • 116 Points 100 badge 2x thumb
Noted and thank you very much Dan.