How to add external cdn css url
Question

Please advise how to add the external CDN CSS Url.

Hi Jessica,

You can use the import command in the stylesheet to fetch css code. An example is 

@import url('https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css');

Cheers,

António Pereira

Thank Antonio.

I have tried to put the above css url in my reactive app as below.

when i look it up in the browser, i cannot find its css path present.

Please advise what wrong i do.

I have enclosed demo.oml for your reference.

DEMO.oml

Hi , 

I marked it in below pics. 

Another way to apply css at external link.

Go to that link- I mean open it in browser - https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css

and copy all css (By using Ctrl + A) and paste it in  your screen Style sheet editor. 

This makes your application worked even in offline. 

DEMOcss.oml

Hello Jessica,

You can use AddStyleSheetTag from http request handler extension.

  1. Click Manage Dependency Icon
  2. Search for HTTP
  3. Select Add Stylesheet Tag
  4. Go To Logic Tab
  5. Select Extension HTTP....
  6. Select Input Variable
  7. Add CSS URL.

Please follow this this steps.


AddExternalCSS.png

Thank Rahul,

You mean that the '@import' command is included in that link


Thank a lot.


Yes, 

If you want to check it , 

copy that href link- and paste it in your browser like -

 https:// your environment name /DEMO/css/DEMO.MainFlow.Products.css?AvaUgHHPJ8fPZgVjaX_3YQ


Thanks

Thank Krunal,

May i know which event 'AddStyleSheetTag ' to be placed? onInitialize event?

Hello Jessica,

Please check the below thread to understand completely how to use the method:-

https://www.outsystems.com/forums/discussion/11432/howto-change-css-depending-on-the-user-in-session/


Thanks,

Krunal

mvp_badge
MVP

Hi Jessica,

In addition to all the previous post, one more solution which I would suggest is to add the external CSS file using the JavaScript

Steps to follow:

  1. Define an OnInitialize Event Handler to the screen
  2. Introduce a JS node within the OnInitialize event handler client action flow
  3. Add the below-mentioned JS
var head  = document.getElementsByTagName('head')[0];
var link  = document.createElement('link');
link.rel  = 'stylesheet';
link.type = 'text/css';
link.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css';
link.media = 'all';

head.appendChild(link);

I hope this helps you!


Kind regards,

Benjith Sam

Thank All.

your advice is very useful.

Glad to help @Jessica Lee 


Thanks,

Krunal

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.