Way to add different colors for the List item tags

Ask the community
21

For list details pages

<script>
document.addEventListener("DOMContentLoaded", function() {
    const colorMap = {
        'Internal': {'text': '#ffffff', 'background': '#1E8700'},
        'Relationship': {'text': '#ffffff', 'background': '#D7532C'},
        'SOME RISK': {'text': '#ffffff', 'background': '#AA5E2C'}
    }
    
    setInterval(
        function() {
            for (let key in colorMap) {
                if (colorMap.hasOwnProperty(key)) {
                    $('.sw-pre-tag-container span:contains("' + key + '")').css('background-color', colorMap[key]['background']);
                    $('.sw-pre-tag-container span:contains("' + key + '")').removeClass (function (index, className) {
                        return (className.match (/(^|\s)sw-background-color-\S+/g) || []).join(' ');
                    });
                    $('.sw-pre-tag-container span:contains("' + key + '")').css('color', colorMap[key]['text']);
                    $('.sw-pre-tag-container span:contains("' + key + '")').removeClass (function (index, className) {
                        return (className.match (/(^|\s)sw-text-color-\S+/g) || []).join(' ');
                    });
                }
            }
        },
        200
    );
});
</script>
1 Like
22

Hi @artur
Thanks a lot for your code. It does actually work for me to color list details tags.

How can I adapt the code to color the entire list item, not only the tag ?

Thanks a lot !

2 Likes
23

@Elise entire row would be a slightly different one. what would be the criteria of coloring ?

24

Hi @artur, thanks a lot for your answer !
For instance, here is a case where I would like to color all the items according to the value of the tag “:rocket: A louer” or “:construction: Travaux” (instead of coloring just the tag itself).
Do you think that it would be possible ?

image

2 Likes
25

Great idea Elise! This would be so useful, especially for list items with different attributes that need to be differentiated at a glance. Hope this is incorporated into the list blocks Artur.

26

Dear @Elise and @Ben,

I have added this option as a feature request :slight_smile:

Thanks once again.

1 Like
27

Hi @artur, this code is great, thank you! I use it for lists and list details. Could you also share a code for calendar blocks? So for the little window that opens and shows record information? That would be great! :slight_smile:

28

Should this additional code work within the new Softr studio? @artur

29

@Dan needs to be checked. BTW we are working on giving an option to do it from the studio without coding

1 Like
30

@artur pretty sure its not working now within the new studio but makes sense to include as an option rather than code :+1:

1 Like
31

Hi Artur, do I rename the names like ‘Ramp 1 - Luke Britton’ and ‘Food Delivery’ to be the name of the field names that the Softr List block field placeholders are mapped to?

(I am using Airtable fields that are mapped to a Softr List block). Softr list block mappings do not have unique identifiers that are visible to me, aside from their respective sequence in the block mapping to the database field.

If you could clarify this, it would be helpful

Thanks!