Using Inline HTML in a ViewGrid

Overview

The ViewGrid is one of Unqork’s most powerful tools for displaying data. This component gives you an HTML table you can then filter and sort based on your needs. These are built-in features, but sometimes you might want to take things a step further. To customize your ViewGrid even more, you can use HTML to do the job.

The concepts in this article require a strong understanding of HTML and CSS. Be sure you're familiar with these languages before proceeding. You should also be familiar with the data structure of a table.

What You'll Learn

In this article, you'll learn how to:

Setting Headings in a ViewGrid

HTML uses strings to determine what your end-user sees in an application. For example, you can set a portion of text as h3, or a size 3 heading. So, the most common use of HTML in a ViewGrid is to create an HTML string that alters the appearance of certain text.

For example, let's say you have a list of states in a ViewGrid and you want the State Name to show as an h3. To do that, you can use a Data Workflow with a Create Field operator to write the following formula:

stateDisplay=CONCATENATE(“<h3>”,state,”</h3>”)

Here, you're creating a new field called stateDisplay. This takes each state name in your data and creates an h3 version of it. You can then add this field to your ViewGrid. Here's how that looks:

You might be wondering why we created a new field instead of just altering the data we already had. This kind of HTML changes the appearance of your data. So, you'll only use it for display purposes. Creating this new field lets you maintain your original data for storage. In the above example, if you only wanted the h3 state name to show, you'd omit the original field from your ViewGrid. And all that you'd show in the ViewGrid is your newly created and styled field, stateDisplay.

Changing Text Styles

You can continue to customize your HTML using inline CSS styles. With CSS, you can take your HTML tags to the next level. For example, if you want your h3 state names to show up in red text, you'll add a CSS style to do that. This style sits right inside your opening h3 tag. So, you'd use the method above to create the following formula:

stateDisplay=CONCATENATE("<h3 style='color:red'>",state,"</h3>")

And once you've added this stateDisplay field to your ViewGrid, here's what you'll see:

Styling HTML Containers

HTML makes use of what are called containers. This lets you designate which part of a given item you want to style. For example, a cell in a ViewGrid has 2 containers: a span and a div. Here's a breakdown of each:

  • A span container refers to the text within a given space.

  • A div container refers to the space itself.

So, when looking at a ViewGrid, the text in a cell is in your span container. And the space around the text in that cell is your div container. Using these gives you more customization options. Let's continue with the state example from above.

Say you're showing the population for each state. You want the state name to have a black border and a green background that covers the entire cell. To do that, you'll update the div style. And for the Population, you want a dotted border and a yellow background that only covers the text. For that, you'll update the span style. Remember, you'll create new fields to hold this styled data.

Here's what your final stateDisplay formula looks like:

stateDisplay=CONCATENATE("<div style='background-color:green; border:2px solid'>",state,"</div>")

And here's what your final populationDisplay formula looks like:

populationDisplay=CONCATENATE("<span style='background-color:yellow; border:3px dotted'>",population,"</span>")

Adding these to your ViewGrid gives you the following result:

Setting Up Conditional Formatting

So far, the HTML we've discussed has been uniform through entire columns in our ViewGrid. But what if you want to change styling based on what the individual value is? Maybe you want to highlight any population less than 1 million. This is called conditional formatting, and you can achieve it using HTML too.

You'll do this by creating a new field and formula just like in the above examples. The difference here, though, is that you'll need to do a little more data processing. So, you'll first need to convert your population data to a number data type. You can do this using the VALUE() formula in your Data Workflow. That final formula looks like this:

populationStyling=VALUE(population)

Next, you'll write an if/then statement to create your conditional logic. In plain terms, here's what we want: If a population is less than 1 million, then the font turns red. To turn that into a formula, here's what you'd have:

populationStyling=IF(populationStyling<1000000,'<span style="color:red">','<span style="color:black">')

This turns any populationStyling values under 1 million red. And it leaves all other values black.

These formulas can get tricky because of the use of single- and double-quotes. Your formula should always use a single quote to contain the entire string and a double quote for substrings.

With this done, you have the styling for each population set. Now, you can add it to the larger formula like this:

populationDisplay=CONCATENATE(populationStyling,population,'</span>')

This formula references the fields populationStyling and population. It also adds a closing span tag to maintain proper HTML syntax.

Adding these fields to your ViewGrid, you'll see this:

But let's go one step further. Say you also want the state's name to show red if its population is less than 1 million. You can do that too simply by referencing the populationStyling you've already set up. Here's how that formula looks:

stateDisplay=CONCATENATE(populationStyling,state,'</span>')

And here's how your table would look:

Adding HTML Buttons

One last thing you can manipulate using inline HTML are buttons in your ViewGrid.

By now, you should be familiar with the concept of buttonClick events in the browser. Here's a little recap: A buttonClick event shows in the browser's console and can be used to trigger other actions in your application. It's sort of like a flag being put up telling other operations in your application that they can proceed. Well, you can use HTML to create a buttonClick event out of data in your ViewGrid. Let's say you want to add a button to each row, and you want those buttons to look like regular hyperlinks. HTML can help.

To initiate a buttonClick event when text is clicked, you'll use the HTML attribute onclick. Here's the basic HTML syntax for this function:

<container onclick="function()">TEXT</container>

Here, container refers to the item you want to assign your onclick action to. And function refers to what you want to happen when that item is clicked. In this case, we want our button to show as a link. So, you'd use the <a> container, which represents a hyperlink. And we want a buttonClick event to occur when that link is clicked. So, you'll use buttonClick as your function.

Your next step is to put this together using a Data Workflow just like in the above examples. Here's how that final formula looks:

viewButton=CONCATENATE('<a href="#" onclick="buttonClick(event, ', "'", 'view',"'", ')">View</a>')

And here's how that looks once added to your ViewGrid:

Now, when your end-user clicks a View button, a buttonClick event registers in the browser. You can use that event to trigger something else in your module. For example, you can configure a Decisions component to open a modal. You'd first configure your Panel component to serve as a hidden modal. Then, you'd configure your Decisions component to look like this: