Run Power Apps from SharePoint List as Custom Cards using JSON Formatting

In this tutorial video on “Run Power Apps from SharePoint List as Custom Cards using JSON Formatting”, we will walk through on how to apply simple SharePoint List or Microsoft Lists based JSON formatting to launch PowerApps as Custom cards on hover or on click of list column.

The Custom Cards will launch the Power App directly within the SharePoint List or Library View experience itself, run on Modern SharePoint Pages, allow us to use the Print feature of Power Apps using the print() function to print the SharePoint list form, save form as PDF & more.

The JSON formatting for Custom cards on hover allows us to showcase file previews which works on all Office files, PDFs, Images in document libraries, works to showcase Pages as custom card & also works with Power Apps.
All we need is the URL to the web link for our Power App.

This technique works with both Standalone Power Apps & SharePoint List form customized Power Apps.

Video showcases the following:
✅ SharePoint List Form Customization Options with Power Apps
✅ Standalone Power Apps Vs SharePoint List Forms customized with PowerApps
✅ SharePoint List Formatting Options
✅ Custom Cards on Hover formatting for SharePoint List
✅ Run a Power App as a Custom card from SharePoint List or Library
✅ Dynamically pass params to custom card and deep link into PowerApps screen
✅ Custom Cards can open files, Pages & Power Apps.
✅ Print & Save SharePoint forms as PDF using Power Apps launched as custom cards.

JSON formatting sample for Power Apps as Custom Hover Card
https://github.com/rdorrani/SharePoint/tree/master/ViewByCard

Power Apps in SharePoint Pages | Power Apps List Connected Web Parts
https://www.youtube.com/watch?v=hB0xdoQuO1g

JSON formatting for generic file view card
https://github.com/tecchan1107/sp-dev-list-formatting/tree/generic-card-page-view/column-samples/generic-file-view-card

My SharePoint List Formatting Playlist:
https://www.youtube.com/playlist?list=PLTyFh-qDKAiE7C_2lVNAPzgHXsBykG0Tf

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

SharePoint Column or View Formatting – Custom Cards on Hover:
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-advanced#custom-cards-on-hover

filepreview formatting syntax:
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference#filepreview

Thanks to🙏:

Tetsuya Kawahara (https://twitter.com/techan_k) for providing the inspiration for this video:
https://twitter.com/techan_k/status/1527454151961362432?s=20&t=vR9cnmbQwr8OwzuDS5WfkA

Hubert Lam (https://twitter.com/z3019494) as well for sharing the custom cards info on twitter

#PowerApps #SharePoint #ListFormatting​ #JSONFormatting

Table of Contents:
00:00 – Introduction
00:42 – Integrate Power Apps with SharePoint
01:07 – Standalone Power App from SharePoint List
01:31 – SharePoint List Forms customized with Power Apps
02:21 – Run Power Apps from SharePoint (List/Library Views, Pages) with SharePoint List formatting help
02:54 – Custom Cards SharePoint column formatting JSON
03:12 – Open documents as custom cards in SharePoint Document Library
04:44 – Run Modern SharePoint Page as Custom Card
05:17 – Launch Power App from List View as Custom Hover Card
08:00 – Power Apps as Custom Card on SharePoint Modern Page
08:20 – Power Apps as Custom Card in SharePoint Document Library
09:03 – Launch Power Apps as Custom Card for SharePoint List Forms Customized with Power Apps
09:43 – Print in Power Apps Customized List Forms
10:42 – Links to JSON SharePoint Column Formatting Samples
10:52 – Subscribe to Reza Dorrani channel

🤝 Let’s connect on social:
🔗 Reza Dorrani LinkedIn: https://www.linkedin.com/in/rezadorrani/
🐦 Reza Dorrani Twitter: https://twitter.com/rezadorrani