Discussions

 View Only
Expand all | Collapse all

How to bold values in a Form?

  • 1.  How to bold values in a Form?

    Posted 02-08-2018 01:05
    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.


  • 2.  RE: How to bold values in a Form?

    Posted 02-08-2018 01:51
    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).


  • 3.  RE: How to bold values in a Form?

    Posted 02-08-2018 02:23
    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>


  • 4.  RE: How to bold values in a Form?

    Posted 02-08-2018 03:19
    I'm not familiar with IOL. Can you help me where to find this option? :)


  • 5.  RE: How to bold values in a Form?

    Posted 02-08-2018 03:26
    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">https://haversineconsulting.quickbase.com/db/bgcwm2m3z">https://haversineconsulting.quickbase.com/db/bgcwm2m3z


  • 6.  RE: How to bold values in a Form?

    Posted 02-08-2018 07:04
    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>");


  • 7.  RE: How to bold values in a Form?

    Posted 02-08-2018 07:32
    And is there a way to increase the font size of the value as well?


  • 8.  RE: How to bold values in a Form?

    Posted 02-08-2018 15:47
    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>");


  • 9.  RE: How to bold values in a Form?

    Posted 02-09-2018 01:13
    I see.. thank you for your help Dan. You're such a great person.


  • 10.  RE: How to bold values in a Form?

    Posted 02-09-2018 01:36
    $("td.label:has(label.fieldLabel b:contains(PO TOTAL)),
      td.label:has(label.fieldLabel b:contains(PO Currency)")") .next("td") .wrapInner("<b></b>");

    I tried using this but it didn't work. Is it because my PO Currency in the form uses an alt text which is just blank?


  • 11.  RE: How to bold values in a Form?

    Posted 02-09-2018 01:39
    There appears to be a typo. Try this::

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


  • 12.  RE: How to bold values in a Form?

    Posted 02-09-2018 01:41
    By the way, only the PO TOTAL works but didn't work for PO Currency.


  • 13.  RE: How to bold values in a Form?

    Posted 02-09-2018 01:50
    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


  • 14.  RE: How to bold values in a Form?

    Posted 02-09-2018 02:04
    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"});



  • 15.  RE: How to bold values in a Form?

    Posted 02-09-2018 02:07
    Additional Info. the script applied to all the empty label. ^_^ hehe


  • 16.  RE: How to bold values in a Form?

    Posted 02-09-2018 02:15
    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


  • 17.  RE: How to bold values in a Form?

    Posted 02-09-2018 02:21
    >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.


  • 18.  RE: How to bold values in a Form?

    Posted 02-08-2018 17:52
    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..


  • 19.  RE: How to bold values in a Form?

    Posted 02-09-2018 01:19
    Noted and thank you very much Dan.


  • 20.  RE: How to bold values in a Form?

    Posted 07-07-2020 16:22
    Edited by Hamza Ahmed 07-07-2020 16:27
    Hi Dan,

    I have setup the IOL and have added the following to make a numeric value bold when viewing a record but it doesn't seem to be working. I only have the module.js page created as shown in the IOL setup

    (function(){
    //$("img[qbu=module]").remove();
    //$("img[qbu=module]").hide();

    var querystring=document.location.search;

    if(/a=dr/i.test(querystring)) {
    //DISPLAY RECORD PAGE

    $("td.label:has(label.fieldLabel b:contains(Test Field))")
    .next("td")
    .wrapInner("<b></b>")
    .css({fontSize: 20});
    }
    })();




  • 21.  RE: How to bold values in a Form?

    Posted 07-09-2020 16:43
    Hamza, is the label/fieldname for your field "Test Field"?

    You would need to change the b:contains(Test Field) to contain the label you're searching for.

    ------------------------------
    Ryan Stanford
    ------------------------------