Create Framework for PCF Project

Create a folder where you want to store all the files of your project. I have created a folder named DemoPCFProject. Open NodeJS Command Prompt and navigate to the newly created folder using cd command.

Read More »

Environment Setup for Power Apps Component Framework (PCF)

Below are the steps to Setup the environment to create PCF Code Components. You will be creating your first pcf code component.

System Setting when developing this component:

  • Machine OS: Windows 10
  • System Type: 64-bit OS
  • IDE: Visual Studio Code

Below are the steps to setup the environment. This is the one time setup and don’t need to repeat this again.

  • Install NPM:

NPM is Node Package Manager. npm is world’s largest Software Library. This is free to use. It includes CLI developers can use to download and install software. npm is installed with Node.js, which means we have to install NodeJS first.

Navigate to https://nodejs.org. Install the LTS version even if it is older then the latest version. The version keeps on changing. I will be using NodeJS version 18.13.0

Click on the LTS version. This will download the node-v18.13.0-x64.msi installer. Click on it and it will open the Installation wizard. The wizard is pretty straight forward. Click Next and install NodeJS. This installation will take a couple of minutes.

  • Install Power Apps CLI (Command Line Interface)

Click here to install Power Apps CLI. This will download .msi file. For me it downloaded powerapps-cli-1.0.msi. Click it and install CLI. It is a simple wizard, follow it and install it.

  • Install Visual Studio Code

I will be using Visual Studio Code for development purpose. It is free of code and you do not need a license for it. Download Visual Studio Code from here.

  • Power Platform Extension

Once you install Visual Studio Code, install Power Platform Extension. Open Visual Studio Code, go to Extensions, type Power Platform Tools. If you see 2 results of the same name, choose the one which is not in Preview mode. Preview Mode releases you can use for development/testing purpose, but they should not be used in Production. Click on Install. This will install the extension.

Extract only Date from DateTime value

Scenario

We have a datetime column DueDate in a SQL table. I need to display only date version in a label in Power Apps Gallery. Below is the code:

Text(ThisItem.DueDate,"dd-mmm-yyyy")

This will return 11-Jan-2023

PCF Code Component Life Cycle

When we develop code component, we implement StandardControl interface and its methods. These methods helps hosting runtime to manage life cycle of code component.

Below are the methods that needs to be used when creating a code component:

Read More »

PCF Architecture

  • We use HTML, CSS and TypeScript to create code components.
  • Developers can also use ReactJS, AngularJS, Fluent UI. These are optional, but are preferred.
  • 3 areas in code component: Manifest File, Component Implementation and Resource Files.
  • Manifest File has properties about the component like Name, Description, Version, Resource Files etc. App Makers can statically set the value of these properties or dynamically bind it to any available data columns of the application. These properties help the application and component to communicate with each other.
  • Component Implementation has the code files like TypeScript/JavaScript files, User Interface details, functionality, business logic etc. This code file implements StandardControl interface.
  • Resource Files has static resources like libraries used, CSS files, Images used at various places etc.

PCF Overview

  • Microsoft Power Apps Component Framework (PCF) is used create reusable code components, when out-of-box components does not meet business needs.
  • These are used within the Power Apps applications that you create.
  • These code components are used to create visual controls and can also have business logic as per the business requirement.
  • It supports client frameworks like ReactJS and AngularJS.
  • Uses responsive web design principles so that users can use it on any screen size/device/orientation.
  • PCF Components can use device features like camera, location, microphone etc.
  • All files of this code component will be bundled into a single solution.
  • Below are the types of components that can be added
    • Dataset: This custom control displays the rows of data.
    • Field: This custom control is created for a field in a form
  • There are numerous examples for PCF Code components that people have already created. You can check in PCF Gallery.

Insert Date Value to SQL from DateTime Picker

Scenario:

There is a SQL Server Table Project_Details with a column Due_Date of type datetime. In Canvas Apps, we have a collection named projectDetailsColl in which we are collecting Projects Details like txtProjectName as Text Input, dtpDueDate as Date Picker. The requirement is to save the values from collection to SQL table.

Below is the code for this:

ForAll(projectDetailsColl,
    Patch(Project_Details, Defaults(Project_Details),
    {
        ProjectName: projectDetailsColl[@ProjectName],
        DueDate: DateTimeValue(projectDetailsColl[@DueDate]),
        ModifiedBy: User().Email,
        ModifiedDate: Today()
    })
)

Dual-write and Virtual Tables

Dual-Write

  • These is a feature provided for interaction between Dataverse and Dynamics 365 Finance and Operations application.
  • Provides bidirectional integration between Finance and Operation apps and Dataverse
  • Whenever a user makes any change in Finance and Operation apps, it causes writes to Dataverse and vice-versa.
  • Should be used when you are working with Dynamics 365 apps
  • These used in scenarios where near real-time integration is required.
  • Dual-write will duplicate the data in both the directions (to and from Dataverse)

Virtual Tables

  • Used for data from external systems
  • Replication of data does not happen
  • Custom coding is not required
  • In-built or Custom connectors can be used to access data from external systems

Types of tables in Dataverse

There are four types of tables in Dataverse:

  • Standard: These are the pre-built set of tables that are included in every instance of Dataverse database. You can change name of these tables and columns of these tables, but you cannot delete any column from these tables. These are the generic tables that can be used across any organization. You can customize them as per your requirement. It is recommended to try to use these tables before creating new custom tables.
  • Complex: These tables contain complex and server-side business logic, including workflows and plugins. Users need P2 or Dynamics 365 license to work on these tables. Care should be taken while working on these tables as they include server-side logic.
  • Restricted: These tables are linked to Dynamics 356 applications for which each user should have the license for that Dynamic 365 application to perform CRUD (Create, Read, Update and Delete) operations.
  • Custom: These are the tables that are created for a specific business requirement.

Create New Environment

Whenever a user signs up for Power Apps or Dynamics, a new environment is automatically created. This environment will be the default environment.

Below are the steps to create a new environment:

Read More »