How to create a PTO/vacation request form and approval process in SharePoint

I was recently asked to develop a PTO request form that accomplished the following:

  • Allowed users to submit PTO, Remote work, Training, and Other requests
  • Auto-lookup of the employee’s manager
  • Send confirmation to submitter
  • Notify manager and seek approval/rejection with comments
  • If approved, send notification with an iCal link users can save to their calendar, and add the PTO to our shared departmental calendar (minus any comments)

Note: This particular build was done on SharePoint Server 2016 and uses a SharePoint Designer workflow.

Create the PTO request form

Thanks to Gregory Zelfond for sharing the idea of using a Tasks web part for this as opposed to a list. Much of this first section is inspired by his post here, with some adjustments for my purposes and preferences.

  1. Add a tasks app and name it PTO Requests

  2. Go to List settings for the new tasks app
  3. Configure Versioning settings as follows

  4. Back under List settings, configure the following Advanced settings as seen here

      

  5. Under Views, keep All Tasks, My Tasks, Approve/reject Items, and Calendar. Delete the rest. Rename All Tasks and My Tasks to All Requests and My Requests.

  6. Back under List Settings, under Columns, create the columns shown in green here, and rename those in red. Duration should be the last column you create (number format), and its formula follows the screenshot. Category needs to be the types of “Out of Office” a person could request (like PTO, Remote, Training, Other).
    Click to enlarge

     

    =IF(AND((WEEKDAY([End Date],2))<(WEEKDAY([Start Date],2)),((WEEKDAY([Start Date],2))-(WEEKDAY([End Date],2)))>1),(((DATEDIF([Start Date],[End Date],"D")+1))-(FLOOR((DATEDIF([Start Date],[End Date],"D")+1)/7,1)*2)-2),(((DATEDIF([Start Date],[End Date],"D")+1))-(FLOOR((DATEDIF([Start Date],[End Date],"D")+1)/7,1)*2)))

    I like the Duration column because it will allow us to show how many weekdays (not including weekends) the PTO Request includes. So those multi-week or broken-week requests show an accurate number for management purposes.

  7. Back under List Settings, select “Task” from under Content Types. Configure each column (hide, make optional or require) as follows:
    Click to enlarge

     

  8. Your new form should resemble this now:
         
    Click to enlarge

     

  9. You might want to spend some time making your views a nice dashboard as well. Here’s what I did for “All Requests.” Notice I grouped by a different calculated column which determines whether the PTO is Upcoming, Current, or Past and then sub-grouped by category.

    Click to enlarge

Create the workflow for approval and calendar addition

In SharePoint Designer, add a new 2010 platform List Workflow for the PTORequests list.

  1. Go to Workflow Settings
  2. Check all “Start Options”
  3. Click “Edit workflow”

Here’s a preview of what we’re going to build:

Click to enlarge

Because this workflow has many steps, I’m only going to show some high-level tips for completing it. Build your workflow to suit your needs. If you have specific questions on how I built mine, please comment.

The approval request email

For the “then Email Current Item: Approver” step, here’s how I did the email:

The link for approving and rejecting is as follows, and you’ll need to replace the red text with a lookup to the current item’s ID. The easiest way to get this might be to do a test submission and copy the link to the approval page where the manager will choose Approved, Rejected, or Pending. You can find this page by viewing a submission, then clicking “Approve/Reject.”

Then just be sure to swap the specific ID with the lookup field for ID.

https://YOURSITE/sites/it/_layouts/15/approve.aspx?List=%7BLISTGUID%7D&ID=[%Current Item:ID%]&Source=%2Fsites%2Fit%2FLists%2FPTO%2520Requests

This will reduce the number of clicks your approvers/managers have to do significantly. Their process will be:

  1. Click big link in email
  2. Select decision and enter comments
  3. Save/Submit

If denied email

No bells and whistles here. You might even include a link to the dash suggesting they submit another request if they wish.

If approved, create calendar item

This is fairly straightforward. If approved, we create an item in a different list. I even edited the “Calendar” view of my PTO requests by adding an “app part” for the separate calendar instead of using the built-in calendar view the task list provides. I then just minimized and hid the chrome of the “Calendar” web part that was already on the view. This allowed me to keep some overlays and other processes related to the second calendar, but see if in context of PTO Requests.

Also, to protect the privacy of those submitting “Other (please explain)” requests (likely FMLA or something private) I have the workflow changing “Other” to just “Out of Office” for the purposes of adding to our shared calendar.

If approved email

Since I created a calendar item if approved, I’m including an iCal link in the approval email for users to open the .ics file and save it to their calendars. Here’s a post on how to structure iCal links. Just instead of creating a calculated column, construct the URL in SharePoint Designer:

Click to enlarge

Improve the look with script (optional)

The following script improves the look of both your views and your forms. It will:

  • Get rid of  “See also” items when viewing requests
  • Change “New task” to “New request” in your views
  • Make sure all fields are visible, and not hidden behind “Show More”

Just copy and save the following script as a separate .js file in your Site Assets and follow the instructions beneath the script to add it to your views and forms. 

