Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
News and Announcements icon
Power Platform Community / Gallery / Community App Samples / Power Apps Champs Trading C...

Power Apps Champs Trading Cards App - v1

12760 Views
AlanChai Profile Picture Posted by AlanChai 2

#PowerAppsChamp Trading Cards App - v1

 

This project started from a tutorial as I taught my 10 yo daughter how to make app in Power Apps. (https://twitter.com/alanchai/status/1199874832931917824?s=20) She wanted to learn by solving a real use case.  As she is into Harry Potter stuff, we worked on creating a trading apps for Harry Potter characters. After an hour of her lesson, this was her output: (https://twitter.com/alanchai/status/1199556678288658432?s=20)

 

I was building a similar example on the side as the lesson evolved. Since I have the full collection of Power Apps Champs cards, so I thought why not? This version consists of the full catalog of Power Apps Champs as of Dec 2019. You can add or remove a card from your collection within the App. 

 

The plan is to add object recognition using AI Builder in next version.

 

To install this app, follow this steps:

 

Download .msapp and data source files here

 

1. Download the three .stp files. These are the data source template for SharePoint lists.

  • CollectionEntities - this holds all the Champs details and images
  • CollectionGroups - this is just a list for tabs which I intend to expand further in the future to include things like Fav, Duplicates, etc.
  • CollectionMy - this is to hold cards that are marked as in collection.

 

2. Restore the .stp files into your SharePoint site as lists (3 lists).

  • Go to Site Settings > List Template Gallery > Upload the 3 .stp files into the gallery
  • Go to Site Contents > New > Apps > Select "CollectionEntities" and name the list. Repeat the same for CollectionGroups and CollectionMy

 

3. Download the .msapp file and import into your Power Apps environment. 

 

4. Edit the imported app and remap the data source to your SharePoint lists created in Step 2.

 

Slide1.jpeg

 

This app is intended to showcase the possibilities of using Power Apps outside business use cases, in a fun way to encourage kids (5th graders) and beyond to learn Power Apps. 

 

It is also to be used for easy reference of Power Apps Champs around the globe closer to you and to provide a bit of their background. 

 

The app is also a good demostration of how you can change the way you make app by thinking UX first, then build functionalities after. The outcome will be different. When I built this, it wasn't intended to go public, but as many were contacting me for a copy, so here you are. 

 

Anyone new to Power Apps, this is a good app to start dissecting and learn. It is simple enough to understand the how-to of an UI that works well and looks good too.

 

Enjoy the first version. 

 

Give me a like, thumbup or kudos if you find this app useful and have learned something from it. 

 

If you have any questions, please reach out on Twitter @AlanChai. Happy to assist.

Follow me on Twitter for more exciting apps. 

 

 

Power Apps Champs Trading Cards.jpg

 

 

 

 

 

Categories:

 Mobile App Design and User Experience

Comments

*This post is locked for comments

  • arkkgroup Profile Picture arkkgroup 140
    Posted at
    Power Apps Champs Trading Cards App - v1

    How do you show small selection on the right to select phone, tablet or browser?

     

    Thanks

  • Robin1988 Profile Picture Robin1988 249
    Posted at
    Power Apps Champs Trading Cards App - v1

    he? Grazy, how to fill the notch of the screen? Never seen before. Looks awsome!

  • Deusdedith Profile Picture Deusdedith
    Posted at
    Power Apps Champs Trading Cards App - v1

     Estou tentando fazer o passo numero 2 (restaurar arquivo .stp como listas no sharepoint), mas não consegui fazer

  • VineetCANZ Profile Picture VineetCANZ 15
    Posted at
    Power Apps Champs Trading Cards App - v1

    The app no longer covers the Full screen like in the video .... was the powerapps App changed so the app doesn’t fill the screen because of the notch on IPhone X +

  • TomKa Profile Picture TomKa 12
    Posted at
    Power Apps Champs Trading Cards App - v1

    I managed to get your example run in my German SharePoint Online. Thank you @AlanChai for this great example!!! I learned a lot!

  • AlanChai Profile Picture AlanChai 2
    Posted at
    Power Apps Champs Trading Cards App - v1

    Thanks to Tomislav Karafilov (twitter @TKarafilov) pointing out a few scenarios:

     

    1. When "List Template Gallery" is not visible, you can Mention that you can execute this two PowerShell SharePoint Online Commands: Connect-SPOService -Url https://<tenant>-admin.sharepoint.com Set-SPOSite https://<tenant>.sharepoint.com/sites/<site> -DenyAddAndCustomizePages 0 Now I have the option visible.

     

    2. The stp files are for language Code 1033. If you are Germany and have 1031. Renamed the stp to cab, opened the file, extracted the manifest.xml, changed the language setting to 1031, flushed the manifest file back with "makecab manifest.xml  CollectionEntities.cab" and uploaded the stp file as "CollectionEntities_de.stp". Now I see the templates and generated the lists.

     

    The makecab only added a single file.
     
    1. expandCollectionEntities.cab -f:* MyCab
     
    cd MyCab
     
    Change manifest.xml
     
    dir *.* /s /b /a-d > files.txt and remove the path in front of the files with Notepad++.
     
    makecab /d CabinetName1=CollectionEntities.cab /D DiskDirectoryTemplate=C:\temp /D MaxDiskSize=0 /f files.txt
     
    The file in C:\temp is the new CollectionEntitiensDe.cab
     
    New list is created, and with this magic all Attachments will show.