How to create charts from SharePoint lists with Power Apps and Plumsail Forms
Visualize data with column, line, pie and other charts in SharePoint forms using data from the same or other SharePoint lists in Power Apps and alternatives
Before the holiday season kicks in, we'd love to share with you how to set up SharePoint time-off request calendar for your employees with an approval process in Power Automate. We'll also use Plumsail Forms to customize time-off request form, making the form more user friendly, hiding the approval field from the user, and adding validation for leave dates ensuring that they are valid and do not conflict with already approved vacations.
Â
In this article:
Otherwise, watch the quick video overview of the process:
Â
Let's jump into the practical process, starting with setting up a SharePoint time-off request list. Next, we'll turn the list view into a calendar, customize the form with validation, and set up an approval process in Power Automate to approve or delete requests, while notifying employees.
Â
First, set up a SharePoint List. You don't need many columns, we'll use basic ones:
We're also making most of the fields required as we'll need them for the approval process.
Â
Inside the List, click Add view:
Â
We'll setup a calendar view:
Â
And we'll click add or remove fields:
Â
To add the Approved column to the freshly created calendar view:
Â
It will not appear in the view, but we can now use it to add conditional formatting and highlight approved requests with different color:
Â
Customizing the form with Plumsail Forms for SharePoint is extremely easy. If you want to get started, check out the step by step installation guide in our documentation.
We'll just drag-n-drop fields onto the form:
Â
It will look great and adjust to screens of all sizes. We'll also add List or Library control to make existing requests visible to the user.
Â
Finally, we'll play with some code, and we'll add custom validators for the Start and End dates: first of all, Start Date should be before or equal to End Date. Secondly, we'll add a form validator with pnpjs to check whether there is a conflict - an existing request from the same department that has been approved already, and if so - prevent the form from saving.
fd.spRendered(function() {
fd.validators.push({
name: 'Dates conflict validator',
error: 'These dates are already taken by an employee from the same department',
validate: function() {
// check whether there are requests already
return pnp.sp.web.lists.getByTitle('Time-off requests').items
.select('Title', 'Id', 'StartDate', 'EndDate')
.filter("Department eq '" + fd.field('Department').value + "' and Approved eq 1")
.get()
.then((items) => {
// see if we got something
if (items.length > 0) {
for(var i = 0; i < items.length; i++){
var item = items[i];
var startDate = new Date(item.StartDate);
var endDate = new Date(item.EndDate);
//check for conflict
if ((startDate < fd.field('StartDate').value && endDate < fd.field('StartDate').value) ||
(startDate > fd.field('EndDate').value && endDate > fd.field('EndDate').value)){
continue;
}
else {
return false
}
}
}
return true;
});
}
});
fd.field('StartDate').addValidator({
name: 'StartDate validator',
error: 'StartDate cannot be after End Date',
validate: function(value) {
if (fd.field('EndDate').value && value > fd.field('EndDate').value) {
return false;
}
return true;
}
});
fd.field('EndDate').addValidator({
name: 'EndDate validator',
error: 'EndDate cannot be before Start Date',
validate: function(value) {
if (fd.field('StartDate').value && value < fd.field('StartDate').value) {
return false;
}
return true;
}
});
});
Now, this code will ensure that the dates are specified properly and there is no conflict with existing approved requests.
Â
With our setup, creating an approval flow in Power Automate will require just a few steps.
First of all, we'll create an automated flow which is triggered whenever an item is created in our Time-off requests list:
Â
We'll then use the information on the form to send an approval request to the manager, specified on the form with Start and wait for approval action:
Â
Adding a Condition block will allow us to check the approval status by comparing Outcome to Approve:
Â
If the request is approved, we'll update item Approved field to Yes:
Â
And we'll send an email to the employee, notifying them that their request was approved.
Â
Now, if the request is not approved, we'll delete the item right away:
Â
And we'll also send an email to the employee, asking to contact the manager directly to discuss why the request got disapproved.
Â
We'll test the flow with a simple request:
Â
Here's how it looks before approval:
Â
We'll receive the following approval request to our inbox:
Â
And if it's approved, that's what we see:
Â
Hope that this article was helpful and inspires you to create your own time-off automation in SharePoint. With Plumsail Forms for SharePoint, you can also easily create custom forms, add validation and so much more.
If you'd like to try it out and see if it works for your needs, get started with 30 days free trial of Plumsail Forms for SharePoint Online by following the installation instruction in our documentation, which has a video walkthrough.
If you have any questions, our support team at support@plumsail.com and big community will be happy to help to get started with anything you might need!