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

Module Development
1

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!

2

Might need to restart the designer and gatewayservice.

3

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

4

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

5

Reopen the same project perhaps? :thinking:

6

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.

7

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

8

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
9

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

10

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

11

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

12

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: