Update form within repeated item - is this possible?

Hi,

I’m trying to create a really fast way to update incorrect data in a collection of repeated items. Essentially someone will scan all the repeated items and where there are issues, I’d like for them to be able to click in the field, make the necessary change and click submit to send the update to Xano.

I’ve been able to retrive the collection of items from Xano ok and display them within a form element, with editable fields that are pre-populated based on the repeated item through bindings. To be clear the form element is within the repeated item.

I’ve added an action on the form container so that when Submit is clicked, the fields for the selected/updated item are send to Xano.

The issue I am having is the form fields are not appearing in the formula editor, so I cannot send the updated fields back to Xano.

I’ve noticed if I remove the repeated item binding and add it back in, the form elements are visible in the formula editor for binding, however WeWeb starts crashing with connection and save errors.

Am I doing something wrong? I really don’t want to have a form outside of the repeated item that just sits there - I want the UI to have “inline” editing capability.

I’ve attached a screenshot of one of the repeated items showing up in the form. The Approve button is the form container Submit which should pick up any changes in the fields - but the fields aren’t showing up in the formula editor.

You need to use variables and “on change” workflows to keep track of the input values.

See this post with an example.

You can also try a datagrid element and see if it works for your use case

2 Likes

I did look to see if there was an existing post - couldn’t find it, thanks for pointing me in the right direction, it is working now.

Just as an additional follow-up to this - rather than creating a custom workflow for each field, I’ve created a global one and am passing the relevant parameters. This is working well. What would make it even more generic is if I could pass the element’s name rather than having to specify this parameter for each workflow. Do you know if there is some way to work out the name/id of the element that has been clicked and pass it along? I thought there might be an event.id or something like this?

In the “on change” workflow of the input you should have access to the DOM event.
From there you should have the target property to identify the element.
From there you can inspect the element and see if there is some attribute that you can use.
Weweb sets its element id (the one specific to weweb, not the one you set in the editor) in an attribute, but you need to see if it is on the input element itself or on a parent element.

This is all the events I can see. I can see the Event Object which only contains a value. Where would I find the DOM event?

In the event object, accessible with the property domEvent.
You don’t see it in the editor, but it’s there.

Thanks, I tried setting an object to Event[‘domEvent’] and Event[‘domEvent’][‘target’] but nothing is being returned when the field is updated.

I then tried setting the object to just the Event object to see what’s in there, and all I see is [‘domEvent’][‘isTrusted’] and [‘value’]. Refer to the yellow highlight in the screenshot.

It looks like you are just assigning the event object to another variable.

I suggested that you inspect event.domEvent.target (this will get you the html input element) and see if you can find an attribute that is useful as an id.
You need to use a javascript action and the developer tools of the browser.

Probably it’s just easier to input the name manually.

You can try with event.domEvent.target.name

Thanks - it’s getting beyond my capabilities, I still haven’t worked out how to use the javascript action element.

So that we can work on this, what will be the best way to achieve this in no code?
Have an origin variable in the event containing the uid and/or the name of the element?

At the moment, if you are repeating something, you have access to the item and the index inside context.item variable.

I was thinking it would be great if you set a name in the Navigator / Element’s Name (refer to yellow in screenshot) that this would appear something like [Event][Element Name] which you can then use in formulas (via context), workflows (via Event), etc.

For formulas:

For workflows:

for input element you already have this, it’s event.domEvent.target.name
A shortcut in the editor would be nice but you still have to make the component name unique to use it as id

I get it now - the problem was I was typing, Event.domEvent.target.name and it wasn’t working:

However, when you copy and paste, it gets interpreted differently (I didn’t know this) and now works.

Thanks for all the help - would be nice if all the possible events did show up to make it easier to see what’s possible.