Add input text field dynamically in Power App

This blog is about how to “create” or “add multiple input text field dynamically” for item gallery without writing any code or without using any scripting language.

You can create multiple fields dynamically using of its own functions and some of your logic.

So let’s start:-I am assuming that you have to created multiple text box for each month for a given period of time, along with start and end date.

You need to first create a canvas app in power apps and add “Gallery” by selecting from gallery template.

Add Gallery

Now create some collection with some data using power apps function and write in a “onStart “section by clicking on App Start component. you can use your own data from any data source like SQL or CDS entities.

Clear(MonthBase); Clear(MonthSortBase);
ClearCollect(userItem,Table( {Id:1,User:”User1″,StartDate:”1/8/2019″,EndDate:”31/12/2019″},
{Id:1,User:”User2″,StartDate:”1/1/2020″,EndDate:”31/5/2020″},
{Id:1,User:”User3″,StartDate:”1/4/2020″,EndDate:”24/11/2020″}));
ForAll( Calendar.MonthsLong(), Collect(MonthBase, {MonthID:Max(MonthBase,MonthID)+1 , month:Value}));
ForAll( Calendar.MonthsShort(), Collect(MonthSortBase, {MonthID:Max(MonthSortBase,MonthID)+1 , month:Value}));

Now add “userItem” collection on Item to show data in the gallery.

Add useritem
Useritem

Then add an another gallery inside the gallery with one text filed.

Nested Gallery

Now write your logic on “OnVisible” Section by clicking on screen component for showing an input text field for multiple time.


Clear(MonthTarget);
Clear(UserDataCollect);
ForAll(
userItem,
Collect(
UserDataCollect,
{
userId: userItem[@Id],
StartDate: userItem[@StartDate],
EndDate: userItem[@EndDate],
DateDiff: DateDiff(
DateValue(userItem[@StartDate]),
DateValue(userItem[@EndDate]),
Months
) + 1
}
)
);
ClearCollect(
colInner,
MonthBase
);
UpdateContext({vOuterMax: CountRows(MonthBase)});
ForAll( UserDataCollect,
ForAll( MonthBase,
ForAll( colInner,
Collect( MonthTarget,
{
UserId: UserDataCollect[@userId],
RowId: colInner[@MonthID] + (vOuterMax * (MonthBase[@MonthID] – 1)),
monthId: If (
Month(DateValue(UserDataCollect[@StartDate])) + ((colInner[@MonthID] – 1)) <= 12,
Month(DateValue(UserDataCollect[@StartDate])) + ((colInner[@MonthID] – 1)),
Month(DateValue(UserDataCollect[@StartDate])) + ((colInner[@MonthID] – 1) – (12)) ),
monthName: If(
Month(DateValue(UserDataCollect[@StartDate])) + ((colInner[@MonthID] – 1)) <= 12,
LookUp( MonthBase, MonthID = Month(DateValue(UserDataCollect[@StartDate])) + ((colInner[@MonthID] – 1)), month ),
LookUp( MonthBase, MonthID = Month(DateValue(UserDataCollect[@StartDate])) + ((colInner[@MonthID] – 1) – (12)),month)),
year: If( (Month(DateValue(UserDataCollect[@StartDate])) + ((colInner[@MonthID] – 1)) <= 12), If( Max( MonthTarget,year) >= Year(DateValue(UserDataCollect[@StartDate])),
Max(MonthTarget,year),Year(DateValue(UserDataCollect[@StartDate]))),
If(Month(DateValue(UserDataCollect[@StartDate])) + ((colInner[@MonthID] – 1) – (12)) < 2, Max(MonthTarget,year) + 1,Max(MonthTarget,year))) } ) ) ); RemoveIf( MonthTarget, RowId > (DateDiff(
DateValue(UserDataCollect[@StartDate]),
DateValue(UserDataCollect[@EndDate]),
Months
) + 1)
);

)

Then add collection name on nested gallery items to show the month field which are stored in the collection.

Add month item
Month Item

Save the app and click on run icon. You will see different text box for months.

Multiple-textbox

You can create any type of field dynamically like this without drag and drop or without writing scripting code, Just create a logic and build it for your app.