We want to display a label with the tagname and the left side and the value on the right.
The label will always be the same width but we want to fill the space in the middle with dots.
Is there a way of doing this with a label ?
Similar idea to the image below
Do you need this to be dynamic? Like label text changing, adding or removing label rows, etc? I think there are ways to do both, but dynamic can get a bit complicated.
For static:
First, use a line across the space you want to fill and change the stroke style to dashed.
Then, make the label (lets say the ‘AC Deluxe’) and width to just fit the text. Make the background opaque and color match the real background behind the label. Then, the label should be on top of the dashed line and should give you the look you want.
@mrogers So overlay a label on top of the dashed line?
We created it this way but wanted to see was there a way of making it in 1 label.
For the dynamic I just used a html text background to cover over the dots.
Two ways to do this through expressions:
stringFormat("%s%s%s",
"Label",
repeat("-", 50 - (len("Label") + len("$2500"))),
"$2500"
)
replace(stringFormat("%-45s%s",
"Label",
"$2500"
), " ", "-")
I like the latter a bit more, myself - no need to specify your different elements multiple times. Java’s string formatting operators let you enter a fixed amount of padding (that is, %-20s will add spaces to the right of the string until it hits 20 characters), which you can then use to pad out your string. Then just append your currency value to the end.
1 Like
Thanks @PGriffith with a bit of tweaking the second one worked for it. Our label had some spaces in it too so it was replacing them with '.' ended up with
replace(replace(stringFormat("%-45s%s",
replace("Datahall 2"," ","-"),
"250kW"
), " ", ".")
,"-"," ")
1 Like
@PGriffith
Is there a way to make the text on the right filled right to the edge of the label.
There is a bit of a gap to the right of each
See 2 examples below
You could do the padding operation in the other direction for the other value - abbreviated, something like:
stringFormat("%-30s%30s", "Datahall 2222222", "250000")
The leading - in the padding specifier (%-30s) means pad to the left - omitting the - means pad to the right. If you do the same replacing operation again to replaces spaces with the same padding character throughout, you should get a consistent format.
Consider switching to a fixed-width font.
Hello, I just wondering would that be possible to have long space for label component in perspective? because all the long space I created has just only shown one white space instead. Thanks!
Browsers automatically collapse consecutive spaces, by design. Try using the Markdown component, and possibly wrapping your whitespace in backtick/graves:
text` `padded
1 Like
