Instruction file imported from rvahitov/ResearcheBible (.github/instructions/pcf-sample-components.instructions.md). Copyright stays with the author.

How to Use the Sample Components

All the sample components listed under this section are available to download from github.com/microsoft/PowerApps-Samples/tree/master/component-framework so that you can try them out in your model-driven or canvas apps.

The individual sample component topics under this section provide you an overview of the sample component, its visual appearance, and a link to the complete sample component.

Before You Can Try the Sample Components

To try the sample components, you must first:

• Download or clone this repository github.com/microsoft/PowerApps-Samples.
• Install Install Power Platform CLI for Windows.

Try the Sample Components

Follow the steps in the README.md to generate solutions containing the controls so you can import and try the sample components in your model-driven or canvas app.

How to Run the Sample Components

Use the following steps to import and try the sample components in your model-driven or canvas app.

Step-by-Step Process

1. Download or clone the repository

   • Download or clone github.com/microsoft/PowerApps-Samples.

2. Open Developer Command Prompt

   • Open a Developer Command Prompt for Visual Studio and navigate to the component-framework folder.
   • On Windows, you can type developer command prompt in Start to open a developer command prompt.

3. Install dependencies

   • Navigate to the component you want to try, for example IncrementControl, and run:

   npm install

4. Restore project

   • After the command has completed, run:

   msbuild /t:restore

5. Create solution folder

   • Create a new folder inside the sample component folder:

   mkdir IncrementControlSolution

6. Navigate to solution folder

   cd IncrementControlSolution

7. Initialize solution

   • Inside the folder you created, run the pac solution init command:

   pac solution init --publisher-name powerapps_samples --publisher-prefix sample

   Note: This command creates a new file named IncrementControlSolution.cdsproj in the folder.

8. Add component reference

   • Run the pac solution add-reference command with the path set to the location of the .pcfproj file:

   pac solution add-reference --path ../../IncrementControl

   or

   pac solution add-reference --path ../../IncrementControl/IncrementControl.pcfproj

   Important: Reference the folder that contains the .pcfproj file for the control you want to add.

9. Build the solution

   • To generate a zip file from your solution project, run the following three commands:

   msbuild /t:restore
   msbuild /t:rebuild /restore /p:Configuration=Release
   msbuild

   • The generated solution zip file becomes in the IncrementControlSolution\bin\debug folder.

10. Import the solution

    • Now that you have the zip file, you have two options:
      • Manually import the solution into your environment using make.powerapps.com.
      • Alternatively, to import the solution using Power Apps CLI commands, see the Connecting to your environment and Deployment sections.

11. Add components to apps

    • Finally, to add code components to your model-driven and canvas apps, see:
      • Add components to model-driven apps
      • Add components to canvas apps

Available Sample Components

The repository contains numerous sample components including:

• AngularJSFlipControl
• CanvasGridControl
• ChoicesPickerControl
• ChoicesPickerReactControl
• CodeInterpreterControl
• ControlStateAPI
• DataSetGrid
• DeviceApiControl
• FacepileReactControl
• FluentThemingAPIControl
• FormattingAPIControl
• IFrameControl
• ImageUploadControl
• IncrementControl
• LinearInputControl
• LocalizationAPIControl
• LookupSimpleControl
• MapControl
• ModelDrivenGridControl
• MultiSelectOptionSetControl
• NavigationAPIControl
• ObjectOutputControl
• PowerAppsGridCustomizerControl
• PropertySetTableControl
• ReactStandardControl
• TableControl
• TableGrid
• WebAPIControl

Each sample demonstrates different aspects of the Power Apps component framework and can serve as a learning resource or starting point for your own components.