Request Focus in Perspective Table Search Bar

Hello there - I’m trying to figure out if it is possible to request focus on the table search (filter) bar from a button event script.


I cant request focus easily enough on the table, and my search button already toggles visibility of the search bar nicely using myTable.props.filter.enabled.
It would be a nice ux improvement if toggling the search bar on also requested focus so the user could just start typing their search query.

Digging a little more into this, it looks like it might not be possible. It doesn’t look like the perspective table is able to be drilled into like the vision power table is. A print out in the designer console of the items in dir(myTable) yielded the following (omitted private __* methods/attributes):

09:50:22.853 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - children
09:50:22.854 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - class
09:50:22.854 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - equals
09:50:22.854 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - focus
09:50:22.915 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - getChild
09:50:22.915 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - getChildren
09:50:22.915 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - getClass
09:50:22.916 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - getName
09:50:22.916 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - getPage
09:50:22.916 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - getParent
09:50:22.916 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - getPropertyTreeOf
09:50:22.916 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - getSession
09:50:22.917 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - getSibling
09:50:22.917 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - getView
09:50:22.917 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - hashCode
09:50:22.917 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - name
09:50:22.917 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - notify
09:50:22.917 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - notifyAll
09:50:22.917 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - page
09:50:22.918 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - parent
09:50:22.918 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - print
09:50:22.918 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - refreshBinding
09:50:22.918 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - session
09:50:22.918 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - toString
09:50:22.918 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - view
09:50:22.918 [Browser Thread: 49208] INFO Perspective.Designer.Workspace - wait

Yeah, that won’t work for two reasons.
For one, your code is running on the backend/Gateway (you can’t run Python/Jython in the browser [1]), so you only have access to the backend’s model of things.
And also, every Perspective component you get access to from scripting is in a carefully managed ‘SafetyWrapper’ to prevent you from (easily) pivoting to Perspective’s internals and really messing with things.

The capability you’re after would only be truly possible with code running on the frontend. The only way to provide that code is via an actual Perspective component, so we would have to either introduce the feature first party or you’d have to hack your way in via a custom module, unfortunately.

[1] Technically, efforts to, for instance, compile CPython on WASM are sort of working, but it’s very immature technology, and CPython doesn’t interop with Ignition as it is, so it’s not really helpful.

10-4
Obviously not the answer I wanted, but thanks for the response. This will save me spending any more time chasing this.

I was able to do what I think you want as follows:


Figure 1. The desired functionality.

  1. Create a TextField for your search string. I’ll leave you to work out how to make this appear and disappear.
  2. Set the table’s props.filter.enabled : true.
  3. Bind the table’s props.filter.text to the TextField created in 1.
  4. Do some CSS injection on the filter box: set
    props.filter.style.backgroundImage : } .tableFilter { display: none;}{
    This will hide the filter panel even though it’s enabled.

I’m just starting to learn these tricks from user @victordcq who has contributed many examples on the forum.

Update
As suggested by @victordcq, a better way would be to do the code injection in a style class rather than directly in the props.style of the component.


Figure 2. Doing it with style and class!

  1. Create a style.
  2. Expand the Background section.
  3. Inject the } .tableFilter { display: none !important;}{ here. The !important rule seems to be, um, important to force the display style to override the regular CSS.
  4. Apply the style to props.filter.style.classes.
2 Likes

@Transistor nice! I hadn't considered using a custom text-field for lack of knowledge on how to hide the built-in search bar. I need to get more comfortable with CSS, definitely. This is a good workaround :grinning: The rest my search button was already doing.

you are using this on the style props itself?

Its already a tricky thing to do it in styleclasses instead of a propper css file. But you do it in the props aswell? xD That is some real dark magic. I advice you not to do it here to often and just put it in a style class, you dont even need to asign the class to anything either.
Putting it in the style props might break other default styles. The style classes are atleast somewhat safe xd

Even i stay away from such magic :stuck_out_tongue:

1 Like

Victor, I thought that this was your normal approach!
Can you show how to do it in a style?

@victordcq I’m curious about this too. Would you just add a style class property to the table filter property and then set the class to a style class that has the filter hidden like @Transistor suggested?

im pretty sure in most of my posts i have a screen shot xd

edit:
Actually in that same post i just linked someone says they tried to put it in the background image style and it didnt work, so your trick seems not to work always (like i suspected)

There is no need to add the class. Just put Transistors line of code in the background image of a style class xd (the }{ are the trick)

if you want it only to work when the styleclass is added you have to put
.psc-folder\/styleclassName infront and add the styleclass to the component like normal (/ of folders are changed to \/) (psc- gets added by igntion)

1 Like

I’ve updated my answer in post #5 to use a style class.

1 Like

Its still not quite correct :stuck_out_tongue:

Step 4 is not needed,

The line of code you provided in the styleclass does not interact with you selecting the class as a style.
It will work on every table in the project regardless if you select the style or not. This is because you are useing the css selector of ignition.

If you want it only to work on tables where you select the class you will have to add the classname infront of it, like i said here:

It would be nice to have a way of doing this kind of thing ‘cleanly’… I have a few of those injections lying around and it makes me feel kinda itchy.

you can create your own theme.css for styles. The problem is you will still have to add in custom styleclassnames
.psc-folder\/styleclassName and create empty styleclasses to apply the classname to components...

That’s how I am doing it currently, they’re in a .css file. It’s still not what I’d call ‘clean’ though :X

those can never be clean :stuck_out_tongue: