cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Advocate II
Advocate II

Making a cascading text inputs

I was wondering if there was a way to do this:

 

When you select a text input, and start typing, another blank text input is generated below. when you begin typing in that newly generate text input, yet another text input is generated below that one.

 

Is this possible? To create dynamic forms, or cascading text input fields?

 

 

2 ACCEPTED SOLUTIONS

Accepted Solutions
Highlighted
Power Apps
Power Apps

Re: Making a cascading text inputs

The best way that I know is to add bunch of hidden text boxes, and switch the visibility of them to true once user starts to type in the above text box.

 

We don't have any way to generate controls dynamically at runtime.

View solution in original post

Highlighted
Community Champion
Community Champion

Re: Making a cascading text inputs

I ran some tests and found some interesting results. The text in a textinput control is tied to the record in the gallery. So Table1 has 100 records and each of those records will maintain its text in the TextInput control even after being filtered.

 

So if you add or remove a record, any text you have typed is unaffected because our scheme is more of a show/hide--this is welcome news.

 

To "remove" a textinput field, collect it to a temporary collection by setting the trashcan icon to:

If(CountRows(Gallery1.AllItems)>1,
    Collect(removed,ThisItem.Number)
)

This means, "As long as there is more than one TextInput field, it's okay to remove a given record." This is important because if you remove every record, you have no buttons left to add new ones.

 

Next, you will need to filter the Gallery more to account for the records removed:

Filter(Table1,Number<=cascade,!(Number exactin removed.Value))

This means, "Show a Number of TextInput controls less than or equal to the cascade variable, yet not including the Numbers you removed."

 

If you want to save the data you put into the TextInput controls, you will need to use ForAll(Gallery1.AllItems,[actions here]).

 

For UX, I recommend that you make the height of this gallery variable--let it adjust as more records are shown:

Gallery1.TemplatePadding*(CountRows(Gallery1.AllItems)+1)
+70*CountRows(Gallery1.AllItems)

Change 70 to whatever your TemplateSize is so that you get the exact spacing you want.

Microsoft Employee
@8bitclassroom

View solution in original post

5 REPLIES 5
Highlighted
Power Apps
Power Apps

Re: Making a cascading text inputs

The best way that I know is to add bunch of hidden text boxes, and switch the visibility of them to true once user starts to type in the above text box.

 

We don't have any way to generate controls dynamically at runtime.

View solution in original post

Highlighted
Advocate II
Advocate II

Re: Making a cascading text inputs

Yeah i was affraid that was going to be the only way to do it. Thanks for the response!

Highlighted
Community Champion
Community Champion

Re: Making a cascading text inputs

This can be done.

 

This is what I'm thinking:

  1. Create Table1 with numbers 1-100 in column Number. Save it and add it to PA as a static datasource.
  2. Change the OnVisible property of the screen to make a variable start at 1: 
    Set(cascade, 1)
  3. Insert a Gallery. Set its items to:
    Filter(Table1,Number<=cascade)
  4. Insert a TextInput control and set its OnSelect or OnChange property to:
    Set(cascade,cascade+1)
  5. You can wrap the formula within a condition where only the last record can add an additional row if it is not blank:
    If(ThisItem.Number=Last(Gallery1.AllItems).Number && !IsBlank(Last(Gallery1.AllItems).TextInput1.Text),
        Set(cascade,cascade+1)
    )
  6. Insert a trashcan icon into the Gallery and set its OnSelect property to:
    Set(cascade,cascade-1)
    That will allow you to remove unwanted rows. 
    Only make it visible if it is the last record or make a condition to only delete if it is the last record.
    If(ThisItem.Number=Last(Gallery1.AllItems).Number,
        Set(cascade,cascade-1)
    )
    Deleting is more complicated because each TextInput is tied to a number and the formula we have right now only subtracts 1 from the table. I would suggest the delete button collect the given Number to another collection and filter Table1 to not show the numbers from that table.

This scheme should populate an additional text input field each time the TextInput is selected or changed--your choice.

 

Let me know how it goes.

 

Edit: the deleting scheme is going to take some more thought--you might end up resetting your TextInput fields if you remove it the way things are right now.

Microsoft Employee
@8bitclassroom
Highlighted
Community Champion
Community Champion

Re: Making a cascading text inputs

I ran some tests and found some interesting results. The text in a textinput control is tied to the record in the gallery. So Table1 has 100 records and each of those records will maintain its text in the TextInput control even after being filtered.

 

So if you add or remove a record, any text you have typed is unaffected because our scheme is more of a show/hide--this is welcome news.

 

To "remove" a textinput field, collect it to a temporary collection by setting the trashcan icon to:

If(CountRows(Gallery1.AllItems)>1,
    Collect(removed,ThisItem.Number)
)

This means, "As long as there is more than one TextInput field, it's okay to remove a given record." This is important because if you remove every record, you have no buttons left to add new ones.

 

Next, you will need to filter the Gallery more to account for the records removed:

Filter(Table1,Number<=cascade,!(Number exactin removed.Value))

This means, "Show a Number of TextInput controls less than or equal to the cascade variable, yet not including the Numbers you removed."

 

If you want to save the data you put into the TextInput controls, you will need to use ForAll(Gallery1.AllItems,[actions here]).

 

For UX, I recommend that you make the height of this gallery variable--let it adjust as more records are shown:

Gallery1.TemplatePadding*(CountRows(Gallery1.AllItems)+1)
+70*CountRows(Gallery1.AllItems)

Change 70 to whatever your TemplateSize is so that you get the exact spacing you want.

Microsoft Employee
@8bitclassroom

View solution in original post

Highlighted
Advocate II
Advocate II

Re: Making a cascading text inputs

Hey Mr-dang, this seems like an awesome suggestion! I will have to dedicate some time to see if i can get this to work.

 

I see what you're saying though, and can't wait to give this a shot!

Helpful resources

Announcements
secondImage

New Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

August 2020 CYST Challenge

Check out the winners of the recent 'Can You Solve These?' community challenge!

Experience what’s next for Power Apps

Join us for an in-depth look at the new Power Apps features and capabilities at the free Microsoft Business Applications Launch Event.

Check this Out

Helpful information

Featuring samples like Return to the Workplace and Emergency Response Applications

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Users online (5,536)