Using user-selected colours for rows in a form

Forum to discuss the new web client version of Servoy.

Using user-selected colours for rows in a form

Postby roddy » Wed Nov 18, 2020 7:35 am

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?
roddy
 
Posts: 100
Joined: Mon Oct 26, 2020 12:32 am

Re: Using user-selected colours for rows in a form

Postby mboegem » Thu Nov 19, 2020 12:46 am

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
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Using user-selected colours for rows in a form

Postby roddy » Thu Nov 19, 2020 4:57 am

Thanks for the feedback, I really appreciate it and will look into it :)
roddy
 
Posts: 100
Joined: Mon Oct 26, 2020 12:32 am

Re: Using user-selected colours for rows in a form

Postby paronne » Thu Nov 19, 2020 9:23 am

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.

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

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


The less file looks like this:

Code: Select all
// 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.

Image

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.
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 7 guests