Log in to AnswerLog in to Follow
Tomasz M. Lipinski
54Views
7Comments
Solved
HOWTO Change CSS depending on context
Question
Reactive
Application Type
Reactive

Hi,

This is a use case similar to the one, described here. Shortly - I want to load some CSS content that is dynamic, i.e. read from a database regarding the current user or even created programmatically. There is no static URL that could be used.

I'm trying to adopt the mentioned solution to a Reactive Web application. I've added (to HTTP headers; using just JavaScript) a link to a page that is to serve the CSS content. But  when this content is  downloaded it is treated as "text/html" (instead of "text/css") and the header:

<link type="text/css" rel="stylesheet" charset="utf-8" href="/application/page/">

fails to be applied because:

Refused to apply style from 'https://server/application/page/' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I'm loading my  CCS in the following way (in page's OnInitialize):

Can  I force mime type to Download? Or rather - what is an alternative way to download CSS content?

Thanks in advance for any hints.

Regards

Tomasz


0
0
23 Mar

Depending your architecture, simplest thing I can think of is offering this download from Traditional Web module, where you can set the mime type for download. Other approach would be to offer this content as REST api, where you can set Content-Type header to whatever you wish.

I think there's very little you can do with mime types for reactive pages (text/html) because it's single page app and that download of yours is served by javascript on that screen instead of the whole page being your download content.

 Here's a screenshot from similar reactive demo page:

br,

-Mikko(N)

edit: fixed a typo

See solution in context
0
0
23 Mar

Hi, friend!

Some time ago, I launched in forge the simple component called Dynamic CSS that changes the stylesheet depending on parameters you set, but the stylesheets must be part of the project. I don't know if it will help you like helped me. Take a look.

https://www.outsystems.com/forge/component-overview/9433/dynamic-css

Kind regards

0
0
23 Mar

You can use this kind of JS to generate stylesheet link

// Get HTML head element 

       var head = document.getElementsByTagName('HEAD')[0];  

        // Create new link Element 

        var link = document.createElement('link'); 
  
        // set the attributes for link element  
        link.rel = 'stylesheet';  
      
        link.type = 'text/css'; 
      
        link.href = 'style.css';  
  
        // Append link element to HTML head 
        head.appendChild(link);  
0
0
23 Mar

Depending your architecture, simplest thing I can think of is offering this download from Traditional Web module, where you can set the mime type for download. Other approach would be to offer this content as REST api, where you can set Content-Type header to whatever you wish.

I think there's very little you can do with mime types for reactive pages (text/html) because it's single page app and that download of yours is served by javascript on that screen instead of the whole page being your download content.

 Here's a screenshot from similar reactive demo page:

br,

-Mikko(N)

edit: fixed a typo

0
0
23 Mar

HI @Lenon Manhães , @Mykola (Nick) Tkachenko ,

Thanks for tips but I've already done it. The issue is that I have no statis CSS file (like "style.css" above). The value of href is an  URL of a  page that serves some CSS content. But this content gets back as "text/html" instead of "test/css" - and it fails.

Regards

Tomasz

0
0
23 Mar

Hi, @Mikko Nieminen ,

Thanks a lot - it works perfectlly. I've used the concept of an external Traditional  Web Page. The REST  API concept wait to be implemented.

Regards

Tomasz

0
0
23 Mar

Funniest thing happened - I tried this REST api approach myself and at least in the platform version I tested, it seems not possible to change Content-Type header for exposed REST endpoints!!

Same happens if I try to add 'Content-Type' header in OnResponse callback, custom headers work just fine.

I filed a support ticket on this, thanks for setting up the possibility for this insight!

0
0
23 Mar

Replying to Mikko Nieminen's comment on 23 Mar 2021 12:38:03

Replying to myself, as I finally got around solving this quirk together with OS support.

'Content-Type' -header on exposed REST Apis can be set using AddHeader action from HttpRequestHandler extension inside Rest action flow (or alternatively by using an extension, inside OnResponse event action). For some reason, when exposed API action has Content-Type header as output parameter, setting the header value does not have any effect.

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