List Select – Alternating Row Colors

A while back on Symantec Connect, michael.george wrote about his preference of the ListSelect component over the Grid component (with which I wholeheartedly agree).  With some effort and practice, the ListSelect can be made not only visually more appealing than the Grid, but also functionally better.

Symantec Workflow Improved ListSelect
A CSS-seasoned ListSelect component.

I’m going to preface this article with a bit of initial configuration – to get to the meat of the CSS needed to alternate the row colors, jump to the bottom.

So to start, here is our typical, vanilla ListSelect component:

Symantec Workflow Vanilla ListSelect Example
An example of a vanilla ListSelect component, given minimal inline styling with the HTML formatting toolbar in the component layout designer.

Functionally, that component works fine as-is.  However, with a bit of scripting, it can be made easier to use, and excessively easier on the eyes.  In this article I’m going to focus on styling the rows themselves with alternating colors, but here is another article detailing the steps to take to use image links instead of text.

First, the interior of the ListSelect component:

Symantec Workflow ListSelect Interior
Configure the outcomes and ensure “Auto Format Outcomes” is not selected. The outcomes will be placed into the table with the rest of the data. Select the Item Format ellipsis to set the data layout.

On the inside of the “Item Format” designer, we will want to insert a table to make it easier to control the data layout with our CSS script.

Symantec Workflow ListSelect Configuration
Click the Table icon to insert a table.
Symantec Workflow ListSelect Configuration
Remove the extra rows; only 1 is needed here.
Symantec Workflow ListSelect Configuration
Add as many columns as is required for the data to be displayed, and then add as many more as needed for outcome links.

Next, drag the variables from the Data panel on the left, to the designer palette on the right, placing the variables into the table cells as you want them situated on the page.

Symantec Workflow ListSelect Configuration
Because the ListSelect output variable is named selectListItem, the ListSelect component has made the runtime data schema available under the same name in the Data panel on the left. Pull the variables from here to use array data in the ListSelect display.

When the variables and outcomes are all situated, go into the HTML source tab and edit the table so that the awful borders aren’t showing.

Symantec Workflow ListSelect - Table Customization
Edit the HTML source script to remove the automatic inline table borders.

Back out at the Form editor, right-click any empty space and edit the theme for the form by selecting “Templates -> Edit Templates”.  Select the applied theme and add a custom style.  In this example, I’ve named it .aAdminListSelect.  Apply this style to the ListSelect component on the form.

Symantec Workflow - Apply a Custom Control Style
After adding a new custom control style to the applied form theme, select that style for the ListSelect component on the “Appearance” tab. This will allow us to customize the component by its class via CSS.

Add an IncludeHTML component to the form page.  Here is the CSS I’ve used in the example above.


<style>

/***.gaAdminListSelect***/
.gaAdminListSelect td {
font-family: "Segoe UI", Verdana, Serif;
color: #666666;
font-size: small;
}
.gaAdminListSelect:focus {
outline: none;
}
.gaAdminListSelect > table > tbody > tr > td > table > tbody > tr > td:nth-of-type(1) {
font-weight: bold;
min-width: 100px;
max-width: 100px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.gaAdminListSelect > table > tbody > tr > td > table > tbody > tr > td:nth-of-type(2) {
min-width: 300px;
max-width: 300px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.gaAdminListSelect > table > tbody > tr > td > table > tbody > tr > td:nth-of-type(3) {
min-width: 80px;
max-width: 80px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.gaAdminListSelect > table > tbody > tr > td > table > tbody > tr > td:nth-of-type(4) {
min-width: 12px;
max-width: 12px;
}
.gaAdminListSelect > table > tbody > tr > td > table > tbody > tr > td:nth-of-type(5) {
min-width: 30px;
max-width: 30px;
}
.gaAdminListSelect > table > tbody > tr > td > table > tbody > tr > td:nth-of-type(n+6) {
min-width: 12px;
max-width: 12px;
}
.gaAdminListSelect tr td a {
width: 100%;
height: 100%;
display: block;
}
.gaAdminListSelect > table > tbody > tr:nth-child(odd) {
background-color: #f9ecec;
}
/******************************************/

/******************************************/
/***Labels***/

.gaTableHeader {
text-align: left;
font-size: 14px;
text-transform: uppercase;
border-bottom: solid silver 1px;
border-top: none;
border-left: none;
border-right: none;
font-family: "Segoe UI", Verdana, Serif;
color: #525252;
padding-left: 6px;
padding-top: 4px;
overflow: hidden !important;
}
</style>

Note: the style tags must be included in the embedded script of the IncludeHTML component in order for the CSS to work.


So the basis of this article is to point out how to alternate colors in the data of a ListSelect component.  This snippet is what controls the example data illustrated in this article:

.gaAdminListSelect > table > tbody > tr:nth-child(odd) {
background-color: #f9ecec;
}

If two colors are desired (instead of a single color on odd rows and the default white on even rows), just add another script block to indicate the color for the even rows:

.gaAdminListSelect > table > tbody > tr:nth-child(odd) {
background-color: #f9ecec;
}
.gaAdminListSelect > table > tbody > tr:nth-child(even) {
background-color: #cccccc;
}

And you get this:

Symantec Workflow - Customizing ListSelect Components
A reconfiguration of the illustration above. This layout uses a second color for the even rows.

More information on the CSS concepts used for this example can be found here:

CSS Child Selectors
CSS Descendant Selectors
CSS nth-of-type

compatible_ie2020compatible_firefox2020compatible_chrome2020compatible_safari2020compatible_opera2020

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s