CSS in the Style Tag — Part 6

Hi Everyone! Welcome to the 6th and final post in the HTML series.  If you have just stumbled onto this post, use the links below to catch up on the series.

Intro to HTML 

HTML Tag Attributes

Using CSS in HTML

Containers and Style Attributes

HTML for Lists

 CSS with Style

This post picks up where post 4 left off with CSS.  To review, CSS can be written in 3 ways.  As a Spotfire developer, you care about 2 of them.

  1. In a separate CSS file — only applicable to building web pages
  2. Inside an HTML tag using the style attribute (see post Containers and Style Attributes).
  3. Inside a style tag

Now, folks new to HTML will generally start with the style attribute, but using CSS inside a style tag is where you can achieve beauty and efficiency in Text Areas.  This method allows you to create a reusable CSS template for all DXPs, and formatting will be a thing of the past.  It’s magical!  Furthermore, CSS opens up formatting for pieces of the application that have no GUI.  In other words, the only way to format it is with CSS.

In order to tackle this subject, it will be broken down into 4 parts.

  1. Example of CSS in a style tag
  2. Explanation of the basic syntax and rules
  3. Other syntax and rules
  4. Explanation of how to decipher the “Spotfire” elements

CSS Example

Let’s start off with an example so you have a frame of reference.  Download this Ruths.ai template NFL Expectancy Win Calculator.  (Note: The button says subscriber-only, but click it anyway.  It will take you to a different website.  You might have to create an account, but the template is free.).  Go to the Expected Wins Page.  In the Pythagorean Win Expectancy Text Area, right-click and select Edit HTML to see the code… A LOT of code.  Scroll down in the sample template to make sure you know where the end is.  I’ve taken a small screenshot below.  This was all written by Lucas Wood of Ruths.ai.

In this example, the code is controlling the appearance of the entire template.  It can be copied and pasted into other DXPs to achieve the same look and feel.  Next, let’s look at the rules and structure for writing this type of code.

CSS Syntax

I’ve mentioned them before, and I’ll mention them again — W3Schools is a great resource for learning HTML, CSS, and JavaScript.  The image below is from their site that demonstrates the basic syntax.

It’s very simple syntax that consists of a selector and a declaration block.  The declaration block uses property-value pairs where the property and value are separated by a colon and multiple property-value pairs are separated by semi-colons.  The declaration block itself is wrapped in squiggly braces.

Now, selectors are important.  They find HTML elements and format all elements of that type on a page (or in our case, in a Text Area or DXP file).  This is the efficiency I have been talking about.  CSS formats everything with one block of code so you don’t have to format individual elements (like buttons) or add attributes to all HTML tags to format them.

There are many different types of CSS selectors, and you should definitely review them at  W3Schools .  Here is a simple example of an element selector.  The “p” references the <p> tag, and the selector is selecting all of the <p> tagged content and formatting it.


Here is an example of a class selector from the Ruths.ai template.  The selector is looking for the .sf-element-page-tab class.  It will select all page tabs and change the border and padding accordingly.


Now that you know the basic syntax, let’s look at some specific code in the template that might not yet make sense.  For example, you may be wondering what @import and !important are doing.

Other Rules & Syntax


CSS also utilizes “at-rules”.  The “@import” is an example of an “at-rule”.  At-rules are special instructions that control how styles are applied.  In the case of this example, @import is pulling in a Google font.  Other examples include @media, @font-face.


Each line of CSS in the template has “!important” at the end of it.  “!important” establishes priority.  It is telling SPotfire this code takes precedence over any other formatting that might be in the template, such as formatting in HTML tags or formatting from the set theme.  The exclamation mark is called a delimiter token, and “important” is a keyword.


You may also have noticed that a line can be commented out with a forward slash and an asterisk.

Okay, that was a lot of talk about syntax.  However, there is still more to learn.  Next, we are going to talk about how to decipher the classes used by Spotfire. For example, if we want to change the active page tab color, how do we know to write “.sf-element-page-tab.sfpc-active”?

CSS for Spotfire

To figure this out, you can use the Developer Tools that accompany the browser to inspect the underlying HTML and CSS that creates the DXP in the web player.  In Chrome, DevTools are accessible by pressing F12.  So, open a DXP in the web player, press F12, click the button that looks like this  and click on the Elements tab  .   Now, you can mouse around the page and hover over various pieces of the DXP.  When you hover, you will see the name of the element as shown in a few examples below.  I realize these screenshots aren’t the best.  I actually tried to make a video, but when you move and hover, stuff is constantly flashing on the screen.  It was painful to watch.






I know this is turning out to be quite a long post, but just hold on.  I’m about to wrap it up.  There are just a few more things to note.  First, in order to have CSS apply to an entire DXP, you need to have the <style> tag and accompanying CSS in at least one Text Area on each page. With that said, be careful when you edit.  You might drive yourself crazy trying to figure out why the CSS isn’t doing what you want when there are conflicting pieces of code on different pages.

Well, that wraps it up.  Thanks for sticking with me to the end.  Clearly, there is much more to learn about CSS than one blog post can handle, but this will get you started.





Updating your Exchange.ai Desktop

If you having some trouble logging in, that’s a good problem! We’ve updated the Exchange.ai server for security and now you will need to log in using a new address. Follow along and we’ll get you set back up.

This is the first error you would have encountered; we’ll update the server name so that you can log in again. Press Manage Servers to update the server location.

Click Edit.

Change the server address to match above.

Once you login, you’ll update and then you should see this screen:

Congrats! You made it through.

HTML for Lists – Part 5

We’re almost done folks!  Only two posts left in the HTML series.  This week, I’m going to focus on writing the HTML for lists because bullets and numbers are where the Spotfire GUI fails early and often.  In case you are new to the series, go back and check out the earlier posts covering these four topics:

  1. Intro to HTML — Basics of Tags
  2. Tag Attributes
  3. Using CSS
  4. Containers and Style Attributes

Before learning to write HTML, I had more trouble with lists than any other function in the Text Area, and I’m talking about “throw your computer out the window” kind of rage.  Fortunately, bullets and lists are one of the easiest things to write in HTML.  Master three tags — <ol>, <ul>, and <li> — and you are ready to rock and roll.

HTML for Lists

Lists are created with <ol> and <ul> tags.  Use <ol> for ordered lists (numbers) and <ul> for unordered lists (bullets) . Each line in the list will also use the <li> tag.

Of course, there are a few rules to abide by.

  1. Start the list with <ol> or <ul>.
  2. Use the <li> tag for each line in the list.
  3. Always close the <li> tag.  You’ll notice weird spacing if you don’t close each <li> tag.
  4. Add another <ol> or <ul> to indent a level.
  5. Close the <ol> or <ul> to go back up a level.
  6. Make sure to close the final <ol> or <ul> when the list is complete.

Here are two examples demonstrating the rules above.  The first example is fairly simple and just demonstrates the use of the <ol> and <li> tags.

HTML for Lists

In the second example, I have highlighted the <ul> tags used to move up and down levels in the list.

HTML for Lists

Now, you might be asking whether putting each tag on a new line is required, and the answer is no.  I do this to make tracing my start and end tags easier.  Add the tags in whatever manner is easiest for you to follow and understand.  These few simple rules are all you need to work around the GUI and correct the text area when it goes awry.

Attributes for <ol> and <ul>

Now, because I know you are going to Google it, I want to mention that the <ol> and <ul> tags do have HTML attributes.  You can read about them here  for <ol> and here for <ul>.  An example is provided below.  Just remember to use the attribute in the <ol> or <ul> tag, not the <li> tag, or it won’t work.  I definitely made that mistake.

HTML for Lists



In closing, I want to note that when I first started using HTML for lists, I printed out the syntax and kept it on my desk.  A week later, I threw that paper in the trash.  You’ll pick this up and have it memorized in no time.

Getting Started with MongoDB

This is the start of a new series we’re doing about MongoDB. We are going to take you through the ins and outs of using a NoSQl to store your data. MongoDB is one of the most popular DBMS out there and is the industry leading NoSQL database. MongoDB’s popularity stems from its speed, ease of development, and flexibility. Instead of normalizing your data into a series of related tables, Mongo allows you to store all the relevant information into a single schemaless document. This not only makes writing queries faster but depending on how you set up your database this makes your queries execute faster too.

Read More

HTML Containers and Style Attributes – Part 4

