Single Row View, Interactive Grid - express differences with font colors

Question

I have a interactive grid, made from a full join on the title from the table wwv_flow_qb_saved_query and apex_collection. The result looks like this:

The first three columns are the queries built with the query builder from the wwv_flow_qb_saved_query. The last three columns are from an uploaded query to the apex_collections. The column "qb_sql" is a clob filled with the whole sql statement from the query, which looks in the single row view like this:

Now the end user should be able to see the differences in the column group "imported queries" => "qb_sql" with different colors. So that the part, that is different in the second qb_sql is for example red.

Is there any possibility to achieve this?

Thanks..

John Snyders John Snyders · Accepted Answer · 2017-08-08T15:55:57

In grid view you can give all the cells in a column a special class using the declarative attribute Appearance: CSS Classes. But this does not apply to single row view. The attribute Advanced: CSS Classes applies just to the editable field. Which is the same in both grid and single row view.

There is an advanced column option property, fieldCssClasses, that applies to the field in single row view. So for each of the fields/columns you want to look different add this to the Advanced: JavaScript Code attribute:

function(config) {
    config.defaultGridColumnOptions = {
        fieldCssClasses: "special"
    }
    return config;
}

Then add a CSS rule for .special to the page attribute CSS: Inline or add the rule to your application css file if you have one. For example:

.special {
    font-weight: bold;
    color: green;
}

Use whatever name you like for the css class; "special" is just an example.

Single Row View, Interactive Grid - express differences with font colors

1 Answers