Cross out the price

Ask for Help
1

Hi everyone
How to cross out the price like the following screenshot …?

image

2

I believe you can use markdown for this.

Text

~~ before and after the text accomplishes the above.

3

hi @kyleheney thanks for the response
I’ve tried it, but it doesn’t work.
I can’t add ~~ in number format

image
image1495×442 110 KB

4

You’ll need to create a template column that adds the ~~ to your number column (before and after the number value). In your app, add this new template column as a Rich Text component.

If this is intended to be used in a card layout, the Rich Text may not come through in the rendered list. For this, you likely need to resort to a CSS solution. There are several examples of how to apply CSS to portions of your app, but the specific CSS for this strike-through function should be something like:

text-decoration: line-through

2 Likes
5

yes, i want to use card layout.
I’m really bad at using CSS…:grin:

6

You could either use a template column to replace all of the numbers with the strikethrough version of the same number, or you could create a javascript code column that converts it like this:

image

image
image486×633 30.3 KB 

return strikeThrough(p1.toString());

function strikeThrough(text) {
  return text
    .split('')
    .map(char => char + '\u0336')
    .join('')
}

The problem is that it loses the formatting from the number column, so you could use something like this version, which adds the ‘Rp’ and adds the thousands separator. It doesn’t add the decimal if it’s zero, but probably could be done if needed.

return strikeThrough("Rp " + p1.toLocaleString());

function strikeThrough(text) {
  return text
    .split('')
    .map(char => char + '\u0336')
    .join('')
}

image

The end result looks like this in a card:

image
image375×780 60 KB

5 Likes
7

Hello Jeff! Thank you for you solution.

I tried but I still don’t see the thousands separator.
that could be happening?

captura
captura530×874 37.9 KB

8

What are your region/local settings for your browser and computer? I had posted in an older thread (but can’t find it anymore) where I had discovered through a google search that the thousands separator worked differently for a Spanish local. A 4 digit number will not show a thousands separator, but any number that’s larger than 9999 will show a thousands separator? It’s possible that is the case if your settings are set to Spanish, or a Spanish speaking region. What happens if you have a number, such as 10,000?

9

Thanks! I am in Argentina. Now I changed computers and I see the thousands separator but with a “,” here we use “.”
Is there a way to display the thousands separator with a dot?

10

The toLocaleString part of the code sets the formatting of numbers based on the locale set on that specific computer. If your computer is set to a locale (such as US) that uses “,” then it will display “,”. If it’s set to a locale that uses “.”, then it will display “.”. If your locale setting does not display a thousands separator for numbers less than 10000 (such as ES-Spanish), then it will not display a thousands separator until you have 10000 or above. That code is designed to be flexible and display numbers in whichever format each individual user has set as their chosen regional locale.

I’m guessing that you computer is set to Spanish (es-ES), but it’s not set to Argentine Spanish (es-AR). Regular Spanish does not use a thousands separator for numbers less than 10000. Argentine Spanish does use a thousands separator for numbers less than 10000. Your other computer may be set to English, so that’s why you see a thousands separator, but it’s a comma.

If you want the code to ignore the chosen regional locale settings for each user, then you should be able to force it to Argentine Spanish but changing
toLocaleString()
to
toLocaleString("es-AR")

2 Likes
11

Always so clear and bright Jeff. Thanks for your kind explanation!

1 Like