How to trigger custom css using javascript?

Queries and Resources
, ,
1

I want to achieve the exact functionality as shown below:

image
image2258×926 161 KB

But without manually setting the color before hand. I need it to be Green or Red based on the condition I set and when the button is pressed it should trigger the js to change the color.

Here is basic JS I am trying to set the color to green:

// Wait for the DOM to be ready
document.addEventListener('DOMContentLoaded', function () {
    // Find the JSON Explorer container element
    var jsonExplorerContainer = document.querySelector('.json-explorer-container');

    // Check if the element exists
    if (jsonExplorerContainer) {
        // Override the background color
        jsonExplorerContainer.style.setProperty('background-color', '#FF0000', 'important'); // Change this to the desired color
    }
});

Any help or another way to accomplish something similar or close to this would be appreciated.

2

unfortunately I think this basically the only way to do it with the JSON Explorer component. You could try making a Feature Request topic and ask for them to add Background Color to the Appearance settings (then you could just dynamically set the value w {{ myColor.value }} or something).

outside of that, you could use the Custom CSS in the app settings to create 2 entries for a class, one for each color. then inside your function instead of setProperty() use jsonExplorerContainer.id = condition ? "red-css-item" : "green-css-item". or you could use the ternary operator in the statement you already have. i think any suggestions will just be different variations of what you already have, but if you need a bunch of extra custom functionality you could make your own explorer w a Custom Component.