Skip to content

How to submit a Power App sample

Jump to bottom
Daniel Laskewitz edited this page Feb 25, 2023 · 11 revisions

This post will guide you through how we can best accept your sample contribution for the Power Apps gallery.

Why

To make your app reusable, so that more people can benefit from it, we want to share the source code files. To be able to get the source files, you will need to use the Power Platform CLI to extract all files from the solution.

By using solutions, you have the ability to add multiple components to your solution. You don't have to only have a Power App, but you can also combine it with a dataverse table or a cloud flow.

Prerequisites

To unpack the source code for your solution, you will need to use the Power Platform CLI. The easiest way install the Power Platform CLI, is by installing the Power Platform Tools for Visual Studio Code. This means you will also have to install Visual Studio Code.

Clone the solution

  • Open up Visual Studio Code

  • Open a terminal by going to Terminal > New Terminal or by using ctrl + backtick

  • Create a new auth profile by using the the pac auth create command (Link) or by using the Power Platform Tools pane in Visual Studio Code (that's the Power Apps icon in the activity bar that's on the left of in Visual Studio Code)

  • Make sure that you are connected to the right environment by using the pac org who command. This will show you to which environment you are connected. If you are not connected to the right environment, you can switch by using the pac org select command (link)

  • To clone the solution we need the internal name of the solution. If you don't know it by heart, you can list all the solutions in the environment by using the pac solution list command (link)

  • Cloning can be done by using the pac solution clone command (link), type the following command in the terminal:

    pac solution clone --name InternalSolutionName --outputDirectory sourcecode --processCanvasApps

    Making sure to replace InternalSolutionName to the internal solution name. Be sure to wrap values that have spaces!

    The --processCanvasApps is used to unpack the canvas apps that might be in your solution.

Please note that you will now find all source code files in that new folder. You can open the folder in Visual Studio Code.

Create the folder structure

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 contain a lot of folders that will include your solution components. For example, you will be able to find your unpacked canvas app here when you have that in your solution.

NOTE: When merging the pull request, we'll pack the source code and generate a solution .zip file. We'll place it in the solution folder.

Adding screenshots

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")

Adding a README.md

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://github.com/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)

Submit as a sample

Well done! Now you can submit these source code files as a sample. Please, use the following steps:

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 💖

Clone this wiki locally