Hello, I have a table that is getting data from a get API, under the table I have created a delete button that takes the ID of the selected row and runs a httpDelete to delete that row.
While the HTTPDelte is working fine and the row is actually deleted, my problem is that new data (without the deleted row ) is not being displayed until I change the view page and go back to it or refresh the page.
I want that process to be done automatically as soon as I delete it, I want it to disappear from the table.
Any ideas on how to do that?
How is the table populated ? With a binding ? With a script writing to the table property ?
With a binding (HTTP Get)
I’m not familiar with HTTP bindings and how they refresh, but you can try refreshing the binding on your table in the button’s event.
something like
self.getSibling("Table").refreshBinding('props.data')
Okay Thank you for the reply,
The problem is the delete button takes me to a popup view page in which it asks me “are you sure” and in that popup view page, when the user chooses the “YES” button that is when the HTTPDel is called, in order to refresh my binding there through the script you have provided, I would need to access the table which is in the other view (not the popup), which I can’t seem to be able to do
So I’m guessing you’re actually deleting the row from the popup, when “yes” is clicked ?
Then I’d suggest using sendMessage from the popup, with the confirmation status as payload, add a handler on your table and do the actual deletion there depending on the confirmation. After deleting, call self.refreshBinding("props.data").
PS:
If the table is there only for display, you could also directly delete the row from the table’s data, with
del self.props.data[row_index]
Yes your guess is correct I am deleted the row from the popup.
I will read through your answer and try working on it and let you know what happens (I am very new to Ignition) thank you!
Here’s the json for a ‘generic’ confirmation popup:
{
"custom": {},
"params": {
"message_type": "test_msg",
"popup_id": "id",
"text": "Foo Bar Baz"
},
"propConfig": {
"params.message_type": {
"paramDirection": "input",
"persistent": true
},
"params.popup_id": {
"paramDirection": "input",
"persistent": true
},
"params.text": {
"paramDirection": "input",
"persistent": true
}
},
"props": {
"defaultSize": {
"height": 200,
"width": 280
}
},
"root": {
"children": [
{
"meta": {
"name": "Label"
},
"position": {
"grow": 1
},
"propConfig": {
"props.text": {
"binding": {
"config": {
"path": "view.params.text"
},
"type": "property"
}
}
},
"props": {
"style": {
"textAlign": "center"
}
},
"type": "ia.display.label"
},
{
"children": [
{
"events": {
"component": {
"onActionPerformed": {
"config": {
"script": "\tpayload \u003d {\n\t\t\u0027popup_id\u0027: self.view.params.popup_id,\n\t\t\u0027confirmed\u0027: True\n\t}\n\tsystem.perspective.sendMessage(self.view.params.message_type, payload)\n\tsystem.perspective.closePopup(self.view.params.popup_id)"
},
"scope": "G",
"type": "script"
}
}
},
"meta": {
"name": "confirm"
},
"position": {
"basis": "80px"
},
"props": {
"text": "confirm"
},
"type": "ia.input.button"
},
{
"events": {
"component": {
"onActionPerformed": {
"config": {
"script": "\tpayload \u003d {\n\t\t\u0027popup_id\u0027: self.view.params.popup_id,\n\t\t\u0027confirmed\u0027: False\n\t}\n\tsystem.perspective.sendMessage(self.view.params.message_type, payload)\n\tsystem.perspective.closePopup(self.view.params.popup_id)"
},
"scope": "G",
"type": "script"
}
}
},
"meta": {
"name": "cancel"
},
"position": {
"basis": "80px"
},
"props": {
"text": "cancel"
},
"type": "ia.input.button"
}
],
"meta": {
"name": "buttons"
},
"position": {
"basis": "32px"
},
"props": {
"justify": "flex-end",
"style": {
"gap": "5px"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column",
"justify": "space-between",
"style": {
"padding": "5px"
}
},
"type": "ia.container.flex"
}
}
It takes 3 parameters:
popup_id: The id you give to your popup when you open it. It’s used to close it, and it’s also sent in the message payload. Should not be needed, but just in case you have several popups opened and you want to identify where a message came from.
message_type: Use the same message type for your handler on the table
text: That’s displayed in the popup.
To use it, pass those parameters to your popup when you open it:
then add a handler on a component:
And that’s it.
> 
You might need to adjust the scope of the message/handler (which you could also parameterize), and of course style/resize/whatever the popup, but the functionality should be enough for what you’re trying to do.
Thank you for pointing me in the right direction, yes Message handlers were exactly what I was looking for!
Followed your logic and added a message handler named “refresh” on the table :
self.refreshBinding(‘props.data’)
And in my Popup in the event handler of the “YES” button I added :
system.perspective.sendMessage(‘refresh’)
And basically after I press yes the element is deleted and the table is refreshed.
There is a small delay between the deletion and the refresh still but yes your solution is good
My guess for the delay would be that’s the time needed to do the query again.
If you don’t want to do a query again, you can consider the alternative way I gave earlier: delete the row from the table manually
if payload['confirmed']:
del self.props.tree[index]
This is how we handle “are you sure” popups. Efficient and works.
Yes true, thank you very much Pascal you were of great help to me !