Can I format BOLD inside a ternary operator?

UKRiggers · May 7, 2020, 9:18am

I want to be able to format part of a ternary operator, can I do it?

I have a button that has two states

by using this in the button

Save and enter more details {{inp_index.value ? "for " + inp_index.value.uppercase() : "[Enter Index]"}}

In simple terms I want to

inp_index.value.uppercase().format(bold)

but that doesn’t work

Is it possible to make the inp_index bold without affecting the “for”?

Teodor · May 7, 2020, 9:21am

There is no such a thing as .format(bold) …
Why not wrap this code in a  and use CSS to style the text as you want?

.mybtn span {
    font-weight: bold;
}

UKRiggers · May 7, 2020, 9:27am

Morning Teodor, the “bug in the ointment” is the word “for” in the ternary operator, I don’t want to embolden that word.

There are other ways that I could approach this (rewording for instance or multiple ternary operators) but my question is, can other types of formatting, besides uppercase() etc, be applied to parts within the ternary operator?

EDIT
Just to clarify, you can’t enter  or  within the ternary operator, or can you? I can’t get it to work.

Teodor · May 7, 2020, 9:29am

That is exactly what i am saying … wrap your code in a span and style it using CSS!

Save and enter more details {{inp_index.value ? "for <span>" +  inp_index.value.uppercase() + "</span>" : "[Enter Index]"}}

UKRiggers · May 7, 2020, 9:34am

If I put…

Save and enter more details {{inp_index.value ? "for <span>" +  inp_index.value.uppercase() + "</span>" : "[Enter Index]"}}

I get…

Teodor · May 7, 2020, 9:35am

Ah i see - let me check this.

UKRiggers · May 7, 2020, 9:37am

I did try this originally which prompted the question. Appreciate you looking into this for me

Teodor · May 7, 2020, 9:53am

You can use dmx-html for this and it will work fine:

dmx-html="'Save and enter more details' inp_index.value ? 'for <b>' +  inp_index.value.uppercase() + '</b>' : '[Enter Index]'"

UKRiggers · May 7, 2020, 10:16am

Ah yes, the dmx-html makes sense BUT it doesn’t work in a button.

Teodor · May 7, 2020, 10:26am

I tested exactly with a button, not sure what do you mean its not working?

UKRiggers · May 7, 2020, 10:31am

This is my button

<button class="btn btn-success" type="submit" dmx-html="'Save and enter more details' inp_index.value ? 'for <b>' + inp_index.value.uppercase() + '</b>' : '[Enter Index]'"></button>

And all I get is

Teodor · May 7, 2020, 10:37am

Change it to:

dmx-html="inp_index.value ? 'Save and enter more details for <b>' + inp_index.value.uppercase() + '</b>' : 'Save and enter more details for [Enter Index]'"

EDIT: or

dmx-html="'Save and enter more details' +  (inp_index.value ? 'for <b>' + inp_index.value.uppercase() + '</b>' : '[Enter Index]')"

UKRiggers · May 7, 2020, 10:41am

You’re a star. Thank you for your patience. That works

Teodor · May 7, 2020, 10:42am

The second option i added after the edit also works fine, probably easier to maintain.

UKRiggers · May 7, 2020, 10:43am

They both work, thanks.

psweb · May 7, 2020, 11:53am

Just a note from my side, not saying it will work in your case, but, sometimes when I have encountered issues like this I have found that using  does not work, i change it to  so just using the ASCII for “less than” and “greater than” gets around the issue.

UKRiggers · May 7, 2020, 12:07pm

Hi Paul, yes sometimes that works, but I had already tried that one before raising the question.

jimed99 · January 31, 2025, 11:12pm

Followed to tee... no success. Cutting and pasting code did not work.
Then started backwards by entering in the Data Binding dialogue...

Select Inner HTML > enter desired text nothing added
Select Inner HTML > enter desired text - Wappler reformatting generates the answer.
Go back, enter ternary options around the answer and moving on to next issue.

<p dmx-html="(violation_fine_start.daysUntil(var1.datetime)>25) ? '&lt;span class=&quot;bg-danger text-light&quot;&gt;$500 max reached.&lt;/span&gt;': 'yes'">
                                        </p>```