How to Increment Number in Power Apps Gallery?

by

Are you facing any difficulties in incrementing a number in the Power Apps gallery? No need to worry! This Power Apps tutorial will teach how to increment number in the Power Apps gallery with a simple example.

Increment Number in Power Apps Gallery

Here, we will discuss how to increment a Text Box number values into your Gallery when you click on the “Button” control.

For example, In Power Apps, there are some records in the gallery like Input Details-1, Input Details-2, Input Details-3, Input Details-4, Input Details-5, and so on. Next, When a user deletes one item from the gallery suppose Details-3, the next item will be replaced in the deleted item place.

Refer to the below gif to understand better.

Power Apps gallery increment numbers

To work around this example, follow the below steps. Such as:

1. Open Power Apps with your respective Microsoft credentials -> Create Power Apps Blank Canvas app -> Select Power Apps Screen -> Insert a Text input control, a Button input [Add] and set Its OnSelect property as:

OnSelect = Collect(
    InputCollection,
    {
        Name: "Input Details-" & CountRows(InputCollection) + 1,
        TextBoxValue: txt_IncrementValues
    }
)

Where,

  • InputCollection = Power Apps collection name
  • Name, TextBoxValue = Header of the collection
  • CountRows = This function helps to count the total number of items or records in a gallery control.
  • txt_IncrementValues = Text input control name
how to increment number in power apps gallery control

2. Next, insert the Gallery control and apply the collection on its Items property as:

Items = InputCollection
Power Apps gallery increment number

3. Then, within the gallery, insert a Trash icon to help delete the item. Apply the below code on the OnSelect property of the Trash icon:

OnSelect = Remove(
    InputCollection,
    ThisItem
);
Clear(colIncrementNumber);
ForAll(
    InputCollection,
    Collect(
        colIncrementNumber,
        {
            Name: "Details-" & CountRows(colIncrementNumber) + 1,
            TextBoxValue: txt_IncrementValues
        }
    )
);
ClearCollect(
    InputCollection,
    colIncrementNumber
)

Where,

  • InputCollection = Power Apps source collection name
  • colIncrementNumber = This is a new collection name
increment number in power apps gallery control

4. Once it is done, Save, Publish, and Preview the app. When a user adds any value from the text input control and clicks on the button control, it will increment the number in the gallery control as in the below screenshot.

how to increment number in power apps gallery

This is how to work with the increment number in the Power Apps gallery.

Conclusion

From this Power Apps tutorial, we learned in detail information about how to increment a number in the Power Apps gallery with a simple example.

You may like:

>