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,

• From a SharePoint list
• From a Power BI dashboard

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

• From data
• From a sample
• From a Data verse source
• From a blank canvas
• Via AppSource

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.

 

 

 

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.

1. Blank App
2. 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

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.
  
  
  
  
• 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

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

 

 

 

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

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.

 

 

 

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.

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.

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: ""
    })
})