Welcome to part 4 of my HTML series!  This week, we are going to build upon what we know by discussing HTML containers.  I will also elaborate on the use of the style attribute inside HTML tags, which is where I left off last week.  These two subjects go together nicely, as you’ll see how different containers apply formatting and style differently.

If you need a review, here are links to the other parts of the series — Part 1 Tags, Part 2 Attributes, Part 3 HTML & CSS.  I’ll kick off this week by explaining the different types of HTML containers.  It’s simple, there are only 2 types to worry about.

HTML Containers — Block versus inline

When building web pages, a developer will divide the page into sections using containers.  The containers will then have content placed into them, and CSS is used to format and style the container.  That’s the quick and dirty explanation anyway.

HTML uses two types of containers — block and inline.  VSchool Web Development explains this really well by saying, “Block elements are those that take up the full width available on a web page, effectively blocking out any other elements from sitting next to it on the left or right. Inline elements are those who only take up as much width as is needed to display the contents of the element, thereby allowing other elements to be in line with the inline element.”

As a Spotfire developer, simply think of the Text Area as a web page.  Thus, block elements will take up the full width of the Text Area.  Inline elements only take up as much width as needed to display your text or other elements.

Examples of block elements you will use in Spotfire:

  • Paragraphs <p>
  • Headers <h1> thru <h6>
  • Divisions <div>
  • Lists and list items <ol>, <ul>, <li>

If you have been following the series, you should already have some experience working with <p> and <h1>-<h6>.  Lists (<ol> and <ul>) will be covered next week.  If you aren’t familiar with <div>, don’t worry, examples will be shown below.

Examples of inline elements you will use in Spotfire:

  • Spans <span>
  • Images <img>

Now that you understand the difference between block and inline, it would make sense to talk about when to use block versus inline, but that would make this post drag on a bit too long, so I’ll simply direct you to this link for more information on that subject.

Now, back to Spotfire.  Here is an example of what these containers look like in Spotfire.  Notice the use of background color and how far the color extends for each type of container.

HTML Containers


As you can see, <span> and <img> do not take up the full width of the Text Area, but <p>, <h1>, and <div> do.  This stands out after applying background color.

Style Attributes

Now that you understand how different containers work, let’s go back to the style attribute.  The style attribute can be used to format an individual tag OR all of the contents of a container.  As a reminder, the syntax uses a property/ value pair separated by a colon.  Multiple property/value pairs can be used inside a single tag.  Simply separate them with a semicolon.  Don’t forget to wrap the property/value pairs in quotes.  Lastly, just a small warning, know that not everything you find on the internet will work in Spotfire.

HTML containers

Common properties to test

  • background-color
  • color
  • text-align
  • padding
  • margin
  • border
  • height, width
  • display
  • float
  • align

To make this a little easier, I have created a free Spotfire template with examples of everything in the list above.  Download it and review the examples provided.  This is by no means an exhaustive list of everything you can do with style attributes, but it will certainly cover many of the common tasks performed in the Text Area.  That wraps up this week’s post.  Next week, I’ll explain how to create ordered and unordered (bulleted) lists in HTML.

Turning Daily Data in Monthly

For the DCA Wrangler, you’ll need to have your data organization into monthly values, which is tricky if you have daily production data that you’re working with. The conversion, however, is simple in Spotfire. Follow these steps to convert daily to monthly:

  1. Select File > Add Data Tables…
  2. Select Source and choose your existing Daily production data from the current analysis

Before you press OK, we need to add some transformations:

  1. First, we need to Calculate new column, we need something to aggregate by and in this case it’s ProductionMonth. Use the expression: Date(Year([Date]),Month([Date]),1)
  2. Now add the Pivot:
    1. for your Row identifiers choose your newly created ProductionMonth.
    2. for your Value columns and aggregation methods select Sum(BOPD)
    3. set your Column naming pattern to %V
    4. if you have metadata to pass through such as well name or API add it to your Transfer columns and aggregation methods
  3. Review the data and press OK.

You’re all set! Repeat the process to include GAS or NGLs.


Using CSS in Spotfire HTML — Part 3

This is part 3 of my HTML series.  The first week, I explained the basics of HTML tags in this post.  Post number two discussed tag attributes.  This week, we are going to cover formatting with CSS.