Views

  1. Go to a view
  2. Settings –> Edit Page
  3. Insert/Add web part –> Media and Content –> Content Editor Web Part
  4. Add link to script saved on site
  5. Save and repeat for each view

Forms

Go to your list –> List –> Form web parts

Click to enlarge
  1. Select a web part
  2. Settings –> Edit Page
  3. Insert/Add web part –> Media and Content –> Content Editor Web Part
  4. Add link to script saved on site
  5. Save and repeat for each form

Good luck!

Change “Specify your own value” label to “Other” in SharePoint choice columns

In classic list views/forms and on-premise environments, your choice columns allow you let users specify their own value. But the label is literally “Specify your own value:”. This can be changed.


Note: If you’re using the modern experience, you don’t have this issue.


To change the label, add the following script to your newform.aspx page, changing the name of the field referenced (see below). You can add this script in a script editor web part as a snippet or save it as a .js file to your Site Assets and reference it in a content editor web part.

To get the actual field label, use F12 (developer tools) when viewing the form and select the checkbox. Copy everything after the ‘#’ sign or whatever the column name is, ending in ‘FillInRadio.’

Once you’ve added that script (and updated the field name with your own), save the page and you’ll see your new label:

Set multiple choices as default values for checkbox fields in SharePoint forms

default checks

I recently worked on a project for a client that needed 2/3 checkbox options checked by default on a new form. While not as straight-forward as other field types, it’s still certainly possible.

  1. Go to List –> List Settings (server/on-prem) or settings wheel –> List Settings (online/O365)
    list settings
    list settings o365
  2. Click the name of your checkbox/choice column to edit its settings or create a new checkbox column
    iexplore_2018-07-26_07-53-51
  3. Change “Default value:” from “Choice” to “Calculated Value”
    iexplore_2018-07-26_07-52-49
  4. Enter a formula like: =”;#Choice;#Choice;#Choice;#”
    Example:
    =”;#Printed Statement;#E-Statement;#Pick Up in Office;#”
  5. Click OK

That’s it! Now on new forms/items, everything you entered in the formula as a default choice will be pre-checked.
pre-checked

How to make a floating “attachments” block for SharePoint forms

2018-07-03_15-44-13

I recently developed the above solution for a project requiring attachments at multiple points throughout the form. Originally I considered just placing a static “attachment button” in multiple places, but I came up with this and liked it better.

So if you also have long forms for your SharePoint lists, and you would like an easier way for end users to add attachments to list items, ditch the out-of-the-box ribbon menu attachment button and try this “floating attachment box” solution instead.

Continue reading “How to make a floating “attachments” block for SharePoint forms”

How to remove the extra “Save” and “Cancel” buttons in a custom new item form in SharePoint

save cancelWhen you create a custom new item form in SharePoint Designer, you get a bonus set of “Save” and “Cancel” buttons automatically generated. One set at the top, and one set at the bottom (as generally seen on default forms).

Chances are if you’ve created a custom new item form, you had other intentions for the space now taken by duplicate buttons. Here’s how to get rid of the spare buttons and get back to designing and tweaking your custom new item form.

Continue reading “How to remove the extra “Save” and “Cancel” buttons in a custom new item form in SharePoint”

Embed quizzes and/or results in SharePoint using Microsoft Forms

Asset 1quiz.pngThis morning I looked around for either pure javascript or custom service solutions for trivia or quiz embeds for SharePoint. The out-of-the-box survey web part wouldn’t allow the kind of features I needed such as showing a message upon submission about correct and incorrect answers, and I wanted something more robust than a newsfeed or Yammer quiz. I also wanted users to easily be able to change their own quiz questions and answers and no high-maintenance code solution was going to cut it.

What I learned? There aren’t a lot of free solutions out there for quick quiz creation and embedding in SharePoint. And the ones that are out there don’t look the greatest. Then I remembered Microsoft Forms has a quiz function! Don’t these look great? Even better – you can embed in SharePoint Server/On-Prem or SharePoint Online/O365!

sidebyside

Microsoft Form’s quiz capabilities are incredible. In five minutes you can create a quiz that looks good, is easy to update and has features ordinarily only available with a premium subscription through other services. And as seen above, you can embed the results as well, making voting fun or showing a group how everyone is performing as a whole on a topic quiz. Here are some of the great features you get with Microsoft Forms:

Continue reading “Embed quizzes and/or results in SharePoint using Microsoft Forms”

Intro to conditional formatting & rules/validation when customizing SharePoint new item forms with PowerApps in Office 365

2018-01-13_17-23-37.gif
This post will introduce you to some basic conditional formatting, rules & validation ideas you can implement today in your customized SharePoint forms using PowerApps. And don’t worry – if you start making changes to your form and don’t want to keep them, you can easily switch back to the original SharePoint form.

Continue reading “Intro to conditional formatting & rules/validation when customizing SharePoint new item forms with PowerApps in Office 365”

Reverting to default SharePoint new item form instead of PowerApps custom form

Maybe you’ve made a PowerApps customized form but want to switch back to the original SharePoint new item form. Here’s how:

Continue reading “Reverting to default SharePoint new item form instead of PowerApps custom form”