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

2 Likes

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

If i need to partially update multiple properties of an object at once, is it possible within the same ā€œchange variable valueā€ node, or do I have to add 1 node for each property I need to change ?

screenshot shows my attempt at doing so, but it overwrite whatever other sub-property is already set in my object.

Could you explain this a bit? Iā€™m trying allow the user to add additional text fields such as in the image where the + would add another text field. Once saved, it will add each entry to a list in the database.

I have the same problem this way.
How do I add multiple paths on the object variable?

For example, in this print, I add ā€œquantityā€ and ā€œproductā€ on the path to update the value for each key.

@aurelie can you help us here?