Skip to content
PowerLibs LogoPowerLibs

Gallery Components for Power Apps

The Gallery category holds two kinds of component. Five are built on a Power Apps gallery control and show rows of records: a row list with avatars, a grid of cards, a list of cards, and a data table in a plain and a sortable version. Each pastes as one container that fills the screen with a 40 px margin and comes in classic and modern controls. The two carousels are driven by a hidden Timer: a feature spotlight card and a slim announcement bar for a home screen. Reach for the galleries when you have rows from a SharePoint list or Dataverse table to show, and for the carousels when you have a few short messages to rotate.

Pick a variant

ComponentPlanYAMLWhat it is forSettings you can change
Card ListPaidClassic, ModernProjects or requests on a dashboard, one card per record with status, priority and due dateParts (title and count, search, owner line, status pill, priority pill, due date); Title; Sample rows with Title, Owner, Status, Priority and Due
Data TablePaidClassic, ModernRows and columns that fill the screen, with search, an action per row and pagingParts (title, Add button, search, sort, action per row, page footer); Title; Add and action button text; Rows per page; Columns with a width share each; Sample rows
Sortable Data TablePaidClassic, ModernThe same table when users need to sort by clicking a column headerThe same as Data Table, with sort on by default
Gallery CarouselPaidClassicA feature spotlight that advances on its own, with dots, chevrons and a pause toggleSeconds per slide; Slides (up to 8) with Slide title, Slide description and an accent colour each
Announcement Bar CarouselPaidClassicA full-width bar cycling short internal announcements with a category chip and counterSeconds per announcement; Announcements (up to 8) with a category chip, message and category colour each
List GalleryPaidClassic, ModernPeople, contacts, tickets: one row per record with initials, two lines of text and a statusParts (title and count, search, avatar, status pill, chevron); Title; Sample rows with Name, Line under it and Status
Card GridPaidClassic, ModernA home screen of workspaces or modules, tiles that reflow from three columns to oneParts (title and count, icon tile, status pill, chevron); Title; Sample rows with Icon, Title, Line under it and Status

Paid means a Components, Ultra, Team or Lifetime plan (pricing). Classic and Modern are the two Power Apps control sets you can pick from the Copy YAML button. Open the category in the library: Gallery.

To copy a variant into Power Apps Studio, follow Getting Started. Every component in this category is paid, so Copy YAML needs a Components, Ultra, Team or Lifetime plan, and the Settings tab only accepts changes on Ultra, Team or Lifetime.

After you paste

Every gallery ships with the sample rows from Settings as a Table() in the Items property of its gallery control (galListRows, galGridCards, galCardListCards, galTableRows or galSortTableRows). Replace that Table(...) with your source. The row controls read fixed column names, so rename yours on the way in with AddColumns. For List Gallery, where Employees stands for your list:

Filter(
    AddColumns(Employees, name, Title, subtitle, Department, status, Status),
    txtListSearch.Text in name || txtListSearch.Text in subtitle
)

The tables read the column names typed in Settings, with spaces removed. Their Items is one formula in three steps, With({ src: ... }, With({ sorted: ... }, ...)): replace only the Table(...) inside src, and the search, sort and paging keep working around it. The same Table(...) sits once more in a hidden label, lblTableTotal, which counts the rows for the page footer; replace it there too.

Tapping a row selects it in the gallery and sets a global variable to the record: gblListRow, gblGridRow, gblCardListRow, gblTableRow or gblSortTableRow. A detail screen reads that variable, or galListRows.Selected. The Instructions tab of each component shows the Navigate to add to the row button.

The carousels are steered by global variables, so a button of your own can jump to a slide and freeze the rotation. In that button's OnSelect:

Set(varCarouselIndex, 2);
Set(varCarouselPaused, true)

The Announcement Bar Carousel uses varAnnouncementIndex and varAnnouncementPaused in the same way.

Good to know

  • In the Modern YAML the text input has no Text property: read what was typed with .Value where the formulas above say .Text.
  • Status words color themselves: Active, Done, Approved are green; Pending, Away, In Progress are amber; Blocked, Overdue, Rejected are red; anything else takes the brand color. The word lists are in each pill's Color formula. In the tables this applies to a column named Status.
  • Sorting uses gblTableSort and gblTableAsc (or the SortTable versions). Each header button sets the sort to the column name without spaces, so those names must match your source's field names.
  • Paging keeps the page in gblTablePage and cuts the rows with FirstN(LastN(...)). The search box resets the page to 1 in its OnChange. Rows per page is a setting.
  • The Card Grid's columns come from the gallery's WrapCount, If(Parent.Width < 560, 1, If(Parent.Width < 900, 2, 3)). Change the numbers for more or fewer columns.
  • Gallery Carousel and Announcement Bar Carousel only move in play mode (press F5 in Studio), slides snap rather than glide, and there is no pause on hover. Speed is the Duration of the hidden timer, tmrGalleryCarousel or tmrAnnouncementBar, in milliseconds. Their text is baked into Switch() formulas when you copy; the Instructions tab shows how to drive them from a collection instead.

Related

Open the category at Gallery. For KPI tiles, charts and empty states see Data Display; for single-record layouts see Cards; for the frame around a gallery see App Shells.

Gallery Components for Power Apps | PowerLibs