To set the stage for this post, here is a simple example clearly demonstrating where we are going.  In the Text Area below,  2 lines are duplicated.  As you can see, the lines look the same, but the code is different.  One is using CSS, and one is not.  That’s what this post is all about.

Now, let’s talk about what CSS is and why it’s important.

What is CSS?

CSS stands for Cascading Style Sheets, and it is used to specify the format or style of content provided by the HTML.  This might be confusing because it is possible to specify formatting with HTML tags.  After all, some of the tags I pointed out in the Intro were tags for formatting, like <b>, <i>, <em>, <strong>, and <font>.  That’s what italics and bold are — Formatting!

Really, this was all just one giant mistake in coding history.   HTML was not intended to be used for formatting.  As W3School notes:

“HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS.”

Why use CSS?

The answer to that question is simple — EFFICIENCY.  CSS is how Ruths.ai and Big Mountain Analytics are able to quickly produce beautiful templates.  We definitely aren’t formatting each and every button or Text Area.  That takes too long.

To demonstrate, download this free template from the Ruths.ai Exchange.  In the DXP, right-click on the Text Area in the Terms page, select Edit HTML, and look at the code. It’s using the <style> tag, and CSS attributes control the appearance of the entire DXP.

Now, when building web pages, CSS can control the layout of multiple web pages all at once.  When building DXP files, CSS can control the appearance of multiple text areas and other Spotfire elements (like the legend and your buttons) without having to format each and every one of them individually.  It also opens up the ability to control formatting where there is no GUI, such as with the legend.  Formatting the legend requires HTML/CSS.

How to Use CSS in Spotfire

The DXP example you downloaded uses  CSS with the <style> tag, and that’s perfectly valid.  For a complete understanding, know that there are three ways or places to write CSS.

  1. In a separate CSS file (.css extension) — This is only really applicable to building web pages, so don’t even worry about this.
  2. Inside a style tag — This is what you saw in the DXP download.  This is referred to as “inline style” (knowing the right terms to Google is half the battle).  In web design, this is not considered a best practice, but we aren’t building web pages.
  3. Inside an HTML tag using the style attribute.

Which Method to Use

As a Spotfire users,  you should familiarize yourself with methods 2 and 3.  The next logical question to ask would be — when do I use which method?  Here is a quick summary of the pros and cons of each.

Style Tag


  • Most efficient
  • Reusable across DXP files
  • Write a little or write a lot
  • Able to access what the GUI cannot


  • Need to know how to reference Spotfire elements
  • May take longer to build

Style Attributes


  • Quick and easy to write
  • Can be reused


  • Must be written for individual tags
  • Not as efficient


CSS Syntax

Style Attribute Syntax

The general rules for style attribute syntax are…

  • The style attribute will use property/value pairs.
  • The pair must be in quotes
  • Separate Multiple pairs with a semicolon.
  • Enclose the pair in double quotes.

Style Tag Syntax

Using the style tag, the syntax looks a little bit different.  Note the use of brackets and the reference to specific pieces of Spotfire.  This is where the waters start to get deep again, so I am going to wrap this post up with the example shown below.  A future post will talk about this syntax in more detail.


In conclusion, if you new to HTML and CSS, consider these two suggestions.

  1. Start using the style attribute immediately in your own work.  It’s super easy.
  2. Review the CSS in the template download.  Alter and play with it to develop an understanding of what each element of the code controls in Spotfire.

These two suggestions will go a long way in terms of developing your skills and improving the appearance of your Spotfire projects.  Now, this post is getting a bit long, but I wouldn’t be doing a good job if I didn’t talk about syntax.

As always, thanks for reading and feel free to leave comments!  Lastly, since I haven’t said it since the intro, don’t forget that once you start editing HMTL, you shouldn’t use the Edit Text Area option.  It will wipe out your code.



Spatial Objects Using TERR

A key part of analytics in the oil and gas industry is evaluating opportunities at different locations. Space is always present when looking for profitable development projects. We usually look at the already in production wells and try to find some spatial trends. To stay competitive, we need to find better ways  to access the  data of different areas and its wells. For instance, we can transform the spatial information to compact objects that store the location and shape of each well and lease. These objects can be feed  to different calculations and analyses as geometries. For Spotfire, it also has some advantages, you can use the feature layers of the map chart. In this case, we can visualize the leases as polygons and wells as lines.

Read More