ThoughtSpot For Developers•2w ago

Andy - Is there any way to change the backgroun...

Is there any way to change the background colour of a filter on a dashboard when it has a value selected? e.g. have Age Group filter be a different colour that it is has a field selected I have tested the filter chip css options and it doesn't seem to cover it https://developers.thoughtspot.com/docs/css-variables-reference#_filter_chips_on_liveboard_and_answers As well is there a way to be able to filters into a drop down? (we have a lot of filters on our dashboards - that we can't remove) but would like to collapse them together so that the liveboard looks less busy

CSS variables reference

Reference to pre-defined CSS variables for CSS customization framework

9 Replies

yuichirio_ha•2w ago

Hey I assume, you meant - "Age Group" be different color to : "20-24" https://developers.thoughtspot.com/docs/custom-css#_css_rules_using_selectors https://developers.thoughtspot.com/docs/Interface_customCssInterface#_rules_unstable Try rules_UNSTABLE.

CSS customization framework

Customize UX elements and layout of embedded ThoughtSpot interface using custom CSS

customCssInterface

inline customCSS within the {@link CustomisationsInterface}. Use {@link CustomCssVariables} or css rules.

yuichirio_ha•2w ago

Also can you clarify second question - "a way to be able to filters into a dropdown" Not sure what you meant. Thanks

AndyOP•2w ago

ideally i want the Age Group: 20-24 to be a different colour to Business Entity: (Select), i just want some way to show that a particular filter is active on the page (as opposed to just being available to filter) in regards to the second one: lets say i have 10 filters on a liveboard. I want to have 3 filters showing as they usually do (as a pill) and then a drop down box that contains the remaining 7 filters

yuichirio_ha•2w ago

For the first one - This customizatoin is not available, you might have to write some customcss like for first chip shows different color and second one different, you try doing it with rules_UNSTABLE, you can access particular elements and modify as per your needs. read the examples in above, that should help. As for the second part - To actually customize showing particular number of filters in chips for each filter. Currently it might not be achievable, but you can raise a feature request for the same. ( try with some css hacks ) Example

  customizations: {
    style: {
      customCSSUrl: "https://cdn.jsdelivr.net/gh/thoughtspot/custom-css-demo/css-variables.css", // location of your style sheet

      // To apply overrides for your style sheet in this init, provide variable values below, eg
      customCSS: {
        variables: {
          "--ts-var-button--secondary-background": "#F0EBFF",
          "--ts-var-button--secondary--hover-background": "#E3D9FC",
          "--ts-var-root-background": "#F7F5FF",
        },
        rules_UNSTABLE: {
          '[data-testid="parameter-panel-chip"]': {
            "background-color":"red !important"
          }
        }
      },
    },
  },

  customizations: {
    style: {
      customCSSUrl: "https://cdn.jsdelivr.net/gh/thoughtspot/custom-css-demo/css-variables.css", // location of your style sheet

      // To apply overrides for your style sheet in this init, provide variable values below, eg
      customCSS: {
        variables: {
          "--ts-var-button--secondary-background": "#F0EBFF",
          "--ts-var-button--secondary--hover-background": "#E3D9FC",
          "--ts-var-root-background": "#F7F5FF",
        },
        rules_UNSTABLE: {
          '[data-testid="parameter-panel-chip"]': {
            "background-color":"red !important"
          }
        }
      },
    },
  },

AndyOP•2w ago

is there a list of elements available with rules_UNSTABLE?

yuichirio_ha•2w ago

No, it's like you select custom elements through some css selectors which is available in html, then you override and apply your styles. In above example it shows, I 've used data-testid on span to override background. You can check in the page itself what element to choose with developer tab and then override. It's a way to pretty much override any style on page. If you still facing any problem or you are trying to ask something different. We can connect whenever you avaiable quick to resolve that. Thanks.

AndyOP•2w ago

ah ok i think i understand. thanks

AndyOP•2w ago

was able to hack this usign the below css. so it is possible

rules_UNSTABLE: {
  '[data-testid="filter-panel-chip"][data-tooltip-content*="Value:"]': {
    "background-color": "#b0b8c1 !important" // Applies background if "Value:" exists in the tooltip content
  }
}

rules_UNSTABLE: {
  '[data-testid="filter-panel-chip"][data-tooltip-content*="Value:"]': {
    "background-color": "#b0b8c1 !important" // Applies background if "Value:" exists in the tooltip content
  }
}

is there any risks with using rules_UNSTABLE that i should be aware of for putting into production?

yuichirio_ha•2w ago

Yes, actually they could break if you upgrade your cluster version. Otherwise it should be fine. So, when upgrading to next version you can check if they are breaking. Not to worry too much not many changes are introduced suddenly, unless there is big release changes.

Gaming

Programming

Andy - Is there any way to change the backgroun...

Did you find this page helpful?