Using user-selected colours for rows in a form

Questions
1

In Servoy 8, the colours for a row can be denoted by the use of a CSS style in the rowStyleClassDataProvider; however, this can only related to predetermined settings as the function returns an existing CSS style class name.

How is it possible to utilise a user-specified colour? Is it possible to nominate a colour for a row in runtime?

2

Hi,

I’ve managed to do this by writing a Web Package Service plugin, that has a function to add stylesheets to your page dynamically.
This could hold the user-id and the user-color.

However you might be able to achieve the same by creating this content at startup and writing it to a media file.
This media file can then be referenced by using the ngclientutils plugin (replaceHeaderTag function)
I’m just thinking of this and have no experience in doing this.

Good news: it’s absolutely doable
Bad news: no ready-to-go solution

3

Thanks for the feedback, I really appreciate it and will look into it :)

4

Hi,

you can also check the sample solution for NG.
The sample solution uses the Servoy Less Theme.
Is possible to override the less theme colors at runtime using solutionModel.

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');
	media.setAsString(cssText);

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

The less file looks like this:

// import of the custom servoy theme properties that will import the hidden servoy theme, this imported file is for customizing the default servoy theme properties 
@import 'cloudSampleSolution.less';

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

Note in the above code there is a cloudSampleTemplate.less and cloudSampleTemplateOriginal.less, which is an exact copy; keeping an exact copy of the cloudSampleTemplateOriginal.less because the sample solution allow to change colors multiple times.

1276×642 115 KB

If you login into the Developer using your own credentials you can install the sample solution by clicking on the Getting Started button; i recommend you try it on a new empty workspace, since will auto-install a bunch of modules like svyUtils, svySearch… etc.