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
 
Project Management Application Using PowerApps And SharePoint Online 
 
Choose App type, there are two options to start an app.
  1. Blank App
  2. Template
Select Blank App and Tablet Layout.
 
Project Management Application Using PowerApps And SharePoint Online 
 
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.
 
Project Management Application Using PowerApps And SharePoint Online 
 
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.
 
Project Management Application Using PowerApps And SharePoint Online 
 
Step 3 - Select Your Storage Type.
 
Select SharePoint from the Menu to connect with Database. Select + Create Site and then Team Site
 
Project Management Application Using PowerApps And SharePoint Online
 
Project Management Application Using PowerApps And SharePoint Online
 
Project Management Application Using PowerApps And SharePoint Online 
 
Step 4 - Connect Your App to an Online or On-Premises Data Source.
 
Screens Required
  1. Dashboard
  2. Projects
  3. Create Project
  4. Create Task
  5. Create Budget & Display Budget
  6. Create Expense & Display Expense
  7. Project Inner view
  8. 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,
  1. Text Input (Single Line of Text)
  2. Text Input (Multiple Line of Text)
  3. Dropdown
  4. Date Field
  5. Lookup
  6. One Person
  7. 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.

    Project Management Application Using PowerApps And SharePoint Online

  • Create the following columns in the SharePoint List

    Project Management Application Using PowerApps And SharePoint Online
Connect the data source “Project_Details” in the PowerApps application.
 
Step 2 - Screen Design and User Interface in Microsoft PowerApps
  1. Open the Microsoft PowerApps Application.
  2. Design the Screen with Necessary fields.
  3. Project Name
  4. Project Type
  5. Project Start Date
  6. Project End Date
  7. Brief on Project
  8. Project Manager
  9. Project Members

Screen Design in Microsoft PowerApps

 
Project Management Application Using PowerApps And SharePoint Online 
 
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.
 
Project Management Application Using PowerApps And SharePoint Online 
 
Rounded corner Rectangle in PowerApps
 
Here you can use a button instead of a Rectangle
  1. Insert a Button, rename it to Bg_Btn, following are the properties of the Button to be entered
  2. Text = “” (Leave Blank)
  3. X = 66
  4. Y=92
  5. Width=1242
  6. Height=605
  7. Fill = RGBA (255, 255, 255, 1)
  8. Display Mode=Disabled
  9. Radius Bottom Left = 100
  10. Radius Bottom Right = 100
  11. Radius Top Left =100
  12. Radius Top Right = 100
  13. 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.
 
Project Management Application Using PowerApps And SharePoint Online 
 
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.
 
Project Management Application Using PowerApps And SharePoint Online 
 
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.
 
Project Management Application Using PowerApps And SharePoint Online 
 

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.
 
Project Management Application Using PowerApps And SharePoint Online 
 
People Picker field in PowerApps
 
Here in this custom Create Project form, I have two people picker fields.
  1. Project Manager (To save one User in Share Point List)
  2. 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.
  1. Items: If(  
  2.     IsBlank(PROJECTMANAGER.SearchText),  
  3.     Office365Users.SearchUser({searchTerm: Text("null")}),  
  4.     Office365Users.SearchUser(  
  5.         {  
  6.             searchTerm: PROJECTMANAGER.SearchText,  
  7.             top: 1  
  8.         }  
  9.     )  
  10. )  
  11. OnChange: If(  
  12.     IsBlank(PROJECTMANAGER.Selected.DisplayName),  
  13.     Reset(PROJECTMANAGER));  
  14. IsSearchable: true  
  15. InputTextPlaceholder: "Please Select"  
  16. SelectMultiple: false  
Project Management Application Using PowerApps And SharePoint Online
 
Project Management Application Using PowerApps And SharePoint Online
 
Project Management Application Using PowerApps And SharePoint Online 
 
Project Members
 
Select one Combobox , Rename it to ProjectMembers, below are some properties to Search and Select Project Members for the Project.
  1. Items: If(  
  2.     IsBlank(ProjectMembers.SearchText),  
  3.     Office365Users.SearchUser({searchTerm: Text("null")}),  
  4.     Office365Users.SearchUser(  
  5.         {  
  6.             searchTerm: ProjectMembers.SearchText,  
  7.             top: 1  
  8.         }  
  9.     )  
  10. )  
OnChange
  1. If(  
  2.     IsBlank(ProjectMembers.Selected.DisplayName),  
  3.     Reset(ProjectMembers),  
  4.     Collect(  
  5.         colMembersToAdd,  
  6.          
  7.         {  
  8.             Claims: Concatenate(  
  9.                 "i:0#.f|membership|",  
  10.                 ProjectMembers.Selected.Mail  
  11.             ),  
  12.             DisplayName: ProjectMembers.Selected.DisplayName,  
  13.             Email: ProjectMembers.Selected.Mail,  
  14.             UPN:ProjectMembers.Selected.UserPrincipalName  
  15.         }  
  16.     );  
  17.     Reset(ProjectMembers)  
  18. );  
  19. IsSearchable: true  
  20. InputTextPlaceholder: "Please Select"  
  21. SelectMultiple: true  
Project Management Application Using PowerApps And SharePoint Online
 
Project Management Application Using PowerApps And SharePoint Online
 
Project Management Application Using PowerApps And SharePoint Online 
 
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. 
  1. Patch(Project_Details, Defaults(Project_Details), {  
  2.     Title: Now(),  
  3.     Project_Name: Project_name_txt.Text,  
  4.     ProjectStartDate: start_date.SelectedDate,  
  5.     ProjectEndDate: end_date.SelectedDate,  
  6.     Project_Description: Project_description.Text,  
  7.     Template_x0020_Name: {  
  8.         '@odata.type'"#Microsoft.Azure.Connectors.Sharepoint.SPListExpandedReference",  
  9.         Id: Project_Template.Selected.ID,  
  10.         Value: Project_Template.Selected.Title  
  11.     },  
  12.     ProjectManager: {  
  13.         '@odata.type'"#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",  
  14.         Claims: Concatenate("i:0#.f|membership|", PROJECTMANAGER.Selected.Mail),  
  15.         Department: " ",  
  16.         DisplayName: " ",  
  17.         Email: "",  
  18.         JobTitle: " ",  
  19.         Picture: " "  
  20.     },  
  21.     ProjectMembers: ForAll(colMembersToAdd, {  
  22.         '@odata.type'"#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser",  
  23.         Claims: Claims,  
  24.         Department: "",  
  25.         DisplayName: "",  
  26.         Email: "abc",  
  27.         JobTitle: "",  
  28.         Picture: ""  
  29.     })  
  30. })