Event Script crashes with CSS Properties that include hyphen

When I try to use a CSS property that has a hyphen in an event change script, I get an error in the log as shown below. Also, the beginning of the line of code is underlined as a syntax warning, but there is no error displayed when I hover over it. This seems to happen for all CSS properties that have hyphens.

org.python.core.PySyntaxError: SyntaxError: can't assign to operator (, line 2)

at org.python.core.ParserFacade.fixParseError(ParserFacade.java:95)

at org.python.core.ParserFacade.parse(ParserFacade.java:205)

at org.python.core.Py.compile_flags(Py.java:2252)

at com.inductiveautomation.ignition.common.script.ScriptManager.compileFunction(ScriptManager.java:898)

at com.inductiveautomation.ignition.gateway.project.ProjectScriptLifecycle$TrackingProjectScriptManager.compileFunctionSuper(ProjectScriptLifecycle.java:785)

at com.inductiveautomation.ignition.gateway.project.ProjectScriptLifecycle$AutoRecompilingScriptFunction.getOrCreateDelegate(ProjectScriptLifecycle.java:884)

at com.inductiveautomation.ignition.gateway.project.ProjectScriptLifecycle$AutoRecompilingScriptFunction.(ProjectScriptLifecycle.java:875)

at com.inductiveautomation.ignition.gateway.project.ProjectScriptLifecycle$TrackingProjectScriptManager.compileFunction(ProjectScriptLifecycle.java:770)

at com.inductiveautomation.ignition.common.script.ScriptManager.compileFunction(ScriptManager.java:881)

at com.inductiveautomation.perspective.gateway.script.ScriptFunctionHelper.lambda$invoke$0(ScriptFunctionHelper.java:107)

at java.base/java.util.concurrent.atomic.AtomicReference.updateAndGet(Unknown Source)

at com.inductiveautomation.perspective.gateway.script.ScriptFunctionHelper.invoke(ScriptFunctionHelper.java:100)

at com.inductiveautomation.perspective.gateway.action.ScriptAction.runAction(ScriptAction.java:74)

at com.inductiveautomation.perspective.gateway.action.ActionDecorator.runAction(ActionDecorator.java:18)

at com.inductiveautomation.perspective.gateway.action.SecuredAction.runAction(SecuredAction.java:44)

at com.inductiveautomation.perspective.gateway.model.ActionCollection$ActionSequence$ExecuteActionsTask.lambda$call$0(ActionCollection.java:263)

at com.inductiveautomation.perspective.gateway.api.LoggingContext.mdc(LoggingContext.java:54)

at com.inductiveautomation.perspective.gateway.model.ActionCollection$ActionSequence$ExecuteActionsTask.call(ActionCollection.java:252)

at com.inductiveautomation.perspective.gateway.model.ActionCollection$ActionSequence$ExecuteActionsTask.call(ActionCollection.java:221)

at com.inductiveautomation.perspective.gateway.threading.BlockingTaskQueue$TaskWrapper.run(BlockingTaskQueue.java:154)

at java.base/java.util.concurrent.Executors$RunnableAdapter.call(Unknown Source)

at java.base/java.util.concurrent.FutureTask.run(Unknown Source)

at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)

at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)

at com.inductiveautomation.perspective.gateway.threading.BlockingWork$BlockingWorkRunnable.run(BlockingWork.java:58)

at java.base/java.lang.Thread.run(Unknown Source)

To be clear, the following code does work, but I'm not sure choking on hyphens is expected behavior, as other CSS properties work fine with the other syntax. Just want other users to be aware, so they don't struggle with this for a couple of hours like I did.

def runAction(self, event):
	self.getSibling("save_message_label").props.style = {
	  "classes": "",
	  "background-color": "yellow"
	}

If you use the property browser to select the property you want to assign to, you'll see that it uses react-style camelCase and not snake-case.
image

2 Likes

Thank you, yes I can see now that using the Javascript syntax for the CSS properties is the way to go when scripting, and I suppose that makes sense.

1 Like

Note that in python, a dash means "subtract". Jython doesn't know that you were trying to use the dash as part of a name, and that's not something IA can fix. Transforming naming styles is a workaround for poorly-thought-out computing standards (looking at you W3C).

1 Like

The other option is to use subscript access to property names. React-style "camel-case" names would be preferred, though.

e.g, self.props.style['background-color'] = "yellow" works.

2 Likes