CSS Change: Shows in browser, doesn't show in Designer view

I’m experimenting with CSS in the SDK Perspective example module, the TagCounter component. I modified some the color and alignment values in web\packages\client\scss\_tag-counter.scss and the changes are reflected in the emitted \perspective-component\gateway\src\main\resources\mounted\RadComponents.css file.

My changes are visible when I launch my view in a browser but they aren’t visible in the Designer view. I remember seeing a forum post with something about this updating or clearing the Designer cache fixing the issue…but I can’t find that post :roll_eyes:

Any suggestions?

System info:
Ignition version 8.1.5
Windows 10 Enterprise (Build 18363.1679) [64Bit]

Thank you.

BTW, while on the subject of CSS and the TagCounter, how to I expose the tag counter interval color property to the Designer’s property editor?

Thanks again!

Might need to restart the designer and gatewayservice.

You just need to change your theme and change it back again in the Designer. Definitely needs to be a button somewhere to refresh it… In the Perspective module context menu perhaps? ‘Reload Theme CSS’

Edit: that works for themes, not sure if it works for what you’re doing

Hi Nick, correct, it doesn’t work in this case :frowning:

Reopen the same project perhaps? :thinking:

Hi Victor. So, I restarted the Ignition service (from Windows Task Manager), guess what? It didn’t affect the designer, same is. What did change, in a launched browser session, is that my modified TagCounter component now looks exactly like the RadComponents TagCounter…my changes have no effect now.

can you look in the designers external debugger and see if the css works there?

I found the problem…my mistakes:

I didn’t changed the .scss reference in my .tsx file (in the web\packaged\client project)…it the .tsx was still using the RadComponents .scss reference.

and…

I didn’t update the main.scss file…it wasn’t importing my modified .scss file.

SO many things can go wrong for what I thought was such a simple thing to do…copy a working component, rename everything, tweak it and go. HA!

1 Like

haha yeah a lot can go wrong with making your own components xd

I went through the browser inspector window and noticed my component was using the class as the RadComponent.

Solution found
If I had a dollar for each time I reopened my project…and recompiled…and reviewed…and relaunched… :slight_smile:

I want to do this eventually… Tis a bit daunting to start though, i’ve had a brief look through and there’s a LOT of stuff, even for something simple… And there’s the fact I don’t know React, TypeScript, Java (only small amount to get by the basics), the Gradle build process, whatever else is needed… let alone the structure of everything. :pleading_face: