New cs/styles created runtime

Forum to discuss the new web client version of Servoy.

New cs/styles created runtime

Postby marco.rossi » Tue Apr 21, 2020 7:29 pm

Hi,
I'm using the NGClient and I would like to create some css classes runtime because I need to fill them by reading some colors from the database.

Does exist a way to do that?
Marco Rossi
Senior Analyst Developer
Freelance Consultant

IT Manager @Mantho
Webmaster @Sitoliquido
marco.rossi
 
Posts: 110
Joined: Sun Apr 12, 2015 9:33 pm

Re: New cs/styles created runtime

Postby mboegem » Thu Apr 23, 2020 8:07 pm

Hi Marco,

yes you can.
Just write your CSS, then convert it to Base64 and add it as a stylesheetlink like this:

Code: Select all
var myCSS = '.bg-white { background-color: white; }';
var b64 = utils.stringToBase64(myCSS);
/** @type {ngclientutils.tag} */
var _oTag = {
   tagName: "link",
   attrs : [{
      name: "rel",
      value: "stylesheet"
   },{
      name: "href",
      value: "data:text/css;base64," + b64
   }]
}

plugins.ngclientutils.contributedTags.push(_oTag);      
plugins.ngclientutils.replaceHeaderTag('link','rel','stylesheet',null);


Please note: you need the ngclientutils plugin, also utils.stringToBase64() is a function that has been added in 2020.3 release (if I'm not mistaken...)

Hope this helps
Last edited by mboegem on Thu Apr 30, 2020 11:21 am, edited 1 time in total.
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: New cs/styles created runtime

Postby marco.rossi » Tue Apr 28, 2020 12:20 pm

Hi Marc,
thank you for your reply.
I did some tries before answering.

Your code works pretty well but Chrome prevents it's execution (so my CSS classes created at runtime are listed into the page when I inspect it but they are not taken in consideration by chrome because it considers them a security issue).

This is the error:
custom css error.PNG


Thank you in advance for your time
You do not have the required permissions to view the files attached to this post.
Marco Rossi
Senior Analyst Developer
Freelance Consultant

IT Manager @Mantho
Webmaster @Sitoliquido
marco.rossi
 
Posts: 110
Joined: Sun Apr 12, 2015 9:33 pm

Re: New cs/styles created runtime

Postby mboegem » Tue Apr 28, 2020 1:47 pm

Hi Marco,

I think you get this warning because you didn't convert the CSS string into base64.
This should be done using this line of code:
Code: Select all
var b64 = utils.stringToBase64(myCSS);


Hope that helps
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: New cs/styles created runtime

Postby kwpsd » Wed Apr 29, 2020 7:32 pm

Hi, Marc and Marco.

In the sample code, object 'oTag' is missing the closing curly brace (})...most likely, a cut-and-paste error. :)
Kim W. Premuda
San Diego, CA USA
User avatar
kwpsd
 
Posts: 687
Joined: Sat Jul 28, 2007 6:59 pm
Location: San Diego, CA USA

Re: New cs/styles created runtime

Postby marco.rossi » Wed May 06, 2020 12:22 pm

Hi Kim, thank you for your reply! I think I closed the oTag when I pasted it into my .js because the compiler was giving error :D

However, I created those two functions:

Code: Select all
function addStyleSheet(stylesheetContent) {
   var _stylesheetContentB64 =utils.stringToBase64(stylesheetContent)
   addCSSReference("data:text/css;base64," + _stylesheetContentB64)
}


function addCSSReference(URL){
   
   if(scopes.svySystem.isSmartClient()) //not allowed in smartclient
      return
      
       var _oTag = {
                 tagName: "link",
                 attrs : [{
                     name: "rel",
                     value: "stylesheet"
                 },{
                  name: "href",
                  value: URL
                 }]
        }

        plugins.ngclientutils.contributedTags.push(_oTag);
   
}


You can call "addStyleSheet" function by giving any css within.
I'm still getting this error:
error.PNG


Thank you
Marco
You do not have the required permissions to view the files attached to this post.
Marco Rossi
Senior Analyst Developer
Freelance Consultant

IT Manager @Mantho
Webmaster @Sitoliquido
marco.rossi
 
Posts: 110
Joined: Sun Apr 12, 2015 9:33 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 6 guests