Create Repeating Section In PowerApps New Form - Step By Step - Part One

Overview

 

In this article, we will create the Repeating Section with PowerApps forms with New Form and Edit Form. I have divided the creation of Repeating section into two parts.

• Create Repeating Section for New Form
• Retrieve Repeating Section Values in Edit Form

Scenario

 

We have two columns in the WorkOrder List.

• Title
• WO Number

Now, we want to create a Repeating Section for the following three columns.

1. Role Name
2. Technical Content
3. Technical Description

 

So, the form will look like the following.

 

 

The user will enter the Title and WO columns.

 

Then, they can add every single row by clicking the + icon button. When a user hits Save, the concatenated string will be generated and the data is stored in the SharePoint list.

 

Download Code

 

You can directly download the code for this entire app using the GITHUB URL,

 

Now, let’s see how to achieve this functionality.

 

Step 1 - Create a Home Page

 

We already created one Home Page for this application.

 

 

We have added a simple gallery on the Home Page and added the + icon to fill up the New Form.

 

 

Step 2

1. Add a new screen.
2. Add a New Form.
   
   
   
   
3. We have a column named “RepeatingSection” to store the value of the Repeating Section. Just hide that column as of now.
4. We can’t add the Repeating section inside the PowerApps form. So, we will add the repeating section outside the form.
5. Add + icon to add the new row in Repeating section.
   
   

Add the following line of code.

Collect(
NewCollection,
   {
      CItemSerialNumber: Text(Last(NewCollection).CItemSerialNumber + 1),
      Clevel: "",
      Ctc: "",
      Cdescription: ""
   }
)

Add Gallery with the following controls.

 

 

In the gallery’s data source, add the “NewCollection” collection that we just created.

 

 

Add the following line of code on the Close button of each row.

RemoveIf(NewCollection,CItemSerialNumber = ThisItem.CItemSerialNumber)

Add "Save" button with the following line of code.

UpdateContext(
    {
        NewItemsString: Concat(
            RepeattingTable_1.AllItems,
            Concatenate(
                'sr.no_1'.Text,
                ";",
                Dropdown2.SelectedText.Value,
                ";",
                technicalcontent_1.Text,
                ";",
                description_1.Text,
                ";",
                "|"
            )
        )
    }
);
SubmitForm(Form1);

Once we add the code mentioned in the above step, we will need to add the following variable to the “RepeatingSection” datacard which we hid in step 3.

 

 

 

Now, on Form’s OnSuccess event, navigate the user to the HomePage. Add the following line of code.

 

Navigate(HomePage,ScreenTransition.None)

Go to the HomePage which we have created in “Step 1” section. Add the following line of code on the New button’s click event.

ResetForm(Form1);
NewForm(Form1);
Clear(NewCollection);
UpdateContext({AllItemsString: ""});
Navigate(
   NewForm,
   ScreenTransition.None
);

 

Now, let’s test the functionality,

1. Click on New button.
   
   
   
   
2. It will open the following form.
   
   
   
   
3. Fill WO and Title. To add the repeating section row, click on + icon.
   
   
   
   
4. Add 2 rows of repeating section and fill the information.
   
   
   
   
5. Click On save button.
   
   
   
   
6. This will save data in the list and it is populated in the Grid as well.
   
   

In the next article, we will retrieve the data in the edit form and update the form.

 

Conclusion

 

Hope you love this article!

 

Stay connected with me for the amazing articles.

 

Happy PowerApping!!