Backend data update - using component events and variable copies

Ask us anything How do I?
1

Hello,

See, I’m having a component representing a backend object - let’s call it “A”. This A-component is rendered, in my page, into a container that repeats A-component based on a fetched A-collection. What I want to do is editing each A data threw this A-component and update the backend.

My intuition to do this is to, when each A-component is repeatedly created in the container based on the fetched collection, to :

  • Pass A’s data as a prop to the A-component that would, itself, create an A-copy of the data to display into it (a copy of the object from the collection, created when the component is rendered)
  • In the A-component, give each modifier a workflow (text fields, buttons, etc) that edit the A-copy’s object props individually (like ‘on change’ for a text field, I’d change A-copy.title for example)
  • At the end of each modifier workflow, raise an A-copy-changed event, event that would automatically trigger an A-component’s workflow (not global, but specific to the A-component) that would update the backend based on the changed A-copy (sending all the fields of the object) - and check query validation etc.

But, it seems that today in weweb :

  • A component’s children cannot change it’s ‘properties’ passed to it (even if there is an ‘on property change’ trigger for component workflows… but I don’t get when it is called)
  • A component cannot answer to an event of its children (at least if they are not custom components)- but ok, this can be done otherwise by calling a component’s workflow from the child.
  • A component’s workflow triggered ‘on mounted’ is never triggered at rendering, trigger that would allow to create this A-copy - which is blocking in my case (I created a ticket for that).

Is my solution well oriented, or do I mess up things ?
And don’t we miss some docs about workflow triggers ? Can you explain ‘on mounted’ and ‘on property change’ ?

Thanks for help !

2

* A component’s children cannot change it’s ‘properties’ passed to it (even if there is an ‘on property change’ trigger for component workflows… but I don’t get when it is called)
When a property is passed, it is bad practise to update it directly. You always emit an event, asking the parent to update their own property, as they are the one responsible of it. In the case of weweb you will emit a trigger “on Change” (up to you to create it)

* A component cannot answer to an event of its children (at least if they are not custom components)- but ok, this can be done otherwise by calling a component’s workflow from the child.
Components can emit event, its what we call trigger. This is the main pattern to make a parent react to a children change

* A component’s workflow triggered ‘on mounted’ is never triggered at rendering, trigger that would allow to create this A-copy - which is blocking in my case (I created a ticket for that).
Hmm, thats strange, onMounted should trigger when the component is rendered in the page.

Can you explain ‘on mounted’ and ‘on property change’ ?
On mounted is triggered when the component is rendered in the page. On property change is triggered when a props have a value change (can be used in your case to resync your copy variable)

3

Thanks for your answer Aurelie,

But it doesn’t answer my final question which is, what’s the best practice for doing so ? :slightly_smiling_face:

4

I think I found an elegant way to proceed, essentially based on this post. I’m sharing what I implemented for the community :

Before any change by the user, when the page loads, a workflow is launched to :

  1. Fetch collection A from Supabase
  2. Copy the collection into a list currentAs (meant to represent the last version during user’s edits)

And the AComponent is repeated as an item of the container displaying the A collection data :

  1. Pass down currentAs values as properties for the repeated AComponent

Then, when the user edits a AComponent instance :

  1. AComponent component (not instance) triggers the OnAChanged event, with value :
OnAChanged {
    field: <field_name>,
    value: <field_value>
}
  1. On this event, the AComponent instance (not component) starts workflow to :
  • Change currentA “partially” with :
    • path set to [<item_index>].<Event.field>
    • value set to : <Event.value>
  1. Update A in DB with the new currentA[<item_index>]

All this implies that currentA is initially (at page load) equal to the fetched collection, but after the first user edit, the collection itself is not up to date and the display is maintained with currentA list. The collection needs a page load to be updated.

Note : it must be done in two steps, because it is not possible to select which specific field to update in backend directly with the Database|Update action. Certainly it could be done in one step with REST API Request action.

@aurelie I still have not understood why my "On mounted“ workflow did not trigger, but I’m creating a ticket for that.

1 Like