PowerApps is a platform to create custom apps with less technical knowledge. Using PowerApps, we can easily build applications by drag and drop of controls. It also provisions to connect to different storage accounts like SharePoint, list, Database etc.

Let’s use the PowerApps to build solution for the below problem statement.

Problem Statement: To create leave request page in PowerApps.

Prerequisites:

• PowerApps license
• SharePoint List.

(Sample SharePoint list – UserDetails)

Solution:

SignIn to https://make.powerapps.com/ using respective credentials.

Choose New App ->Canvas App. Enter the name of the app and choose the type of App.(Tablet app being considered for demo) .

Screen is the Page which gets displayed once the app is published. An app can have multiple screen where 1 screen will be visible at a time.

From the left menu choose Data ->Add new data – >SharePoint. Click connect with the SharePoint list URL. Click Tree view and go back to the screen page.

Using Insert menu, we can add the required controls for the app. Please find the below controls and the logic added with the controls.

Labels – “User Name”,StartDate,EndDate,NoOFDays,LeaveType and Remaining leaves.

Text Input :1,5,Error Message,EndDateError

Button : Apply leave

Date Picker: For start and End date.

Drop down for choosing leave type.

Logics:

(Bold Text are properties of the field)

No of days: DefaultText – DateDiff(StartDate,EndDate)+1

Remaining leave: number of leave picked up from the SharePoint leave based on the leave type chosen.

For Start and End date – Defaultdate value is given as “Today()”
StartDate 
 On Select - If(StartDate.SelectedDate<Today(),ErrorMessage.Visible=true && ErrorMessage.Text="Selected date cannot be before Today",ErrorMessage.Visible=false)
EndDate 
Visible - StartDate.SelectedDate > EndDate.SelectedDate
Text - "EndDate must be greater than Start Date"
Error Message 
Visible - If((Value(RemLeave.Text)<Value(DateDiffText.Text)),true,false)
Apply Leave:
On Select - If(Value(DateDiffText.Text)>Value(RemLeave.Text),UpdateContext({Error:"Not enough leave"}),
If(LeaveTypeList.SelectedText.Value = "Sick Leave",
UpdateContext({MyVar123:LookUp(UserDetails,UserMail=User().Email,'Sick Leave')-1});
 Patch( UserDetails,First(Filter(UserDetails, UserMail=User().Email)),{ SickLeave: MyVar123 });
 Notify("Successfully applied sick leave"),
 LeaveTypeList.SelectedText.Value = "Casual Leave",
 UpdateContext({MyVar123:LookUp(UserDetails,UserMail=User().Email,'Casual Leave')-1});
 Patch( UserDetails,First(Filter(UserDetails, UserMail=User().Email)),{ CasualLeave: MyVar123 });
 Notify("Successfully applied casual leave")
 )
);
Display Mode - If((EndDateError.Visible || ErrorMessage.Visible),DisplayMode.Disabled,DisplayMode.Edit)

Based on all the above logics,

Error message will be thrown when start date is less than today.

When there are no message, leave will be applied successfully and SharePoint list will be updated with the leaves reduced from current leave for the respective leave type. Click Run to view and test the app .

Please find the below screenshots of the error messages.

We can publish the app by clicking publish button in the top right corner.

Once every validation is succeeded, below is the outcome of the page.

Summary:

We have seen creating app in PowerApps integrating SharePoint list. The app can be deployed in many platforms like teams, SharePoint etc., which will be covered in the upcoming blogs.

Hope the blog helps in basic creation of app in PowerApps integrating SharePoint.