I've noticed that the Vision property editor is user-friendly, with drop-down menus for each style setting, while the Perspective property editor feels more complex, resembling CSS styling. I find it challenging to make changes to components in Perspective.
I would appreciate assistance with the following:
- Are there any courses, tutorials, or video lessons available that can help me master styling using the Perspective property editor?
- Is there a way to configure the Perspective style editor to function more like the Vision style editor?"
This version is more concise and professional, focusing on clarity and simplicity
The perspective styles are based around CSS. If you click on the Modify Style Button it will give you a popup for editing the properties.
The json you actually see in the editor is ReactJS/TS style props because Perspective uses React in the background to render your views and styles. So if you find tutorials on how to use style props in React it reciprocates pretty well to perspective. Normal css rules still apply but the main difference is how you have to pass in the names of the properties.
For example, background-color in css is backgroundColor in the style props json field.
Perspective in my opinion exposes a lot more to the developer for customization. It takes some practice moving away from vision, but at the end of the day you have much more control over how everything looks and functions once you get the hang of it.
All perspective components have fairly decent documentation on the Ignition Docs. Perspective Components | Ignition User Manual (inductiveautomation.com)
You can always reach the docs by hitting F1 in your designer (or whatever respective key for your operating system if not windows)
2 Likes
You can actually use the actual css property name, with the dash. The difference is that the designer won't recognize it, so it can't suggest possible values.
I don't know that I have ever tried since I come from a ReactJS background, so I always have used the style names.
Good info, but for the purpose of "User-friendly" I would recommend using the names that the JSON Schema ref uses for the styles.
