New: ListViewV2 beta

Announcements
13

Most of my uses for list view are as a more formatted version of a Table component with full CRUD and usually with a JSON object array source (like from a jsonb column type.)

See my Show and Tell on ListViews: Full advanced List View component example

So what I do is move that JSON into a global var and point each child component to an object property. And then when a user makes changes to the component I fire an event that updates the global var. Sometime I will also do a silent database update in the background which pushes the entire array back to the database.

Right now my Default values on the child components look like this: {{outreachPlan.value[i].message}. And I need a separate onChange handler for every child component like this:

// Get the existing value and the old value
const oldValue = outreachPlan.value.outreach_plan[lbSections.selectedItem.id][i].email_subject
const newValue = listView1.data[i].txtSubject

// Only make the change if teh values are different  
if (newValue != oldValue) {
  // Set the new value into the outreach_plan
  outreachPlan.setIn(["outreach_plan", lbSections.selectedItem.id, i, "email_subject"], newValue)
}

But if I could get the the whole child object like I can do with form1.data I can use a single event handler for all changes. And if I can get the intitialData, my handler is much simpler.

// Only make the change if the values are different  
if (item.data != item.initialData) {
  // Set the new value into the outreach_plan
  outreachPlan.setIn(["outreach_plan", lbSections.selectedItem.id, i, item.data)
}

It generally makes ListView operation easier to work with and reason with in the same way that Form did the same thing vs the old form.

4 Likes