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
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
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
You can use this kind of JS to generate stylesheet link
// Get HTML head element
var head = document.getElementsByTagName('HEAD')[0];
var
head = document.getElementsByTagName(
'HEAD'
)[0];
// Create new link Element
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);
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.
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.
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!
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.