-
Notifications
You must be signed in to change notification settings - Fork 318
How to submit a Power App sample
This post will guide you through how we can best accept your sample contribution for the Power Apps gallery.
To make your app reusable, so that more people can benefit from it, we want to share the source code files. Unfortunately, when you save your Canvas App from Power Apps Studio, it is saved in one opaque .msapp file. To be able to get the source files, you will need to use the Power Apps CLI to extract all files from the .msapp
file. This way,
- developers can not only open the source code in their code editor of choice but can effectively manage the code of a Canvas app in GitHub or Azure DevOps. This makes a huge difference as we can't look into .msapp files.
- makers can still open the
.msapp
file to easily import an app sample into their environment
To unpack the source code for your .msapp
file, you will need to use the Power Apps CLI
- Go to make.powerapps.com
- Log in
- Open your app in edit mode
- Select File
- Select Save as
- Select This Computer
- Select Download
- Move the downloaded
.msapp
file to your folder in which you extracted the PowerApps Language Toolkit as well.
Now that we have the .msapp
file of the app:
- Use the WINDOWS key on your keyboard and search for Command Prompt (the first few letters should do)
- Using the command prompt, enter
cd <path to the sample>
- Copy the path of the
.msapp
file - Create a new folder in your app folder
- Using the command prompt, type:
Making sure to replace
pac canvas pack --sources pathtosourcefolder --msapp pathtomsapp
pathtosourcefolder
to point to the folder where you want to extract the source, andpathtomsapp
to point to the path of the.msapp
file
Please note that you will now find all source code files in that new folder. You can open the folder in a code editor of your choice, for example, Visual Studio Code.
Create a folder matching the name of your sample under the samples
folder.
The sample folder should contain the following folder structure:
-
assets - where you'll put the screenshots for your sample.
We'll also add a
sample.json
which will contain the metadata for the samples gallery -- but don't worry about creating it, we'll take care of it. -
sourcecode - this is where you'll put the unpacked source code. It will most likely contain the following folder structure (which may change, depending on the version of the tool)
-
\src - the control and component files. This contains the sources.
- *.pa.yaml - the formulas extracted from the control.json file. This is the place to edit your formulas.-
- CanvasManifest.json - a manifest file. This contains what is normally in the header, properties, and
publishInfo
. - *.json - the raw control.json file.
- \EditorState*.editorstate.json - cached information for Studio to use.
- \DataSources - all data sources used by the app.
- \Connections - connection instances saved with this app and used when reloading into studio.
- \Assets - media files embedded in the app.
- \pkgs - A downloaded copy of external references, such as templates, API Definition files, and component libraries. These are similar to nuget/npm references.
-
\other - all miscellaneous files needed to recreate the .msapp
- entropy.json - volatile elements (like timestamps) are extracted to this file. This helps reduce noisy diffs in other files while ensuring that we can still round trip.
- Holds other files from the
.msapp
, such as what is in\references
-
\src - the control and component files. This contains the sources.
NOTE: When merging the pull request, we'll pack the source code and generate a
.msapp
file. We'll place it in the solution folder.
People should be able to tell how awesome your sample is without having to download it and install it.
That's why we use screenshots.
Please provide at least one high-quality screenshot of your Power App and place it in your sample folder's assets
folder . If possible, use a resolution of 1920x1080 -- or an aspect ratio of 16:9. You can add as many screen shots as you'd like to help users understand your sample without having to download it and install it.
If you feel fancy, you can even add an animated .gif
so that people can see your sample in action (as long as you promise to pronounce it "gif", not "jif")
Each sample must have a README.md
which will help people understand how cool your sample is and how to use it.
Copy the README.md
template from https:/pnp/powerapps-samples/blob/main/samples/README-template.md and save it in the root of your sample folder as README.md
.
Take the time to fill the template to the best of your ability. You spent your time building an awesome sample, you should definitely take a moment more to explain why it is awesome!
Make sure to include the screenshots you created in the README.md
file. You should be able to insert screenshots by using the following syntax:
![Describe the image](./assets/yourfilename.png)
Well done! Now you can submit these source code files as a sample. Please, use the following steps:
- Fork the PnP PowerApps repository
- commit your files
- Pull Request using by filling out the PR template
If this all sounds confusing to you and you are new on GitHub - you are more than welcome to attend the Sharing Is Caring sessions, where we guide you through using GitHub and making your first PR.
Sharing Is Caring 💖