TFD
ThoughtSpot For Developers•5mo ago
Nikhil Kumaran S

CSS customization framework

Hi Team, for customising/overriding CSS styles, the only way is to use jsdelivr url? https://developers.thoughtspot.com/docs/custom-css#_overview We are using GitLab, it's not supported by jsdelivr
CSS customization framework
Customize UX elements and layout of embedded ThoughtSpot interface using custom CSS
4 Replies
Nikhil Kumaran S
Nikhil Kumaran SOP•5mo ago
@shikharTS @utsav.kapoor @Vivek ^
utsav.kapoor
utsav.kapoor•5mo ago
Hey @Nikhil Kumaran S - Gitlab will also work. Please ensure that URL is added in your CSP settings.
Nikhil Kumaran S
Nikhil Kumaran SOP•5mo ago
@utsav.kapoor This is our security config. This https://gitlab.com/nikhilkumaran/thoughtspot/-/raw/main/ts.css is the file we are using. This is our init function 
init({
      thoughtSpotHost: TSURL,
      authType: AuthType.TrustedAuthTokenCookieless,
      getAuthToken: (async () => {
        try {
          const token = await generateTSToken().unwrap();
          return new Promise((resolve) => resolve(token));
        } catch (err) {
          console.log('error', err);
        }
      }) as any,
      autoLogin: true,
      loginFailedMessage: "This user doesn't have access to insights",
      callPrefetch: true,
      customizations: {
        content: {
          strings: {
            Liveboard: 'Dashboard',
            Edit: 'Modify',
            'Show underlying data': 'Show source data',
            SpotIQ: 'Insights',
            Monitor: 'Alerts',
            Worksheets: 'Worksheets (Hidden)',
            Views: 'Views (Hidden)',
            'SQL View': 'Datasets',
          },
        },
        style: {
          customCSSUrl: 'https://gitlab.com/nikhilkumaran/thoughtspot/-/raw/main/ts.css',
        },
      },
      username: email,
    })
init({
      thoughtSpotHost: TSURL,
      authType: AuthType.TrustedAuthTokenCookieless,
      getAuthToken: (async () => {
        try {
          const token = await generateTSToken().unwrap();
          return new Promise((resolve) => resolve(token));
        } catch (err) {
          console.log('error', err);
        }
      }) as any,
      autoLogin: true,
      loginFailedMessage: "This user doesn't have access to insights",
      callPrefetch: true,
      customizations: {
        content: {
          strings: {
            Liveboard: 'Dashboard',
            Edit: 'Modify',
            'Show underlying data': 'Show source data',
            SpotIQ: 'Insights',
            Monitor: 'Alerts',
            Worksheets: 'Worksheets (Hidden)',
            Views: 'Views (Hidden)',
            'SQL View': 'Datasets',
          },
        },
        style: {
          customCSSUrl: 'https://gitlab.com/nikhilkumaran/thoughtspot/-/raw/main/ts.css',
        },
      },
      username: email,
    })
The styles are not applied. But if I give jsdelivr url(https://cdn.jsdelivr.net/gh/Nikhil-Kumaran/react-state-machine-example@master/ts11.css), it works. The styles are applied.
utsav.kapoor
utsav.kapoor•5mo ago
@Nikhil Kumaran S - Can you add https://gitlab.com/nikhilkumaran/thoughtspot in your CSP settings Links: https://developers.thoughtspot.com/docs/Interface_EmbedConfig#_customcssurl and https://developers.thoughtspot.com/docs/Interface_EmbedConfig#_customcssurl
GitLab
Nikhil Kumaran S / thoughtspot · GitLab
GitLab.com
EmbedConfig
The configuration object for embedding ThoughtSpot content. It includes the ThoughtSpot hostname or IP address, the type of authentication, and the authentication endpoint if a trusted authentication server is used.

Did you find this page helpful?