Project Management Application (Create Project) Using PowerApps And SharePoint Online

Introduction to PowerApps

Microsoft PowerApps was introduced to simplify the development cycle of business apps and empowers developers and business users to create custom native, mobile, and web apps. it effectively allows a Power User to create apps intuitively by connecting to the cloud or On-premises data source.

What is the Canvas app?

Canvas app starts with the user experience, crafting a highly tailored interface with the power of a blank canvas and connecting it to the choice of more than 200 data sources. Canvas app can be built for the web, mobile, and tablet applications.

Canvas app gives the flexibility to arrange the user experience and interface the way Users want it and allows the creativity and business sense to guide how the user wants the apps to look and feel.

You can start to build your app from Microsoft tools where your data lives, such as,

Creating a canvas app is easy; with Power Apps, you can find or create your app in several ways,

Project Management Application

Steps to create a new Application in PowerApps,

Open https://www.office.com/?auth=2 and Login with the Office 365 credentials.

Step 1

Select Your Environment.

Project Management Application Using PowerApps And SharePoint Online

Step 2

Select Your PowerApps Application Type.

Click on +New app on the Top Menu and select Canvas App

Choose App type, there are two options to start an app.

Blank App
Template

Select Blank App and Tablet Layout.

Click on File on the top left Menu. Click on Save as to save the App in your environment. Here in the Name Box, you can change the name of the App if required and also Change the Icon of the App by clicking on Browse.

When you save and publish the application the following screen appears, when you click on See All Versions, saved versions of the app will appear.

Step 3 - Select Your Storage Type.

Select SharePoint from the Menu to connect with Database. Select + Create Site and then Team Site

Step 4 - Connect Your App to an Online or On-Premises Data Source.

Screens Required

Dashboard
Projects
Create Project
Create Task
Create Budget & Display Budget
Create Expense & Display Expense
Project Inner view
Gantt Chart

Before starting article following are the basic steps to create a new application in PowerApps.

Article 1 - Create Project using Microsoft PowerApps and SharePoint List

When you listen about Project Management first thing which comes your mind is How to create a Project?

In this article you will have a basic idea of User Interface to give a better look and feel to the User along with that you will have an idea to save the data of the following fields into the SharePoint List,

Text Input (Single Line of Text)
Text Input (Multiple Line of Text)
Dropdown
Date Field
Lookup
One Person
Multiple Persons

Step 1 - Creating List and relevant columns

Create a New Blank List in SharePoint and named as Project_Details
In the blank list, only the Title column is shown by default. Right-click on Add Columns, there is an option below to Show/ Hide columns, Select the ID column from the list and click on Apply on the top.
Create the following columns in the SharePoint List

Connect the data source “Project_Details” in the PowerApps application.

Step 2 - Screen Design and User Interface in Microsoft PowerApps

Open the Microsoft PowerApps Application.
Design the Screen with Necessary fields.
Project Name
Project Type
Project Start Date
Project End Date
Brief on Project
Project Manager
Project Members

Screen Design in Microsoft PowerApps

Steps to get Screen Design

Screen Background color Change in PowerApps

Open a New Screen, Select on Screen and Rename it to Create Project Screen. Select the Screen and Property Fill allows you change the background color. Here I have given RGBA (204, 231, 246, 1). You can give the background of any image also.

Rounded corner Rectangle in PowerApps

Here you can use a button instead of a Rectangle

Insert a Button, rename it to Bg_Btn, following are the properties of the Button to be entered
Text = “” (Leave Blank)
X = 66
Y=92
Width=1242
Height=605
Fill = RGBA (255, 255, 255, 1)
Display Mode=Disabled
Radius Bottom Left = 100
Radius Bottom Right = 100
Radius Top Left =100
Radius Top Right = 100
Hover Fill= RGBA(255,255,255,1)

Along with all these properties to be needed to make a Rounded corner Rectangle. This is not clickable.

Fields Entry in Microsoft PowerApps

From the top Ribbon Select Insert Labels, Text Input, Date Picker, Dropdown, Combo Box drag and drop them in the screen above the button as per the User’s requirement.

Text Input and Date Picker here is not required to fetch the data, only need to save the input data by the user.

How to fetch the data in the Dropdown from the Share Point List.

In this case, you need to create another SharePoint List – “Templates” and add some Template names in the Title column.

Connect the data source Templates in the PowerApps application

Select the “Items” property of the selected Dropdown, Rename it to Project_Template.

As displayed in the below picture-

Add Items – Templates

On the right panel choose Items as Templates (SharePoint Data Source) and Value as Title.

People Picker field in PowerApps

Here in this custom Create Project form, I have two people picker fields.

Project Manager (To save one User in Share Point List)
Project Members (To save multiple users in Share Point List)

Project Manager

Select One Combo Box rename it to PROJECTMANAGER, below are some properties to Search and Select one Project Manager for the Project.

Items: If(
IsBlank(PROJECTMANAGER.SearchText),
Office365Users.SearchUser({searchTerm: Text("null")}),
Office365Users.SearchUser(
{
searchTerm: PROJECTMANAGER.SearchText,
top: 1
}
)
)
OnChange: If(
IsBlank(PROJECTMANAGER.Selected.DisplayName),
Reset(PROJECTMANAGER));
IsSearchable: true
InputTextPlaceholder: "Please Select"
SelectMultiple: false

Project Members

Select one Combobox , Rename it to ProjectMembers, below are some properties to Search and Select Project Members for the Project.

Items: If(
IsBlank(ProjectMembers.SearchText),
Office365Users.SearchUser({searchTerm: Text("null")}),
Office365Users.SearchUser(
{
searchTerm: ProjectMembers.SearchText,
top: 1
}
)
)

OnChange

If(
IsBlank(ProjectMembers.Selected.DisplayName),
Reset(ProjectMembers),
Collect(
colMembersToAdd,
{
Claims: Concatenate(
"i:0#.f|membership|",
ProjectMembers.Selected.Mail
),
DisplayName: ProjectMembers.Selected.DisplayName,
Email: ProjectMembers.Selected.Mail,
UPN:ProjectMembers.Selected.UserPrincipalName
}
);
Reset(ProjectMembers)
);
IsSearchable: true
InputTextPlaceholder: "Please Select"
SelectMultiple: true

The Members list showing here in a gallery. So Insert a gallery below to Project Members Box, rename it Members Gallery and connect with a temporary data collection.

Items: colMembersToAdd ( The collection which is created under the Onchange of Project Members)

Steps to save the input data into the SharePoint List

Insert a button on the screen, Rename it to save_btn.

Usually, Patch() function is used to save the input data to Share Point List.

Below is the code to save the Input in the Project Details List. Defaults(List_name) are used to save a new record in the List.

Patch(Project_Details, Defaults(Project_Details), {
Title: Now(),
Project_Name: Project_name_txt.Text,
ProjectStartDate: start_date.SelectedDate,
ProjectEndDate: end_date.SelectedDate,
Project_Description: Project_description.Text,
Template_x0020_Name: {
'@odata.type': "#Microsoft.Azure.Connectors.Sharepoint.SPListExpandedReference",
Id: Project_Template.Selected.ID,
Value: Project_Template.Selected.Title
},
ProjectManager: {
'@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
Claims: Concatenate("i:0#.f|membership|", PROJECTMANAGER.Selected.Mail),
Department: " ",
DisplayName: " ",
Email: "",
JobTitle: " ",
Picture: " "
},
ProjectMembers: ForAll(colMembersToAdd, {
'@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",
Claims: Claims,
Department: "",
DisplayName: "",
Email: "abc",
JobTitle: "",
Picture: ""
})
})

2 Comments

Join the conversation! Your thoughts help the community grow.

Tyler Kolota4y ago
You could also try this new Project Tracker template that uses a SharePoint list integrated in a Teams channel for a combined log, kanban, gantt, RACI (roles), & automatic notifications system:https://community.powerbi.com/t5/Power-Platform-Integrations/PBI-RACI-Report-Power-Platform-Project-Tracker/td-p/2801527
- Tyler Kolota4y ago
  Https://powerusers.microsoft.com/t5/Power-Automate-Cookbook/Project-Tracker-SharePoint-and-Teams/td-p/1788102