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

Run Power Apps from SharePoint List as Custom Cards using JSON Formatting Hello everyone reza here in this video i will show you how to launch a power app as a custom card on hover or click of a column in a sharepoint list by leveraging json based column formatting.

This power app can receive contextual information about the selected list item so we can deep link into specific screens in the app this feature runs on modern sharepoint.

Pages allows us to leverage the print feature in powerapps and a lot more so let's check it out in action modern sharepoint lists and libraries.

We have the ability to integrate them with power apps to create a power app in the ribbon if i head over to integrate and power apps.

The two key options here are creating an app and customizing forms using powerapps if i create an app leveraging this list it will create a simple three screen.

Power app that will allow the users to create edit and view data the advantage of this power app is it is available as a standalone app so i can run this using the powerapps.

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

Mobile app and these apps will be available in make.powerapps.com so i can simply select it and play the app on the other side we have the ability to.

Customize purely the sharepoint form experience for the specific list by leveraging power apps here i have a sharepoint list the form for which is customized leveraging power.

Apps so if i click on new it will launch the power app in a panel on the right hand side directly inside the context of the sharepoint list itself.

If i select an existing record and click view or edit it will open up the form experience for me once again contextually aware of the item that i selected.

Advantage of this type of power apps is it directly runs inside the context of the sharepoint list itself but these apps are not available on the powerapps mobile app.

And there are various scenarios in which you would want to launch your power app directly from within the sharepoint context itself one of the features for modern.

Posts Related:

    Sharepoint is the ability to apply json

    Formatting to customize your list experiences you can apply these formatting options to columns views and form experiences.

    I've done videos on sharepoint formatting the links are in the description for this video so do check it out one of the sharepoint column formatting.

    Options is the ability to have custom cards on hover or click of a specific column and as part of this custom card props json syntax one of the element types is.

    A file preview i have a modern sharepoint document library to leverage that custom card property feature.

    I will add a column of single line of text and i will call this view card i'll click save i'll bring this column right.

    In this position for this column if i head over to the formatting option and go to advanced mode and plug in the following json sample.

    It will create a div which would be called view by card and i'm leveraging the custom card props feature if i click on it it will open up a.

    Custom card that will showcase a file preview i'll go ahead and save this here is my experience now in the document library with the column.

    Formatting applied if i click on view by card it will give me a preview of that specific file in this case it's a video file so it's.

    Actually playing the video right in line

    In this custom card experience if i was to open a pdf document it will showcase a full experience of that pdf document.

    Along with that i also get a lot of other properties like printing this pdf document or resaving this document and this feature works for any office.

    Files pdfs videos gifs images and more this same experience also works for the.

    Pages library once again i have my column that is formatted by using the custom card props this time though i will open up the card on an event known as hover so as i hover.

    Over this it will launch the card if i hover over this it will actually launch the full sharepoint page experience so with this as a reference.

    I try to see if it is possible to launch a power app leveraging that same card experience and here is that feature in action if i hover over my column.

    It will launch my power app and i was also able to pass contextual information about the specific item to my power app if i hover over the oil spill item it.

    Launches my power app and takes me directly to that item this is a fully functional power app so i'm able to edit this make modifications to this and submit.

    Go to any other screen and more for the formatting related to launching a power app all i need is a url to play my power app and i also passed a parameter to it which is the id of the.

    Current item the reason i need to pass the id is because when the powerapp opens i wanted to show the specific record and to do that i had to perform deep linking.

    I recently did a video wherein i showcase how you can create connected web parts in modern sharepoint pages wherein if i pick a specific list item it will open a powerapp as a connected.

    Web part and show data related to that specific item and here as well i use the concept of deep linking to get the source for my power app.

    In make.powerapps.com here is my standalone power app i will head over to three ellipses and details.

    And here is the full web link to launch my power app so i simply copied this link and pasted it right here on the source attribute.

    And then i passed a parameter to it which is id wherein i am passing the id of the current item in my power app the first action which.

    Is on start of my power app i have read that parameter value which is the parameter id and i've gone ahead and performed a lookup to my specific item and i have.

    Stored that information in a variable for the start screen property of my app if that parameter is not blank take the user directly to the details screen which will show the details of that list.

    Item and for the form control on this screen the item property is that variable that i am setting on start of my power app.

    So that's how it is deep linking directly to the specific screen if i simply add the list view web part on a modern sharepoint page that column formatting and the custom.

    Card behavior still works so if i hover over this it will launch my power app right here in context of the modern sharepoint page the same experience will also work for.

    Modern document libraries if i click on apps card it will launch my power app you have full control over the width and height of the card experience that opens up.

    Plus if my screen size was to change and if i was to try and launch the app it is smart enough to know that there is not enough real estate to fit it so it will.

    Try and launch it in a different section the same experience is true for a scenario where my powerapps was designed keeping the mobile experience in mind we can also leverage the same custom.

    Card option for sharepoint list forms that are customized with powerapps here if i click on new it opens up the powerapp form in the right hand side panel.

    I also have the custom card feature here's my power app related to that same customized sharepoint list form once again all i needed is the url to my powerapp.

    And passed the id parameter so i could leverage it to showcase that specific item that has been selected one of the limitations of sharepoint customized list forms.

    Is the ability to use the print feature in powerapps if you try and leverage the print function it is currently not supported for sharepoint customized list forms.

    But in this card based experience because this card is launching the play version of my power app the print functionality comes alive if i go ahead and print.

    It will launch the print dialog plus with the printing feature you also have the ability to save it as a pdf all the json formatting that i showcased.

    DISCLAIMER: In this description contains affiliate links, which means that if you click on one of the product links, I'll receive a small commission. This helps support the channel and allows us to continuetomake videos like this. All Content Responsibility lies with the Channel Producer. For Download, see The Author's channel. The content of this Post was transcribed from the Channel: https://www.youtube.com/watch?v=-fcfEQTSWx0
Previous Post Next Post