How to use the sample components?

All the sample components listed under this section are available to download from here 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, it's visual appearance, manifest, code, and resources for the sample component.

Before you can try the sample components

To try the sample components, you must first:

Try the sample components

Follow the steps below to import and try the sample components in your model-driven or canvas app:

  1. Navigate to the folder on your computer where you have downloaded the sample components, and extract the .zip file.

  2. Open Developer Command Prompt for Visual Studio 2017 or higher and navigate to the sample component folder in the extracted folder that you want to see it in runtime. For example, navigate to the /extracted_folder/TS_IncrementComponent folder.

    Note

    You need to go into the specific component folder if you wish to see that particular component in runtime. You can add multiple components into a single solution file during the build process.

  3. Run the following command to get all the required dependencies:

    npm install
    
  4. Create a new folder using the command mkdir <folder name> inside the sample component folder that has the pcfproj file and navigate into the folder using the command cd <folder name>.

  5. Create a new solution project inside the folder using the following command:

    pac solution init --publisher-name <Name of the publisher> --publisher-prefix <Publisher prefix>
    
  6. After the new solution project is created, refer to the location where the sample component is located. You can add the reference using the following command:

    pac solution add-reference --path <Path to the root of the sample component>
    
  7. To generate a zip file from your solution project, you need to cd into your solution project directory and build the project using the following command:

    msbuild /t:restore
    
  8. Again, run the command msbuild.

  9. The generated solution zip file will be available at Solution\bin\debug folder. Manually import the solution into your Common Data Service environment using the web portal once the zip file is ready. Alternatively, to import the solution using Power Apps CLI commands, see the Connecting to your environment and Deployment sections.

  10. Finally, to add code components to your model-driven and canvas apps, see Add components to model-driven apps and Add components to canvas apps.