Add User Details to Person or Group Column type in SharePoint List from Canvas Apps

We generally get scenarios where we use SharePoint as the Data Source for our Canvas Power Apps. Below is the configuration of SharePoint List

• SharePoint List: People Picker Demo
  • Single line of Text: Description
  • Person or Group with Single select: SinglePerson
  • Person or Group with Multi select: MultiplePerson

Edit selected Text Input of a row in Gallery

I have a Gallery with every row having a Text Input, Edit Icon and Save Icon.

Requirement is to make the Text Input editable on click of Edit icon, save the data to Data Source on click of Save icon and make the text Input non-editable.

Something like below:

OnSelect propery of Edit Icon. ID Column is the Unique number column of the Data Source.

Set(EditMode, ThisItem.ID)

OnSelect property of Save Icon

Patch('UserEmails', LookUp('UserEmails', ID=ThisItem.ID),
{   
    UserEmail: txtEmailID.Text
});
Set(EditMode, 0)

Display Mode property of Text Input control

If(EditMode = ThisItem.ID, DisplayMode.Edit, DisplayMode.View)

With above code, you will be able to edit the Text Input control using Edit icon and make changes in the Text Input Control. On click of the Save icon, the data will be saved to the Data Source and Text Input control will return to the View mode.

Filter Excel with more than 2000 rows in Canvas Power Apps

Excel is one of the most common Data Source for Power Apps, that can have more than 2000 rows. End Users are continuously updating existing rows or adding new rows into it, which again increases its size.

Please note that my Excel file is stored in OneDrive for Business and I am using Excel Online (Business) connector.

We already know that Canvas Power Apps has a limitation to access only 2000 at one time. Hence, if we want to access 2001th row, we need to be careful while selecting the formula to get that row because of Delegation warning.

If we use Filter function, we can only get up to 2000th row. To resolve this issue, we can use Search function, even for the dropdowns.

We can write below code on OnChange event of the Text Input or DropDown or ComboBox.

ClearCollect(empInfo,
    If(!IsBlank(txtEmpID), Search('EmpInfo',txtEmpID.Text, "EmpID"),
    If(!IsBlank(txtName), Search('EmpInfo', txtName.Text, "EmpName"),
    If(!IsBlank(drpRole), Search('EmpInfo', drpRole.Selected.Value, "Role"),
    If(!IsBlank(cmbCity), Search('EmpInfo', cmbCity.Selected.Value, "City")
    ))))
)

Change Display Mode of Data Card as per Form Mode

Scenario

We have below controls on our screen:

• Form: frmEmployee
• Add Employee Button: btnAddEmployee
• Edit Employee Button: btnEditEmployee

In our Form, we have details for Employees like EmployeeID, EmployeeName, EmployeeAddress and EmployeePhone.

When user clicks on btnAddEmployee, frmEmployee should be New Form and all Data Cards should be editable.

When user clicks on btnEditEmployee, frmEmployee should be Edit Form and all Data Cards should be editable except EmployeeID.

EmployeeID DataCard DisplayMode= If(
                         frmEmployee.Mode = FormMode.Edit,
                         DisplayMode.View,
                         DisplayMode.Edit
                      )

Add and Remove User to/from Microsoft 365 AD Group through Power Apps

There is a requirement to add and remove User to/from Azure AD group of Type Microsoft 365 using Power Apps.

There are below steps:

• Gallery (galGroupMembers) to display the list of existing Users in a selected AD Group
• Create People Picker (cmbUser) to search User
• Button (btnAddUser) to Add user to AD Group
• Button (btnRemoveUser) to Remove User

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.

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:

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.