I don’t have the templates you’re working with because I have custom ones I typically use but I can explain a few things that might help you figure it out.
“page.props.path” is a reference to a property called “path” on your active page (views can be used on more than one page). A page is represented by that little icon in the lower left corner of your tabs for open screens. It will look like an Ignition box logo in 8.1.1 and a gear in prior versions. Pages are pre-defined paths in your Perspective project that load a view that you specify at design time. Think of it like a definition for a URL within a website (a link). When you create a view you can check a box to have it create a page configured to load that view automatically (in any of the more recent versions).
It sounds like you’re confusing style bindings with style class bindings. I put together a quick tutorial to show you how a style class binding works.
One tip I have is to test your style classes on label objects to make sure they are actually doing the style you expect. Basically, make 2 labels and set the style class for each one to make sure you’re getting the styling you expect.
Another thing to check with your script is that the item you’re binding has a property called “target” on every item and that target property is filled in with a value that lines up with whatever is displayed in your page path property. It sounds like you might need to fill those values in to properties on the control for the script to work. It looks like It’s trying to take the page path (configured by the thing I mentioned first) with the value in the target property.
I think a style class binding example would be helpful to understanding the difference between the code you’re looking at and the binding you’re trying to do. Here’s a quick tutorial. key thing to notice is the difference between binding to a style class and binding to a style. the code you posted is binding to a font style but you are trying to bind to a style class that you have defined.
- make a test screen
- Put a label on it with some text displayed on it
- Add a custom property to your label called “state” (just to illustrate)
- Set your “state” property to the value of “true” just to give it a boolean datatype so you can check/uncheck it
Ok, that’s the setup. Now the binding.
- Click the binding icon next to the property “props.style.classes” on your label to open the binding window for it
- Select a “Property” binding and point it to “this.custom.state”
- Click “Add Transform” and select a “Map” transform
- On the right side of the mapping you want to pick “Style Class” as your “Output Type”
- Create a “true” and “false” binding.
- Select different style classes for each one.
Now you should be able to check and uncheck your “state” property on the label to change the style that is applied to it.