Tags Color change

[Marine.Hovhannisyan]

Hi guys, as many of you asked, here is a short code snippet which you can use to change the color of tags in our dynamic blocks. You need to add it to the page Settings → Custom Code → Header (please make sure to make the corresponding code changes of tag names before applying this code)

<script> document.addEventListener("DOMContentLoaded", function() {
const colorMap = {
'Ramp 1 - Luke Britton': {
'text': '#ffffff',
'background': '#1E8700'
},
'Food Delivery': {
'text': '#ffffff',
'background': '#D7532C'
},
'Online Courses': {
'text': '#ffffff',
'background': '#AA5E2C'
}
}
setInterval(function() {
for (let key in colorMap) {
if (colorMap.hasOwnProperty(key)) {
$('.js-list-item span:contains("' + key + '")').css('background-color', colorMap[key]['background']);
$('.js-list-item span:contains("' + key + '")').removeClass(function(index, className) {
return (className.match(/(^|\s)sw-background-color-\S+/g) || []).join(' ');
});
$('.js-list-item span:contains("' + key + '")').css('color', colorMap[key]['text']);
$('.js-list-item span:contains("' + key + '")').removeClass(function(index, className) {
return (className.match(/(^|\s)sw-text-color-\S+/g) || []).join(' ');
});
}
}
}, 200);
}); </script>

[Dox]

This is really good. Thank you for sharing it.

There is any snippet that can do the folow:

If a list item containg “tag 1”, per example, then some ccs values of the list item body change to text’: ‘#color’,
‘background’: ‘#color’.

I am trying to enhance visibility of some items using tags but i dont know how to do it.

Thank you again, @Marine.Hovhannisyan

[Suzie]

Hey @Dox,

Unfortunately, we do not have a custom code to achieve that, let’s see if other members would be able to help

[vskytte]

This does not seem to work for me any longer. Worked until a few days ago - maybe it has something to do with an update to an update to the list block? Is there a way to fix this - or is it just at my end it has stopped working?

[rebeccajane]

Hi @artur & @Suzie & @Marine.Hovhannisyan - can you please share the updated custom code based on the new table block update? We use the ‘tag’ system to link to formula text fields in airtable and use softr.io to display the tag as a ‘x’ colour based on the exact text. Thanks!

[artur]

@rebeccajane @vskytte

can you folks try this version ?

<style>
		// tags with content "Low" 
    #table1 .tag-item[data-content="Low"] {
        background-color: #F00 !important;
    }
		// add span to the selector if you want to customize text color
    #table1 .tag-item[data-content="Low"] span {
        color: #FFF !important;
    }

		// tags that start with word "Low" 
    #table1 .tag-item[data-content^="Low"] {
        background-color: #F00 !important;
    }
		// tags that have substring "low"
    #table1 .tag-item[data-content*="low"] {
        background-color: #F00 !important;
    }

		// ratings that are 1 start
    #table1 [data-rating="1"] span {
        color: #F00 !important;
    }
</style>

[rebeccajane]

@artur

<style>
		// tags with content "Low" 
    #table1 .tag-item[data-content="Low"] {
        background-color: #F00 !important;
    }
		// add span to the selector if you want to customize text color
    #table1 .tag-item[data-content="Low"] span {
        color: #FFF !important;
    }

		// tags that start with word "Low" 
    #table1 .tag-item[data-content^="Low"] {
        background-color: #F00 !important;
    }
		// tags that have substring "low"
    #table1 .tag-item[data-content*="low"] {
        background-color: #F00 !important;
    }

		// ratings that are 1 start
    #table1 [data-rating="1"] span {
        color: #F00 !important;
    }
</style>

It works great - thank you so much!

[Ben]

Hi @artur. Can you provide versions of this formula for list and list details blocks as well please? I have the same need for coloring tags from formula field values in tabs and modals with other dynamic blocks as well.

[Tim_ClimatEU]

Upvoting this, I have the same use case Is it complicated to adjust it to lists?

[jak]

Hey guys, this was working for the old list blocks but since I switched to the new ones it no longer does. Any ideas?

<style>
    /* tags with content "Assessment failed to process" */
    #list2 .tag-item[data-content="Assessment failed to process"] {
        background-color: #FEF4F5 !important; /* Light red */
    }
    #list2 .tag-item[data-content="Assessment failed to process"] span {
        color: #E92A42 !important; /* Red text */
    }

    /* tags with content "Assessment currently processing" */
    #list2 .tag-item[data-content="Assessment currently processing"] {
        background-color: #FFF8E9 !important; /* Light yellow */
    }
    #list2 .tag-item[data-content="Assessment currently processing"] span {
        color: #FAB623 !important; /* Yellow text */
    }

    /* tags with content "Assessment processed - with errors" */
    #list2 .tag-item[data-content="Assessment processed - with errors"] {
        background-color: #FFEBD9 !important; /* Light orange */
    }
    #list2 .tag-item[data-content="Assessment processed - with errors"] span {
        color: #F29339 !important; /* Orange text */
    }

    /* tags with content "Assessment processed successfully. Please check questions before making submissions" */
    #list2 .tag-item[data-content="Assessment processed successfully. Please check questions before making submissions"] {
        background-color: #EBF5ED !important; /* Light green */
    }
    #list2 .tag-item[data-content="Assessment processed successfully. Please check questions before making submissions"] span {
        color: #3A974C !important; /* Green text */
    }
