Last week, during TIBCO’s Dr. Spotfire Office Hours, I presented on the basics of CSS & HTML for Spotfire. If you missed it and want to check it out, use this link to the TIBCO website. I ended that presentation by showing users how you can use the HTML style tag and CSS to format almost every piece of the Spotfire application. I also promised a follow up to show users how to find the Spotfire CSS classes. Here’s an example of a style I use in most of my DXPs.
Now, you might have a lot of questions at this point. What does this really do? Why would you want to do this? Let me show you a very simple and practical example.
Part of the code shown above starts with “.sfc-action-button” (towards the bottom). This piece of code formats all current and future action control buttons on this page. I just copy and paste this code into a single text area on each page, and I don’t have to worry about button formatting. Without HTML and CSS, you have to format these one at a time, which is tedious and time consuming.
The next logical questions are …. How do you know that .sfc-action-button controls Spotfire buttons? And, what is “sfc-action-button”? That is what this blog post is all about. Each piece of syntax above that starts with a period is a class, and I’ll show you how to figure out which classes to use in Spotfire. First, we have to do a bit of setup.
Setup
We are going to use Spotfire’s Developer Tools to answer the questions above. In order to get access to the Developer Tools menu, you must check the box shown below. It is not checked by default.
Once this box is checked, you’ll see the following menu in Tools.
Next, we are going to inspect the HTML elements in order to find the CSS classes. What does that mean exactly? Well, think of each text area and each visualization as a mini web page that consists of HTML elements. We will use the process of inspection to find out what the Spotfire CSS classes are named so that we can use them in our own code.
You may inspect in the application or in a web browser. I prefer the browser (Chrome specifically). I’ll demonstrate both.
Find Spotfire CSS Classes
To inspect in Spotfire, go to the Tools menu. Select Development and Developer Tools. This will open a new window that looks like this.
You’ll want to make this window pretty big and probably drag it over to another monitor. From here, click on the arrow in the square (circled above). It will turn blue, and you’re in an “inspect” mode. Now, move your mouse around the application.
As you hover your mouse over bits and pieces, the Developer tools window will jump to the HTML behind that element. Now, this might be a bit overwhelming at first, and it can be tricky to know what to look for, but we can make sense of it. Watch the short 2 minute video below to see it in action.
Now, that was a fairly simple example of inspection, but I’ve learned a few things about CSS classes and inspection over time.
- Pieces of the application might be controlled by more than one class.
- Some parts of the application are rendered at runtime and are not configurable.
- There’s a quick and easy way to figure out what a particular CSS class controls.
To see all of this in action, watch this 5-minute video.
Okay, now that you understand how to inspect classes in the application, I’ll provide instructions for inspecting in a browser. There isn’t a lot of difference. I just wanted to let you know you can do it.
Inspecting Classes in Chrome
Inspecting HTML elements and CSS classes in Chrome is very similar. You’ll just need to grab a URL from the Tools menu. Select Development and Developer Tools and Copy URL to clipboard. Then, you’ll be able to paste from the clipboard into the browser address bar. To inspect, hit F12 and click the same arrow in the square button.
Note, you can also inspect from the same document in the web player. Using the method above just requires no loading time and accomplishes the same end.
Conclusion
That’s it for this week’s post. I hope you feel like you now know how to inspect HTML to find the Spotfire CSS classes. As always, please feel free to comment below.
Spotfire Version
Content created with Spotfire 10.2.
If You Enjoyed This
- Check out my post on creating multiple button styles.
- Learning Iron Python for Spotfire
Pingback: How to Reset Marking When Changing Pages » The Analytics Corner