How to Add Multiple Rows of New Fields in a Form upon clicking Add Button

[sillysurry]

Hi there! 

I am trying to achieve a responsive layout in my Power App Edit Form wherein if the User clicks on "Add New" button it shows them with a new row fields with certain inputs which they can fill in. Something like the Image below.

Original

After clicking Add New

BACKEND DETAILS

My current implementation thought is something like 

1. User creates a new unique client and gives him a Ref ID(auto-generated) (a client can have multiple Ref ID in my case)
2. On adding a new Client, original row is auto created. 
3. On adding a new row using the "Add New", a new row in my SharePoint list is added with the duplicated Client name and Ref ID.
4. After adding one or multiple rows in bulk, a Save button bulk adds new rows into the SharePoint List.

I wanted to achieve this using the EditForm feature, however as per my current knowledge, I don't know how to visually bring a new form with the certain details autopopulated and have edit bulk feature.

Below is the master sheet for how different items interact with each other

I hope I was able to explain my requirements, however if you would still need clarification, please do let me know.

Your help would be deeply appreciated. 

Thanks 🙂

@WarrenBelz

@Amik 

@BhaskarDhone 

[RogierE]

If you would ask me, I guess I would propose to use a Gallery in stead of an Edit Form. An Edit Form has the ability to Edit a single record/row, and I believe you were showing that you needed the user to be able to edit multiple rows. 

You do not have to worry about Unique ID's, because these are automatically created by SharePoint lists. So if this is your source, I would add a  Vertical Gallery, and add your list (let's call it MyList) as the Items of the Gallery. 

If you then fill the gallery with TextInputs that are connected to the columns in MyList with Thisitem.Description and ThisItem.QTY ... etc, if these are your column names. 

Don't forget to add a Save button or save every change separately in the OnChange property of every TextInput (of course this last option creates a lot of read-write actions to your list)

Update(MyList, ThisItem, {Description:TextInputDescription.Text,TextInputQTY.Text ... etc})

To improve the performance it would be better to work with a collection (a local copy of your list)

So to do that, the OnVisible property of your page should contain:

ClearCollect(colMyCollection,MyList)

(you could filter it down per user or per client if you want to)

And the colMyCollection should be in the Items of your Gallery

And then the OnChange property of the Textinputs would be 

Update(colMyCollection, ThisItem, {Description:TextInputDescription.Text,TextInputQTY.Text ... etc})

Your "Add New" button should have the OnSelect property

Patch(colMyCollection, Defaults(MyList),{Description:"New Entry"})

And your Save button would write the collection to the List

Patch(MyList,colMyCollection)

One thing that might be a bit confusing at first when you are working with Galleries for your input, is what to do with the column headers (in black in your screen shot). You can simply add them above the Gallery as Text Labels.

Note: you can copy my code directly, but there might be slight value, source, naming and lannguage differences. So it is better to follow my lead but write/check the code yourself.

Please LIKE the reply and ACCEPT it as the solution if the answer is what you were looking for.
(to help me grow in community rank and help others find the solution) 

[sillysurry]

I see. Thanks for your reply.

Currently this is my EditForm and I have made multiple tabs to show only certain fields related to that tab within, however they all belong to the same entry in the sharepoint list. Would that be feasible with Gallery View as you said before?

Further details on the use case,

1. Event Info holds the general info of the Event as per the client, I do not want all the column headers at the top for this TAB but would rather want it displayed as shown in the image. (which is currently done using EditForm)
2. Housing, Facility, Billing, Logistics are the ones which would require me to Add New rows as per the user liking wherein I am okay having all column headers at the top.

How would you suggest me to go about it?

How should I divide the screen into Tabs, Column Headers for certain tabs, and normal edit functionality for Event Info tab?

[RogierE]

The tabs can work in combination with an edit form as good as they can do with a Gallery. 
what you would need to ask yourself is if you would want to support entry of a number of records simultaneously on the same page (I which case you should switch to a gallery for inputting data) or a single record per page (in which case you could stick to your current design with an Edit Form)

[sillysurry]

I think I wasn't clear before

I need both single entry and multiple entries together. Let me give you an example of what I am trying to achieve with the help of an excel sheet snapshot.

As shown in the example above

• I need one Entry for Client Name, Event Name, Event Status and other Event Info
• However, for the same client, I can have multiple Ref IDs and multiple Housing Events (and/or Facility, Billing and Logistics - not included in the example for simplicity)

I want to achieve the above using Gallery (as you suggested me to do). However, under the Event form I want edit fields like I displayed in the previous image (shown below as well)

i.e. I dont want all the Column headers to be at the top of the page

and for Other Tabs, I want it something like this (i.e. want all tabs on the top along with edit multiple functionality)

How should I achieve this?

Thanks.

[RogierE · Accepted solution]

More than clear,

So every time you have a header row in Excel, you should consider a separate table for PowerApps. In this case I would have a separate table for Clients and a separate table for Housing. The connecting ID is the unique ID in the Clients table that is auto-created in SharePoint Lists and that you refer to in a column named ClientID in the Housing table.

Now for editing the Client table on the Clients tab you will use an Edit Form, and for editing the Housing table you will use a Gallery as described above. 

You could repeat this of course if there would be multiple events per Client, working with 3 connected tables. 

One thing that is not clear though: why would a single client have multiple ReferenceID's? If this is a ReferenceID that can be entered manually, I would not use that for connecting tables, because this can get messy as a consequence of typo's or non-unique ID's. So I would always use the ID column delivered and auto-populated by your SharePoint list as a cross reference between tables. 

Please LIKE the reply and ACCEPT it as the solution if the answer is what you were looking for.
(to help me grow in community rank and help others find the solution)

[sillysurry]

Ref ID is not for the client but rather the app user, it refers to the different transactions a customer makes.

I could then add another field of CustomerID which I could possibly use as a connector.