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.
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
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.
@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)
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.
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.
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?
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.