Hi everyone,
I have a table which represents data from a query. I would like to add edit and delete buttons for each row in my table as the table in the figure below.
I also want to do some actions with these buttons. When a user clicks the edit button in each table row, it will trigger an event such as onCellEdit for example.
Thank you for your time!
Isn’t it enough to use queries in the onActionPerformed event of those buttons ?
Maybe trigger a refresh of the table afterward if it doesn’t update, but I can’t see why this would not work.
If the other actions you have in mind can’t be done from that same event handler: why not ? What issues did you run into ?
edit: Maybe you only want to remove the row in the display table, not in the database ?
Yeah, there are many things that we need to handle. I am not sure that I can answer all your questions now. However, I want to make a responsive table like a HTML table in the normal website. When a user clicks edit/delete button, it will update both UI and database.
I don’t know if you can put buttons or symbols in a table, but if that’s not possible you can easily make a flex repeater with your buttons/icons right beside your table, based on its length.
Then, you can add a script on the onActionPerformed or onClick event of your buttons, with your SQL queries and the logic you need to handle.
To target the right database table entry, you can have its primary key associated to the row in the display table, without it actually being displayed. Then you can just reference that in your query.
If you’re wondering how to target a specific row in the case where your buttons are in a separate flex repeater, you can match the instance number of the flex repeater with the display table row.
There might be simpler solutions, I never had to do something like this, but from the little I know of Ignition this should work and be easy enough to implement.
So how do we add the buttons to the table rows? If the gateway is perspective... they have buttons in those tables. How do we do this?
Put the icons in an embedded view for the Actions column. The view will automatically have a rowData parameter that contains all the values for the row, which you can use to edit or delete the entry when the icons are clicked. Then use system.perspective.sendMessage() to indicate that the data has changed, so the table can refresh its query.
The row data should contain a primary index that can be used to look up the entry in the database, which may not be something you want shown in the table itself. You'll need to make sure that it is present in the table's columns, so that it shows up in rowData, but you can toggle its visibility.
Thank you, where in the properties do I add these values on the table component? Have you done this? Any chance you could screenshot the properties of the sub view parms and the table component properties ...
So I have a view defined for a "priority" column of a table:
Then the view itself references rowData to get the priority property:
You would put your icons in such a view, and make use of whatever primary key column exists for that table's row (assuming the data comes from a DB query) to either delete that entry from the table, or open a popup that lets you edit it.
That would be the primary key I mentioned. Assuming the table row is a representation of a DB row, then that row would have an indexed key that can be used to reference it. You have to include that key in the table's columns so that it shows up as a property of rowData in the view. In most cases it's probably not something you want actually showing in the table, so you can set its column to visible: false.
From your screenshot, it looks like the view can reference rowData.Id.
This should be marked as answered. I had the same request as OP. I would have started my own thread, but this was already here.
