- Do you want your Spotfire buttons to look stylish and clean throughout the entire analysis?
- Do you absolutely hate formatting each and every button in Spotfire?
Of course, you do! Those were trick questions. Fortunately, Spotfire integrates with HTML and CSS, and you can use code to create a button style. Your style will be applied throughout the analysis, which means no more formatting each and every button. Yay!!
Button Style Code
The code below came from one of my coworkers — Lucas Woods — who is a rock star with HTML and CSS. I honestly don’t know how this guy writes and work in so many languages. He’s fantastic, and this code made my life a lot easier. Now, it doesn’t copy and paste very well. I’ve tried to mimic the indentations (which isn’t required), but a screenshot is also included. Just pop this into the Spotfire text area HTML editor. Obviously, you’ll want to update the font, font-size, colors, and other properties for your own preferences, but it’s super simple. Create your own style button!
font-family: ‘Roboto’, sans-serif;
color: #ffffff !important;
font-size: 14px !important;
font-family: ‘Roboto’, sans-serif !important;
padding-left: 16px !important;
padding-right: 16px !important;
height: 36px !important;
background-color: #2196F3 !important;
background-image: none !important;
border: 0px #fff solid !important;
border-radius: 2px !important;
Of course, I have to include a picture of what this code generates, so here are the buttons.
Now, I have a few warnings for those who either aren’t super familiar with HTML/CSS or are just starting to use HTML/CSS in Spotfire.
- In order for the <style> tag to be recognized, turn off HTML sanitation. I wrote a blog post on how to do that. You will need admin privileges.
- Many people are used to right-clicking and selecting ‘Edit Text Area’. You cannot use this option after you add the HTML. If you do, it will wipe out the code you just added. You will need to make any subsequent updates to the text area via the HTML editor. This sounds horrible, but Spotfire provides all the same controls, you can use Ctrl F, and your HTML will get a lot better!
In order to create a beautiful button style, you may also want to check out….
This is only the tip of the iceberg in terms of what you can do with HTML and CSS in Spotfire text areas. More posts forthcoming!
Guest Spotfire blogger residing in Whitefish, MT. Working for SM Energy’s Advanced Analytics and Emerging Technology team!