How to able users to add a line of field

A user can fill a line of field, however, he can also add another line of field to fill, and so on. How can I do that?

My use case is, for example you want to add products to invoice along with their quantity and price. I want users to be able to fill a line of products, quantity and price field, then he is able to add another line of field of products, quantity and price to fill.

Also similar use cases like airtable or xano, a user can add a line of fields.

Right now I can bind the fields to an array to make them repeatable, but I can’t seem to get the value of each line of field, as each of them becomes just a replicate.

Thank you

1 Like

Hi @khairul,
you will need to create a variable of type array, and each item on the array will be an object.
Then on your workflow you can use our brand new array manipulation options to update it.
Create a “Change variable value” action on your workflow, and then target your array of object variable. When you will have selected an array variable, more option to update your variable will be available.

Then for:

  • Create a new item: choose the “Insert at start” or “Insert at end” options, and for the value give the default object of a line
  • To modify a item: choose the “Update one item” option, select the correct index, and then you can give the whole new object, or use the “Path” field to update only a property.
    For example, if each line is looking like { productId: 'xxx', quantity: 1 } and you want to create a workflow which update the quantity, you will setup the “Change variable value” action as follow
    • Type of update: “Update one item”
    • Index: probaly bind it to context.index if you are on a repeat
    • Path: quantity
    • Value: your new quantity. For example for increasing bind it to context.item.quantity + 1

Hope it helps :slight_smile:

1 Like

Thank you for your answer @aurelie .

Right now I made it like you suggested but now I have a button to confirm add/edit every changes to the array.

How do I make the action of editing/adding an object without having a button? I mean like airtable once you fill the form it automatically saved, because I am trying to put just a single button to confirm changes at the bottom and not more.

You can use the “OnChange” workflow of a text input instead of the “On click” of the button. The value will be inside the “event” object.

2 Likes

@aurelie So I tried to do the on change and don’t work. This is my setup

I created a line of 3 fields product, qty, total price in a repeatable element, and I bind it to an array containing the objects of each line.

I made an object for the default array: [{product_name:“”,qty:0,price:0}] so I can show a line of field as default.

Right now I can have a line for every object, however my problem is, I can’t seem to get the value of the fields, when I change it nothing happens meaning the value doesn’t exist.

On the onChange event of the input, you should access the value with event.value rather than internal variable (internal variable is only available on non repeat element)

1 Like

Sorry I am not familiar with javascript. Can you give an example, so I put an Id to my input, then how?

No need to add an id to your input.
On the input workflow, with an onChange trigger, you can add an “Change variable value” action like describe on my first answer, and use “event.value” as the bind value for the “Value” field of this action.

2 Likes


Sorry I still don’t get it, where did I do wrong?

Here it will be easier for you to select the “Partial update” option (toggle it to on).
Then on the “path” field which will appear type your property (products_2_id), and on the value you can just bind to event.value.

/!
The formula will not be able to compute properly, as event is only existing when the event is indeed trigger. You will need to test your workflow with the Preview mode, and not with the test function of your workflow.

Sorry its a limitation for now of using the “event” variable. We are working on it to make it easier to use.

2 Likes

Wow. It works perfect. Thank you so much.

Please don’t be sorry, you guys are already so fast at making updates, keep on it. Few weeks ago I spent several days trying to figure out how to change a value of an object in an array, now I can do it in seconds.

The updates are so good I think everyone will be in the no-code game in no time! Thank you so much!

Sorry I have one last problem. Right now under my lines of fields, I added a button to add another field. How can I make it focus on the first field of the newly added field line? My (products_2_id field)

Also I’m using the select element for that. Is there a way we can focus without opening the dropdown?

I think some of the components can be improved. I realise the search with dropdown component, the results can be fully customized by adding images or text and bind it to anything. The select and multiselect element doesn’t have that.

I want to add options such as "+ Add ‘search results’ as a one time product "and “Add ‘search result’ as new product”. I can add those options with search with dropdown component, hovewer my problem is I don’t know how to automatically select them and choose when entered. Is that possible?

I am new to weweb. Is it possible to make a video to explain the above. I believe many people will need a similar solution. Million thanks.

1 Like

I’ll try to make one, there’s really alot of possibilities with weweb