Colouring an input field in a table view

Questions and answers on designing your Servoy solutions, database modelling and other 'how do I do this' that don't fit in any of the other categories

Colouring an input field in a table view

Postby roddy » Tue Mar 30, 2021 8:14 am

I have been through many hoops thus far on calculated HTML fields and onRender() but I cannot find a way to alter the colour of a field that a user can input data into in a Table View field using NG Client.

    Calculated HTML fields will not allow input and seem to mess up the layout of the row.
    onRender() has been removed in NG Client, the onRenderLabel link goes to a '404 Not Found' and a label cannot used for input.
    I have been unable to set up a CSS class that I can change the values in.

This doesn't seem like a difficult request, to have a coloured field on a row depending on the record's data. Would really like to know if I am missing something, if it is just not possible or where there are examples of it.

From reading so many forums posts, it is certainly common functionality that people are after.
Posts: 81
Joined: Mon Oct 26, 2020 12:32 am

Re: Colouring an input field in a table view

Postby paronne » Tue Mar 30, 2021 10:03 am

Hi Roddy,

what kind of "Table View" are you using in NG ?
I recommend using the Data Grid component which is the most feature complete.
Is possible to use HTML snippet in grid, however inline style will be sanitized.
If you trust the data you can avoid data sanitizing by using putClientProperty(APP_UI_PROPERTY.TRUST_DATA_AS_HTML, true);

Changing CSS class at runtime is also possible. There is an example of it in the Servoy Sample Solution.
Using application.overrideStyle(lessfile, lessfile2).

You can make use of LESS variables for the colors to be used in your CSS. You can then override these values at runtime.
From the sample solution code:

The .less file to be overriden looks like this:
Code: Select all
@import 'cloudSampleSolution.less';

// Add your custom less/css to this file you can use the same less properties that are specified in the above properties.less

@main-color: %%MAIN-COLOR%%;
@sidenav-color: %%SECONDARY-COLOR%%;

Can be easily overriden in code

Code: Select all
function overrideStyleColors(mainColor, secondaryColor) {
   var newColorStyle = {
      'MAIN-COLOR': mainColor,
      'SECONDARY-COLOR': secondaryColor

   // set the preferred colors
   var mediaOriginal = solutionModel.getMedia('cloudSampleTemplateOriginal.less');
   var cssText = mediaOriginal.getAsString();

   // override css
   cssText = utils.stringReplaceTags(cssText, newColorStyle);
   var media = solutionModel.getMedia('cloudSampleTemplate.less');

   application.overrideStyle('cloudSampleSolution.less', 'cloudSampleTemplate.less');

Posts: 174
Joined: Fri Nov 02, 2012 3:21 pm

Re: Colouring an input field in a table view

Postby roddy » Tue Mar 30, 2021 10:42 pm

Thanks Paolo,

Thanks so much for the response; I will give it a go. There are a mixture of forms types but this has given me something to go on; I remember trying this before but I was trying to define a user-selected colour and couldn't get it to work but with some pre-defined colours, it should work fine :D
Posts: 81
Joined: Mon Oct 26, 2020 12:32 am

Return to Programming with Servoy

Who is online

Users browsing this forum: No registered users and 2 guests