Flex Repeater Focus

Hello all,

I am trying to shift focus to different numeric entry fields in my perspective project.

In this example I have 4 fields, two of them sitting inside a flex container and I can auto-advance focus on them using the change script:

	if currentValue!=previousValue:
		self.parent.parent.getChild("nok").getChild("nokBC").focus()

How can I gain focus on the third field after that? (the third field is the instance of a flex repeater)

hmm im guessing a messagehandler would do
give each instance a unique id parameter or something and send a message containing the id you want to focus.
and let each component/instance check if it has that id…

2 Likes

So this is what I did:

I have a view which is going to be instances of my flex repeater:
image

On its root container I have this script:

And in another view which I have my flex repeater, I have an index PARAMS and I wrote this script on the change script of my second field:

	if currentValue!=previousValue:
		system.perspective.sendMessage('SetFocus', payload={"nextIndex": self.view.params.index + 1}, scope='page')

Now this works and shift the focus from the 2nd field to the third field but I made index =1 manually and I do not know how to shift the focus from the 3rd field to the 4th field now.

Instead of referencing self.view.params.index, just reference self.custom.index. For the Text Field in the Flex Repeater, bind self.custom.index against self.view.params.index. Now you have all four components referencing the same property; this means that you can place the same property change script on each of the Text Fields and you can use the same handler code to obtain focus.

Change Script (TextField.props.text):

if currentValue.value != previousValue.value:
    system.perspective.sendMessage("SetFocus", payload={"index": self.custom.index + 1}, scope="page")

Message Handler (attached to Text Field):

if payload["index"] == self.custom.index:
    self.focus()
2 Likes

Thank you very much for your reply.
I get an error:

File "<function:onMessageReceived>", line 2, in onMessageReceived
KeyError: 'index'

And this is what I did:
For the flex template, I have the script on the message handler as you suggested:
image

And in my main view, I have a requirement bar and that will indicate which field needs to have focus, on its value change script I wrote this:

image

	if self.props.data[0].cnt == 1:
		self.parent.parent.getChild("racks").getChild("okRack").getChild("okRackBC").focus()
	elif self.props.data[0].cnt == 2:
		self.parent.parent.getChild("racks").getChild("nokRack").getChild("nokRackBC").focus()
	elif self.props.data[0].cnt == 3:
		system.perspective.sendMessage('SetFocus', payload={"nextIndex": self.custom.index + 1}, scope='page')
	else:
		system.perspective.sendMessage('SetFocus', payload={"nextIndex": self.custom.index + 2}, scope='page')

I also tried this one:

	if self.props.data[0].cnt == 1:
		self.parent.parent.getChild("racks").getChild("okRack").getChild("okRackBC").focus()
	elif self.props.data[0].cnt == 2:
		self.parent.parent.getChild("racks").getChild("nokRack").getChild("nokRackBC").focus()
	elif self.props.data[0].cnt == 3:
		self.custom.index=2
		system.perspective.sendMessage('SetFocus', payload={"nextIndex": self.custom.index}, scope='page')
	else:
		self.custom.index=3
		system.perspective.sendMessage('SetFocus', payload={"nextIndex": self.custom.index}, scope='page')

Even tried without the custom index and I used only view.params.index. I do not get the error in that case but I do not obtain focus either.
None of them worked. Am I doing something wrong here?
the index custom property is on the bar and it is bound to view.params

hm maybe its easier to send in 2 index in the payload,
one for the instance number and one for which component inside the instance
something like this i gues

system.perspective.sendMessage('SetFocus', payload={"nextIndex": self.custom.index, "component":"ok"}, scope='page')
and
system.perspective.sendMessage('SetFocus', payload={"nextIndex": self.custom.index, "component":"nok"}, scope='page')
1 Like

Thank you, Victor!
For ok and nok components I only check self.props.data[0].cnt value to see if it is equal to 1 or 2, I do not use any message handlers on those only I use it for the instances of the flex repeater.

You received the described error because something using one of the scripts I provided had not been modified by you to have the custom.index property. That property does not exist by default and must be put in place by you.

@pkhoshroo : UPDATE: I misread the error; the KeyError is a result of the payload not containing an “index” key. Please check the sendMessage invocation and verify you are supplying an index key within the payload.

I did not modify it because I added a custom property called index to my bar or maybe I put it in the wrong place.

I have the view.params.index on my main view and then index custom property on the pie chart component, where I added the change script.

image
image

And then on another view, I have only the message handler script and I do not have any params or custom property:

image

so that custom index, should that be on the pie chart or PV text field? also, I am assuming the view params need to be on the flex repeater view (“spec”), correct? I am going to try that now.

I added both index custom property and view.params.index to this view but again I cannot see the focus
image

Please study this project, which works as I expect you’re looking for.
IndexDemo.zip (8.4 KB)

1 Like

Thank you very much @cmallonee. Appreciate your help! Now I have to replicate this in my own project.

1 Like