Initialising the component

To add a component to your webpage, you can copy the following code and edit it as per your component:

{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}

For instance, to include the component (with default) created in this you would use the following code:

{% include 'alertscomponent' %}

Defining the component

The liquid code of your “alertscomponent” component will be as follows:

<div id="{{ _id | default: 'dvAlertInfo' }}" class="alert {{ _class | default: 'alert-info' }}" role="alert">
  {{ _content | default: 'Default info alert content.'}}
</div>
{% manifest %} 
    { 
    "type": "Functional", 
    "displayName": "Alerts Component", 
    "description": "This returns the alerts html based on the class and the content", 
    "tables": ["alerts"], <!--This component can be updated based on the table schema you would like to use in current environment.-->
    "params": [{ 
        "id": "_id", 
        "displayName": "Alert id", 
        "description": "Element id of the alert div" 
        },{ 
        "id": "_class", 
        "displayName": "Alert class", 
        "description": "Alert type class of the alert div" 
        },{ 
        "id": "_content", 
        "displayName": "Alert content", 
        "description": "Content of the alert div" 
        }] 
    } 
{% endmanifest %}

In the dynamics environment, you’ll be creating the component with following attribute:

Including in web page template

The component created is reusable and can be initialised at multiple occurances. Since, it is a parameterised component it’s behaviour may vary depending upon the parameters provided upon each instance as shown below:

<!-- This should display the default alerts component -->
{% include 'alertscomponent' %}

<!-- This should display the success alerts component with custom success message -->
{% include 'alertscomponent' _id: 'dvAlertSuccess' _class: 'alert-success' _content: 'This is the success content.' %}

<!-- This should display the danger alerts component with custom danger message -->
{% include 'alertscomponent' _id: 'dvAlertDanger' _class: 'alert-danger' _content: 'This is the danger content.' %}

<!-- This should display the warning alerts component with custom warning message -->
{% include 'alertscomponent' _id: 'dvAlertWarning' _class: 'alert-warning' _content: 'This is the warning content.' %}

Output

The output of the following page should as follows:

The post Power Pages – Web templates as components appeared first on Dev Beard Guy.

Power Apps Component Framework (PCF) empowers developers to build custom controls that seamlessly integrate with Microsoft Power Apps, Dynamics 365, and other Power Platform applications. These controls enhance user experiences by providing tailored functionalities and visual elements. In this blog, we will guide you through the process of creating and setting up a PCF control using Visual Studio 2019, Microsoft’s powerful integrated development environment (IDE). Let’s dive in!

What is PCF (Power Apps Component Framework)?

The Power Apps Component Framework (PCF) allows developers to create custom controls using modern web development technologies such as HTML, CSS, and TypeScript. These controls can be directly used within canvas apps, model-driven apps, and Dynamics 365 forms. By leveraging PCF, developers can extend the native capabilities of Power Apps and tailor solutions to meet specific business needs effectively.

Prerequisites:

Before we begin, ensure you have the following prerequisites installed on your machine:

1. Visual Studio 2019: You can download the latest version of Visual Studio 2019 from the official Microsoft website.
2. Node.js: PCF development requires Node.js to manage dependencies and build processes. Download and install the latest version from the Node.js website.
3. PCF CLI: Install the Power Apps CLI (PCF CLI) using npm, which comes with Node.js. Open your terminal or command prompt and run the following command:

npm install -g powerapps-cli

Creating a PCF Project in Visual Studio 2019:

Step 1: Launch Visual Studio 2019

Open Visual Studio 2019 and click on “Create a new project.”

Step 2: Select “PCF Control Library”

In the search bar, type “PCF” to filter the project templates. Select “PCF Control Library” from the list of project templates.

Step 3: Provide Project Details

Enter the project name and choose a location where the project files will be stored. Click “Create” to proceed.

Step 4: Configure the PCF Control

Visual Studio will prompt you to configure the PCF control. Provide the required details, such as the control name, namespace, and version.

Step 5: Writing Code for PCF Control

Visual Studio will generate the necessary files for your PCF control project. You’ll find TypeScript files, manifest files, and other related resources.

The primary code file is the TypeScript file (index.ts) that represents the logic and behavior of your control. You can use HTML and CSS files to define the control’s visual aspects.

Step 6: Build the PCF Control

Once you’ve written your code, it’s time to build the PCF control. Open the terminal in Visual Studio and execute the following command:

msbuild /t:build

This command will compile the TypeScript files and generate the necessary artifacts for the PCF control.

