Power Apps Champs Trading Cards App - v1 11-30-2019 16:40 PM - last edited 12-02-2019 21:41 PM

[AlanChai]

#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.

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. 

watch?v=gwRwcvEKC-Q

[AlanChai]

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.

[TomKa]

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

[VineetCANZ]

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 +