</style>

[Viktoria]

Hi @jak, on the new blocks you can change the tag color of inline filters and fields from the block settings.
If you’re using the new Beta blocks, you can find the tag field or inline filters settings in the block settings → styles panel.
If you’re using non-Beta blocks, you can find the settings on pencil icon of each field.

Hope this information helps

[jak]

Hi @Viktoria! Thanks for your message.

For my use case, what I am wanting to do is have different tag colours for different statuses. These are formula fields in Airtable. I was using the custom code above in the header of the page to achieve this. But in the Beta blocks it stopped working.

In the ‘Styles’ panel I tried the three options (Single, as defined in data source & the colorful one(?)) but none seem to work with the custom code.

[Ben]

Hi @jak. It’s not uncommon for custom codes to break overtime or have stability issues. A good solution for tag colors based on formula fields would have Softr support Airtable’s new feature that transforms them into dropdowns since Softr already applies colors from dropdowns in a base to tags.

Airtable's new formula output format "Single Select" to be recognized by Softr

Airtable recently added a feature that lets you format a formula field’s output to look like a single select field. You can color the output options, it just doesn’t function like an actual single select field since the outputs are pre-determined by the formula’s conditions. I would love for Softr to allow a list block to be filtered by this field type and be able to sync the output options from the data base. Right now it treats it like a normal formula field, which leaves you with only static…

[jak]

Hey @Ben! I had no idea about that feature - thank you! I set it up in Airtable and looks good, but unfortunately when bringing it into Softr it doesn’t change the colours. My setting is ‘As defined in data source’.

I spoke to the Softr support team and apparently dont support colors from ‘formula fields as single select fields’ yet. Have you got it to work before?

[Workflowheroes_Marc]

Here is a bit of a workaround that could help.
Create a single select field with all status and colors. Create an airtable automation that looks at your custom coded field (or any changes happening to it) and update the single select field accordingly. In softr change the data source field to the single select.

[Viktoria]

Hello @jak. I’ve got some good news for you, we edited the custom code and this one should work on beta blocks too. Please try it out and let me know if there is anything else I can help you with.

Note: instead of list2 please write your blockID

    <script>
        
        window.addEventListener("block-loaded-list2", () => {
        
             document.querySelectorAll('#list2 ul li span').forEach(span => {
                const parentDiv = span.parentElement;
                if (span.textContent === 'Red') {
                    parentDiv.style.backgroundColor = '#FEF4F5'; 
                    parentDiv.style.color = 'red';
                } else if (span.textContent === 'Green') {
                    parentDiv.style.backgroundColor = '#E0F7E9'; 
                    parentDiv.style.color = 'green';
                } else if (span.textContent === 'Blue') {
                    parentDiv.style.backgroundColor = '#E0F0FF'; 
                    parentDiv.style.color = 'blue';
                }
            });
            
        });
       
    </script>

[javierlaborde]

Hi, I tried to make it work thru a “List with horizontal cards and upvote button”, one of the content fields is a formula field from Airtable formatted from Airtable to give results as single select outputs, in my case the list it’s called “encuesta-inicial-escuelas-por-responder” and the outputs can only be “Sí” or “No”, I modified the code to the following, but I’m not getting any colors…

Anybody has an idea on what am I doing wrong?

Thanks in advance.

<script>
        
        window.addEventListener("block-loaded-encuesta-inicial-escuelas-por-responder", () => {
        
             document.querySelectorAll('#encuesta-inicial-escuelas-por-responder ul li span').forEach(span => {
                const parentDiv = span.parentElement;
                if (span.textContent === 'No') {
                    parentDiv.style.backgroundColor = '#F8D1D1'; 
                    parentDiv.style.color = 'red';
                } else if (span.textContent === 'Sí') {
                    parentDiv.style.backgroundColor = '#E0F7E9'; 
                    parentDiv.style.color = 'green';
                }
             }
             )
        }
        )
</script>```

[jak]

So pretty thank you @Viktoria!

[jak]

Think its just an issue with your syntax. Try

<script>
    window.addEventListener("block-loaded-encuesta-inicial-escuelas-por-responder", () => {
        document.querySelectorAll('#encuesta-inicial-escuelas-por-responder ul li span').forEach(span => {
            const parentDiv = span.parentElement;
            if (span.textContent === 'No') {
                parentDiv.style.backgroundColor = '#F8D1D1'; 
                parentDiv.style.color = 'red';
            } else if (span.textContent === 'Sí') {
                parentDiv.style.backgroundColor = '#E0F7E9'; 
                parentDiv.style.color = 'green';
            }
        }); // Correctly close forEach
    }); // Correctly close addEventListener
</script>

[mikeImapper]

Tried to replicate what @Viktoria said but could not make it work as I am not able to find the ID of my list (found the block ID though).

So went on with this:

window.addEventListener("customer-orders-table", () => {
        
             document.querySelectorAll('[data-content] span span').forEach(span => {
                const status = span.closest('[data-content]').getAttribute('data-content');
                console.log('Status:', status);
            
                if (status === 'DO NOT SHIP') {
                    span.style.backgroundColor = '#FEF4F5';
                    span.style.color = 'red';
                } else if (status === 'TO BE SHIPPED BUT NO STICKER') {
                    span.style.backgroundColor = '#FFF3E0';
                    span.style.color = '#FF9800';
                }
            });
            
        });

but still not working, any help?