VIDEO – PowerApps – Super Gallery

Working with Gallery control in PowerApps can be a limiting way to navigate records.   Many PowerApps include multiple screens with dedicated Gallery screens for navigation.   Helping users locate records (sort, filter, scroll, and search) would be better accomplished with SharePoint Views.   SharePoint List Views are more mature with full features for ad-hoc sort, filter, search and ability to save query (shared/personal) and provide hyperlinks to view ASPX pages.

Why not use SharePoint Views instead of Gallery control?

Turns out we can.   On SharePoint modern pages:

1. Create new custom column with simple formula “=[ID]”
2. Apply JSON custom formatting to generate link <A HREF=”…power app URL..ID=1”> which opens PowerApps, giving ID number for a single record to Edit
3. Share View URL with end users to navigate records (sort/filter/search/paging)

This gives a robust and familiar navigation experience.  Use PowerApps for it’s strength (input validation) and use SharePoint list for it’s strength (navigate records).  Cheers. 

Video

PowerApps – Super Gallery from Jeff Jones on Vimeo.

Screenshots

References

• https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Code – GitHub Repo

• https://github.com/spjeff/powerapps/tree/master/supergallery

Code – SuperGallery-Modern-VIEW-FORM-column

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "a",
      "style": {
        "color": "white",
        "display": "inline-block",
        "padding": "4px",
        "background-color": "purple"
      },
      "attributes": {
        "target": "_blank",
        "href": "='https://apps.powerapps.com/play/015ba39a-db14-4d5f-80a9-c23881784383?tenantId=19e61d8c-a318-488b-8d4e-33bc232b3530&source=portal&screenColor=rgba(0%2C%20176%2C%20240%2C%201)&ID=' + [$ID]"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "VIEW FORM"
        }
      ]
    }
  ]
}