Change the font/text color in a repeater or in a text element

Discussion Ask a question
, ,
1

Question:
I am looking for a code or guide to change the font/text color in a repeater. Or even in a text element.

Product:
Wix Studio Editor

What are you trying to achieve:

002
0021920×1080 198 KB

Additional information:

2

You can set custom HTML and styling of a Text element with: html - Velo API Reference - Wix.com

3

Thanks Anthony! But if it have a condition of:

if Status = Completed, it will turn to Dark Gray
if Status = Ongoing, it is Green
else = Light Gray

I also use a repeater.

4 
import wixData from 'wix-data';
 
$w.onReady(function () {

 $w("#repeaterRemarks").onItemReady( ($w, itemData, index) => {

 if (itemData.availability === "Complete") {
 let value = $w("#textRemarks").text;         
 $w("#textRemarks").html = "<p style='font-size: 14px; font-style: avenir; text-align: left; color: #0C856C;'>" + value + "</p>";     
 }  

 if (itemData.availability === "Ongoing") {
 let value = $w("#textRemarks").text;         
 $w("#textRemarks").html = "<p style='font-size: 14px; font-style: avenir; text-align: left; color: #6A6A6A;'>" + value + "</p>";     
 }
 
 else {  
 let value = $w("#textRemarks").text;             
 $w("#textRemarks").html = "<p style='font-size: 14px; font-style: avenir; text-align: left; color: #0C856C;'>" + value + "</p>";     
 } 
 
} );

 wixData.query("REMARKS") 
 .find() 
 .then( (results) => {  
 let repeaterData = results.items  
 $w("#repeaterRemarks").data = repeaterData 
 } );
 
 } );

here is the code I tried

5

0308_output
0308_output896×366 18.7 KB

this is the output from the code above, but the “ongoing and -” didn’t turn to gray.

1 Like
6

#repeaterStatus
#repeaterStatus #textStatus

7

#repeaterTransactDT
#repeaterTransactDT #textTdat

8

#repeaterRemarks
#repeaterRemarks #textRemarks

9

I have used the below code before for something similar. It may work for you if adjusted.
Please replace ‘status’ and ‘repeatedText’ with the actual field name and ID of your text element in the repeater, respectively

$w.onReady(function () {
    $w("#myRepeater").onItemReady(($item, itemData, index) => {
        let status = itemData.status; // assuming 'status' is the field name in your data
        let textColor;

        switch(status) {
            case 'Completed':
                textColor = 'DarkGray';
                break;
            case 'Ongoing':
                textColor = 'Green';
                break;
            default:
                textColor = 'LightGray';
        }

        $item("#repeatedText").style.color = textColor; // assuming 'repeatedText' is the ID of your text element
    });
});
10

thank you I will try this one.

11

Is the green text the default or already set in the UI? And if that’s the case is the field itemData.availability correct? And is “availability” a string and not some other type?

I don’t really see anything incorrect with the code itself. One minor nit would be that .onItemReady( ($w should be something like .onItemReady( ($item to avoid confusion with the global $w but it shouldn’t be causing any actual issues with JS’s scope.

12

It’s because in your code you used $w instead of $item (since it is in a repeater). So all of the text will turn the same color vs the individual item.