Repeating section for a Form control

[Amik]

Introduction

Often there will be a need to create a Form with a repeating section and typically, this can be achieved with a Gallery control.

Suppose on the other the hand that your requirement is a bit simpler. Your data source has multiple number columns for example, and you want to hide/show those columns in a set order based on an “Add” button.

To illustrate, I have three number columns in my data source. I have named them “Whole Number Column One”, “Whole Number Column Two”, and “Whole Number Column Three”. If a user enters a value in Whole Number Column One, they should be provided with an an option to unhide Whole Number Column Two, and so on:

The below example uses 3 Data Cards, but the same pattern applies if you want to include additional Data Cards.

Set Up

1. Add a EditForm control into your Screen.

2. Insert your required fields as well as the fields you want to show/hide. Ensure they are appropriately ordered 

3. Unlock all DataCards

4. For the purposes of this example, rename the DataCardValues in each DataCard to “DataCardValue_one”, “DataCardValue_two”, “DataCardValue_three“ etc.

Get started

1. For Data Card 1, insert an Icon control (such as the Add icon).

2. On the OnSelect property of the Icon control, enter:

UpdateContext({ctx_ShowDataCard_Two: true})

3. On the Visible property of the Icon control, enter:

!ctx_ShowDataCard_Two && Len(DataCardValue_one.Text)>0  

4. Type into the data card value in the first data card to get the Add Icon control to become visible again.

5. On the Visible property of DataCard 2 (not the DataCardValue), enter:

ctx_ShowDataCard_Two

6. Insert another Add Icon control into Data Card 2.

7. On the OnSelect property of the Add Icon control, enter:

UpdateContext({ctx_ShowDataCard_Three: true})

8. On the Visible property of the Add Icon control, enter the below:

!ctx_ShowDataCard_Three && Len(DataCardValue_two.Text)>0

9. Type into the data card value for the second data card to get the Icon to become visible again.

10. Insert a Trash Icon control into DataCard 2.

11. On the OnSelect property of the Trash Icon control, enter:

UpdateContext({ctx_ShowDataCard_Two: false});
UpdateContext({ctx_ClearDataCard_Two: true});
Reset(DataCardValue_two)

12. On the Visible property of the Trash Icon control, enter:

!ctx_ShowDataCard_Three

13. On the Default property of Data Card 2 (not the DataCardValue), enter:

If(
    ctx_ClearDataCard_Two,
    "",
    ThisItem.'Whole Number Column Two'
)

Repeat for Data Card 3

1. Insert another Add Icon control into DataCard 3.

2. On the OnSelect property of the Icon control, enter:

UpdateContext({ctx_ShowDataCard_Four: true})

3. On the Visible property of the Icon control, enter:

!ctx_ShowDataCard_Three && Len(DataCardValue1.Text)>0

4. Insert another Trash Icon control into DataCard 3. 

5. On the OnSelect property of the Trash Icon control, enter:

UpdateContext({ctx_ShowDataCard_Three: false});
UpdateContext({ctx_ClearDataCard_Three: true});
Reset(DataCardValue_three)

6. On the Default property of Data Card 3, enter:

If(
    ctx_ClearDataCard_Three,
    "",
    ThisItem.'Whole Number Column Three'
)

7. On the Visible property of Trash Icon control inside Data Card 3 (the last DataCard we want to hide), ensure the property remains true.

8. On the Visible property of Data Card 3, enter:

ctx_ShowDataCard_Three

---------------------------------------------------------------------------------------------------------------------------------------------

Thank you.

If you liked this blog post, please give it a Thumbs Up.

Imran-Ami Khan