Updating the table editable values

Hello, I would like to update the selected values from a changeset back to the table. I am using a JS query to transform the data, and I would like to update the values which are currently selected as well. When I click the save button on the table I have created a new JS query which presumably would update the table selected values.

However, I don't see the API which would allow me to set a selected value for every row in the changeset. How do I do it? How do I achieve it?

Regards,
Peter.

As far as I understood there is a big proclivity to not update the table from the JS on the frontend directly but use the query/datasource to refetch the data from the data source.

This is not something I need, nor want to do.

I am fetching the Git Tag revisions from Github directly, hence no updates are warranted. Changing the values/updated values are not being set in the table once selected. (I am using the save Handler and also Cell Handler, frankly, no idea if I should use one or the other as both should be captured by the table).

How do I force the update of the table without the unnecessary fetch of the same data from Github?

Screenshot 2024-06-27 at 11.29.27

Hello!

I am not sure I fully understand the goal of the operation. You have a table which shows your repositories and version tag information. What is the data source for releasesTable? When you chose the From and To tags, that options list is sourced directly from GitHub?

What do you mean by this? You need to edit every row in the changesetArray and modify the values? What values are being modified and why?

The save handler should be writing the information to the source of releasesTable. What is being fetched from Github during the update process?

the resource is a JS code which triggers the GQL (GitHub) query, which then flattens the response object into something more sensible.

The response looks something like this:

[
   { name: "portal", from: ["v0.0.1184", ...], to: ["v0.0.1184", ...], } 
]

now this works in the drop-down selection. But it does not persist the value as the value is mapped from releasesTable.selectedRow.from.

I did try to simplify the model into the following shape, but then I am not sure if it's possible to map two columns to the same resource.

[
   { name: "portal", from: "", to: "", tags: ["v0.0.1184", ...], } 
]

What is being fetched from Github during the update process?

Nothing. I am not going to update GitHub at all. I want to process the updated table.

The idea is to fetch the released versions from a variety of github repositories, fetch extra information and compile that into a text output. I am generating the release notes, so nothing is being updated at GitHub.

I asked because you mentioned you are trying to do this without unnecessary fetches from GitHub.

The from property value mapping shouldn't be tied to a selectedRow, that will always show the version of the actively selected row. Since you have the response formatted with "name", "from", and "to" properties your JS code should just be assigning the proper value to the property for that repository and you should probably use the default table mapping source of "from" and "to" for those columns.

If the repository information in the table is not being changed by a user and is just reporting the results of the GQL being parsed, it doesn't seem like you need to make edits to the table at all. Is that correct?

No, sorry, the user will have the option to select the version from which they want to generate the release notes.

So it seems like the save event of the table is more to trigger the operations that generate release notes based on a user selection, then?

If this is the case, I strongly suggest not using a table for user input selections.

A better fit would probably be a List View that has components for users to select the repos/versions that are required for their output and then triggers operations from a final confirmation button/submission.

Most of the data you are already querying can be used for the List View just as easily without trying to work around a way to make the table component behave outside of its intended use.

what is the intended use of a table if not using it as a table?

Sorry, I am new to retool and on top of that a backend engineer who is not fond of doing frontend that much.

Yes, exactly that is the usecase.

The main use of a table is to display data. Tables, in Retool especially, are connections to data that you need to review and possibly change. Their function is mostly built around handling some basic CRUD activities (which is why the Save Event handler generally triggers and update operation to the underlying data).

If I understand your process correctly, you are querying your GitHub resource to get all of your repositories and their version information (current and historical).

Your users are going to be presented with all of the repositories and the options to choose versions (from/to) to generate a set of release notes pertaining to their selections.

The table you are using displays the data, but you need to allow users to "change" the values of the from and to columns and have that data used so that the proper release note information can be generated as a text output.

Where are you saving these changes? What triggers the output?

To fully use the table in the way you are attempting you would need to likely store the original table data into a separate state that is used to display the table, write all of the changes made to the table to this state/variable, and then refresh the table with the updated state. At the end of all of those choices/saves you would process the final state for your outputs.

A List View would take all of the original query data and add in components like list box selections to choose versions for each repository and run the outputs when a button is clicked by the user.

Neither way is more or less "appropriate" but, again, the table isn't really a vehicle for user interaction beyond CRUD operations and there are many other components that are more user (and developer) friendly and have more straightforward implementations.

Based on what you've explained, in my humble opinion, a List View is a better component choice than a table to achieve your desired goals.

I am not saving them currently anywhere. There is a second big button that should fetch all the necessary information from GH again given the information in the table ("the current state").

This is kind of the heart of my point. You aren't trying to actually save any data on the table, just use inputs that are in the changesetArray to do something. To me, it seems like this is working against the intended use of the table component.

List View:

  • Show all repos, with components for From/To selections and a big "get release info" button.
  • When the List View item's button is clicked it triggers the GH resource to get you the info for that item's values (would be analogous to a table row's columns).
  • You can also put validation on the selections so it only runs when all of the required selections are made.

The more I hear about it, the more I am sure that a List View is a better choice.

1 Like

Ok, I will give it a shot. I am not married to the table. I am just not understanding the context.

1 Like

Right, i have successfully mapped the model to the list view with a few selects.

Now I don't know where to get the values for these selects from. The documentation says that these selects are only accessible from within the view, which is very awkward.

Screenshot 2024-06-28 at 09.40.00

@pyrrho I have been digging in the APIs but again this ListView seems to be a slightly inappropriate. :thinking:

As I consider your use case more, if your end goal is to use the selections so users can get each repository's releases you should be fine with the list view. If you need to have an overall "get all the selections at once" process flow then you may need to use a different approach to get all of the user inputs collected (maybe a form entry submission page or modal?)

Here is an example of the list view reporting the selected dropdown values that shouldn't be hard to extrapolate from. The List View is using the data source's primary key as its own and then the select components are tied to the "item" where the click is happening:

ECED80C9-CA07-4284-925C-B4D2DD7EA295

As a POC it should help to get you started on using List View component data on an item by item basis.

Quick follow-up: As I said before, using a table isn't wrong, it just seems a bit clunkier (to me) to process the changesetArray for your calls, but it would work!

The table's save event handler would run through the changesetArray to process the changed columns and send a trigger to the query that would process/deliver the release notes (likely using additionalScope). Afterwards, you can leave the changesetArray alone (so users would still see the Cancel/Save UI element) and the values would stay "edited" or you can clear the changesetArray after the last query to revert to the original table data.

hey thank you for your help. I think I will take a break over the weekend sit on it and redo the UI again on Sunday, I guess.

If you know of a dynamic container that fulfils my needs without some arbitrary restriction let me know. I spent heaps of time on this and my other work is getting stalled.

1 Like

I think if you look at the List View's options you'll also see this:

Which creates the property values you'd need for the whole set of list data:

Using these, you can trigger the necessary operations from an outside button and get the release notes data back and/or transform it how you need for the next step in your process.

In the JS you could build in logic to ignore selections that are null or you could disable the triggered query when the additional scope values are null. I think the List View is still the right container for the job, but using Retool has its quirks and caveats.

Simple loop JS Trigger:

let lvData = listView1.instanceValues;
for(let i=0; i<lvData.length; i++){
  await query2.trigger({
    additionalScope: {
      "option1": lvData[i].select1,
      "option2": lvData[i].select2
    }
  })
}

Simple Triggered Query (using additional scope):
image

Definitely worth a design think. Have a wonderful weekend and I hope you find the right solution for your app!

2 Likes

I have ditched the list view too. I moved to use two date pickers.

1 Like