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 »Tag: Canvas Apps
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.
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:
- Login to https://admin.powerplatform.microsoft.com
- Click on Environments option on the left-navigation bar
Compare two Strings without matching case
Below is the code I used to compare string values from two Text Inputs. This will not compare the case.
That is, “Apple” will be equal to “apple”.
If(
StartsWith(TextBox1.Text, TextBox2.Text),
"values matched", "Values did not matched"
)
Search for multiple fields in Combo Box
By default, we can display only one field in Combo Box and Search for only one field in Combo Box.
There is a requirement to display multiple fields and also search for multiple fields in Combo Box. For example, we have EmployeeDetails as the Data should display Employee Name and Employee Email ID and can also search the record using same.
Modify below parameters of ComboBox:
Items: EmployeeDetails
DisplayFields: ["EmployeeName","EmployeeEmailID"]
SearchFields: ["EmployeeName","EmployeeEmailID"] We can use this for ID and Definition Column types as well.
People Picker in Canvas Apps
Insert a People Picker in Canvas Power App using Combo Box. Below are the steps: Add Office 365 Users Data Source. Add a Combo Box. Click on Edit Fields on Properties Bar. Select Person as the Layout. To pre-populate the Combo Box with the existing value, write below code in DefaultSelectedItems property. RequestSubmittedByEmail and RequestSubmittedByName […]
Check if a Table in Data Source is empty
To check whether a table in data source is empty or not, use IsEmpty
IsEmpty(tableName)
This is equivalent to CountRows(tableName)=0
We cannot use CountRows() directly on data source as it generally gives Delegation warning (Depends on the Connector)
If IsEmpty(tableName) returns true, this indicates that your Data Source table has no rows.
Power Platform Academy 