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