Setting Up the Control in Power Apps:

Step 1: Package the PCF Control

After building the control successfully, use the PCF CLI to package it. In the terminal, navigate to the root directory of your PCF control project and run the following command:

pac pcf push

This command will create a managed solution (.zip) file containing the PCF control and its related metadata.

Step 2: Import the Solution in Power Apps

In Power Apps, navigate to the “Solutions” section and import the managed solution (.zip) you created in the previous step.

Step 3: Add the PCF Control to a Form

Now that the solution is imported, go to the desired form where you want to use the PCF control. Edit the form and add the custom control to the desired section.

Step 4: Publish the Changes

Save and publish the changes you made to the form.

Conclusion

In this blog, we explored the process of creating and setting up a PCF control using Visual Studio 2019. The Power Apps Component Framework allows developers to extend the capabilities of Power Apps and create customized, powerful controls for their applications. By following the steps outlined above, you can now start building your own PCF controls to enhance user experiences and meet specific business requirements. Happy coding!

The post Create and Setup the PCF Control Using Visual Studio 2019 appeared first on Dev Beard Guy.

In today’s fast-paced world of application development, efficient tools play a crucial role in streamlining the development process. For Microsoft Power Platform developers working with Dataverse, the Power Platform CLI (Command Line Interface) is an invaluable tool that enables seamless management of solutions, components, and other resources. In this blog, we’ll explore the benefits and features of the Power Platform CLI and guide you through the process of downloading Dataverse Development Tools using this powerful command-line tool.

Understanding Power Platform CLI

The Power Platform CLI is a cross-platform command-line interface designed to empower developers with greater flexibility and control over their Dataverse environment. It enables you to automate tasks, build continuous integration/continuous deployment (CI/CD) pipelines, and manage various components like solutions, apps, entities, and more.

Advantages of Power Platform CLI

1. Cross-Platform Compatibility: The Power Platform CLI works on Windows, macOS, and Linux systems, making it a versatile choice for developers using various operating systems.
2. Automation Capabilities: With the CLI, you can automate repetitive tasks, reducing manual errors and improving efficiency. This is especially valuable in complex development scenarios or large-scale projects.
3. Integration with CI/CD Pipelines: The CLI facilitates integration with popular CI/CD tools like Azure DevOps, GitHub Actions, and Jenkins, allowing you to create seamless deployment pipelines for your Dataverse solutions.
4. Version Control Support: By leveraging the CLI, developers can easily manage version control for their solutions, enabling them to roll back changes and collaborate effectively within a team.
5. Scripting and Extensibility: The CLI’s scripting capabilities let developers create custom commands and extensions tailored to their specific needs, enhancing the development experience further.

Downloading Dataverse Development Tools with Power Platform CLI

To download the Dataverse Development Tools using the Power Platform CLI, follow these simple steps:

Step 1: Install Power Platform CLI

If you haven’t already installed the Power Platform CLI on your machine, you can do so by following the official Microsoft documentation. The installation process differs slightly based on your operating system, but it generally involves using package managers like npm (for Node.js) or Homebrew (for macOS).

Step 2: Authenticate with Dataverse

After installing the CLI, open your terminal or command prompt and use the “power” command to connect your CLI with your Dataverse environment. You’ll need to provide your Dataverse credentials to authenticate successfully.

power login

Step 3: Download Dataverse Development Tools

With the CLI authenticated, you can now proceed to download the Dataverse Development Tools. Use the following command:

pac install latest

The command above fetches and installs the latest version of the Dataverse Development Tools, which includes various commands for managing Dataverse solutions, apps, entities, web resources, and other components.

Step 4: Verify Installation

To ensure that the installation was successful, you can run the following command to check the version of the installed tools:

pac --version

Conclusion

The Power Platform CLI is a powerful companion for developers working with Microsoft Dataverse. Its cross-platform capabilities, automation support, and integration with CI/CD pipelines make it an essential tool for efficient and streamlined development workflows. By downloading the Dataverse Development Tools using the Power Platform CLI, you gain access to a wide array of commands to manage your Dataverse solutions effectively.

As you delve deeper into your Dataverse development journey, don’t forget to explore the various features and possibilities offered by the Power Platform CLI. By mastering this command-line interface, you’ll significantly enhance your productivity and deliver high-quality solutions for your organization or clients. Happy coding!

The post Download Dataverse Development Tools with Power Platform CLI appeared first on Dev Beard Guy.