Force reload of CSS with a new number after the ?

Force reload of CSS with a new number after the ?

  

How can I force OutSystems to generate a new number after my .CSS files so that the browser will load a new version?

Where does that 21728 come from and how do I make OutSystems create a new number?


Is there a setting I can change to make OutSystems generate a new number when I make a change to the .css files for pages?

Hello PJ

The number is automatically generated and the only way to change it is through the publishing of the module where the CSS is (afaik).

By your question, I'll assume you may be experiencing changing your CSS, but the browser not showing the change.

This usually happens when you have the CSS in a producer module (theme, page or web block stylesheet), and is consuming it in another module (consumer).

When you change the CSS and publish your producer, the number is automatically changed.
Unfortunately, the producer is still using the "old" module's version, so he does not see the new number and still uses the old one. 

As the browser find the file name in its cache, t uses this instead, and you are unable to see the change in the CSS you made being applied to the app.

There are two solutions for this problem.

1. Refresh the dependences in the Consumer module. This sill make it use the new number. The browser will then download the new CSS file.

2. Force the Browser to download all files from the application, instead fetching from the cache. In some browsers you can use Ctrl+F5. 

Number 1 is preferable, as it will work for any user accessing the application.

Number 2 will work because despite the number, when downloading the CSS from the server, the server will always return the CSS from the currently published version of the module (the number seems to be ignored, in fact).

If this is not enough to solve your problem, please, let us know.

Cheers.

I tried your suggestion #1 by republishing via 1-Click and it doesn't update the number.

PJ M wrote:

I tried your suggestion #1 by republishing via 1-Click and it doesn't update the number.

I imagine that if you do not make any change to the CSS, the Compiler do not see the need to change the number of the file.

Again, publishing a producer without refreshing dependences of a consumer will also not work.

Could you explain your problem with more details?

Is the CSS in a producer module? Or the CSS is in the same module of the screens?

Cheers

Starting point, the CSS link looks like this:

which the first part looks like this:

So I go change the CSS for the Invoice web screen to this, taking the px off:

Then I 1-Click Publish... Then refresh the Invoice.aspx and same number:

I click on the link to Invoice.css?21728 and see the old css, because the browser cached it, fine. I get that:

However, if I click the RELOAD button on the browser, I get the new file contents:


The physical "file" was changed, however, it's cached so the browser doesn't know and the number is the same, so it doesn't load a new CSS file with my changes.

My expected result is: If I change the css, the number in the link to that css will increment so the browser will get the changes, but the number doesn't change, so it doesn't get the new file and I have to SHIFT+F5 to get it.

My application users won't get the new file and they don't understand SHIFT+F5 or browser file caching or any of that. Plus, I can't control the cache life of third party components like PDF generators, etc, so that's why I raise this issue.





Hello PJ,

I was not able yet to reproduce your problem.

I did some tests.
Every time I publish my module, the CSS file number is updated (no need to change the CSS).

The behaviour you describe is tipical in the following case:

Module 1 -> change CSS -> Publish (new CSS file number)
Module 2 -> uses CSS from Module 1. NOT refreshed and NOT published ->  Keep using old file (from cache).

The solution is to open module 2, refresh the dependences and publish it. 

Now, if you open the module in Browser, it should load the CSS file.

From your explanation I couldn't understand if the CSS you're changing is in "Module1" or in "Module2".
In "Module2" case, in my tests, all times I publish, the file gets a new number so the browser downloads from server.

What is your platform and SS version? Is it .Net stack? 

Cheers.

I'm not sure what all you mean, but I open the "CTM" Application, the Invoice.aspx is in there, I click the CSS icon above the web screen view, make a change, I click 1-Click publish, view in browser and this is what I get. I don't have to refresh any dependencies. I'm not accessing this from another application or module, in the browser, it's outsystems...com/CTM/Invoice.aspx.

I've been changing it for days and it's still the same number.

Hi PJ.

So, you have your Module. You open it, change the CSS of a web screen (the Stylesheet property of it) through the CSS button. Publish the module. 

And the CSS do not change.

I'm just trying to understand your problem, 'cause I can't reproduce it. 

When I do the same as you, the CSS file number changes. All the times. I don't need even to change the CSS. Just to publish the module is enough. 

I'm trying to understand if I am doing something different than you.

I create an application and a responsive module. Silk UI (Lisbon). I am using the latest Service Studio. Platform is a Personal Environment.

So, what's your stack (.Net or Java), Platform version and Service Studio version?
Just to see if may be because of an old version or different stack.

Cheers.

.NET stack, Service Studio version 10.0.827.0

Cloud Platform 

Development mode
Version 10.0.823.0


The CSS does change if I force a reload in the browser, but the number after the ? in the url to the CSS file does not change.

Same as me.

Every time you change the CSS and publish, the css file in the server is updated. The number after the name of the file name in the HEAD is there exactly to tell the browser if it should fetch from cache (same number) or if must fetch from server (different number), but in server, the number is jsut ignored.

That is the reason why on forcing the browser to fetch everything from the server, even if the number do not changed, the new CSS will be download (because it is there).

But publishing a module should (mandatory) update all CSS file numbers in that module.

I'll ask you to do a small test.

Copy/paste the page in question. Delete the old one and rename the new one to be the same as the old one.
Publish your module, and see if the file number changes.

Just to see if there is something "stalled" in the page reference.

Truth is, every new publish should update (increment by 1) all the CSS file numbers from this module.

Cheers.

Copied Invoice, Pasted and came in as Invoice2. Deleted Invoice, renamed Invoice2 to Invoice. Same number:

Very Strange.

This is strange, PJ.

It is not what should be happening.I asked to OutSystems to take a look.
Maybe you can open a support ticket so that they can take a look and, if this is in fact a bug in the platform (I'm not saying it is), they can prepare a fix.

Cheers.