This section describes what you can do to control how WOW displays sorting columns to the user.
Changing the Column Heading
In this example from earlier in the chapter, we have results which are sorted by two columns, PRIORITY and SEVERITY:
The results are sorted first by state, and then by level.
The highlighted arrows in the column headers let the user know which columns are used to sort the results,
but it is not possible to determine the order in which the columns were used to sort the results without
closely examining the values in those two columns. However, it is possible to have WOW alter the column
header to show the sort order as well as the column name.
For example these results:
... are sorted first by PRIORITY and then by SEVERITY, which can be immediately seen by looking at the column names.
Controlling the column names is done with using the heading property of the Sorting property group. The value
specified in the heading property will be shown as the column name for columns which are used to sort the results.
The special placeholders %name and %sortindex will be replaced with the column name and sorting index
respectively. So in the above example this Sorting property group was used:
Sorting {
heading: %sortindex-%name;
}
If you wanted the sort index to be displayed after the column name with no hyphen, then the property group
would look like this:
Sorting {
heading: %name %sortindex;
}
The Sorting property group can be specified in an Operation, or in an Application (in which case it will apply to
all Operations in that Application).
Changing the Header Style
The css property in the Sorting property group can be used to set a different CSS style on column headers used
for sorting. For example, if this is the sorting property group:
Sorting {
heading: %sortindex-%name;
css: sort;
}
Then the CSS “sort” class will be applied to all the headers of columns which are used to sort the results.
(The column headers are TD HTML elements.) In addition, if the LEVEL column is the first sort column, the
“sort_LEVEL” and “sort_1” CSS classes are also applied to the header. When STATE is the 2nd sort column,
the “sort_STATE” and “sort_2” classes will be applied to that header. This allows different sorting columns
to be given different styles, based either on that column’s name, or sorting index.
If the following CSS classes are defined:
.sort.sort_1 {
background-color: cyan;
}
.sort.sort_2 {
background-color: lime;
}
Then the header of the first sorting column will be cyan, and the header of the second sorting column will be lime:
Using different colors for the sorting columns is especially useful when report breaks are displayed in the results.