Set Text Focus On Perspective module

self.getSibling("ScanWO").focus()

I have try to use the focus scripting in the perspective.
image
current situation is when I clike the button , it will add the data after the previous data
image

What I want is if I click the button , the previous text will become blue
image
then the new data can replace the old data( I use Scanner as input)

this is very easy in vision , but I don’t know how to make it works in perspective.
Thanks a lot

It doesn’t seem to be programmable at the moment. See Perspective TextField SelectAll OnFocus. You could use the button script to set the text to “”.

noted and thanks

You could ‘css hack’ it:
Create a new style, call it highlight-text, then in one its field (for example the background image), paste this: }.psc-highlight-text::first-line { background-color: blue;}{ (replace blue by whatever color you need/want)
Now, add the highlight-text class to your input field on your button’s actionPerformed event script to enable the effect, and remove it + delete the text when you get your new data.

edit:
You can also put that css bit, without the first and last brackets, in a custom theme file. You’ll still need to create the style class. Make sure the names match, with the psc- prefix in your css selector.

1 Like


upside is my understanding of your part explain I first adjust the component ScanWO, but I don’t know the following word how to handle

Now, add the highlight-text class to your input field on your button’s actionPerformed event script to enable the effect, and remove it + delete the text when you get your new data.


can you show me some picture , thanks a lot

You forgot the }{ in your css: }.psc-highlight-text::first-line { background-color: blue;}{


You need to start with a closing bracket and end with an opening bracket, to inject css. Yes, it’s not pretty.
OR
You use .psc-highlight-text::first-line { background-color: blue;} without the brackets, in the theme css file (something like /usr/local/bin/ignition/data/modules/perspective/themes/your_theme.css)

Then, in your button’s onActionPerformed event, add something like this:

classes = self.getSibling("TextField").props.style.classes.split(' ')
classes = set(classes) | set(["highlight-text"])
self.getSibling("TextField").props.style.classes = ' '.join(classes)

Then, when you need to replace the data in the text field,
do the opposite:

classes = self.getSibling("TextField").props.style.classes.split(' ')
classes = set(classes) - set(["highlight-text"])
self.getSibling("TextField").props.style.classes = ' '.join(classes)
2 Likes

it works for the color change, thanks a lot