Share and Enjoy !

In my last blog, I walked through a no-code solution using Microsoft Forms, Power Automate, Excel, and Power BI. In this blog, I’m going to walk through a no-code Time Off Request solution using a SharePoint list and Power Apps.

As you will see in this blog, one of the draws of Power Apps is the (almost) effortlessness of converting a manual process into an application that can be utilized on any device. Combined with other Power Platform-tools, it can transform the way a team, department, or organization interacts with one another. So, let’s dive in!

Please note, this solution was built within my development tenant. If you do not have access to create a list or a Power Apps solution, you will need to follow-up with your system administrator to have edit permissions, at a minimum, to create the list as well as a Power Apps license.

Create a SharePoint List

The SharePoint list is where the data for the Time Off Request will be stored. It will house values used to populate the app (such as dropdown lists) as well as define what data will be stored in the column (such as dates, email addresses, etc.).

1. Navigate to the site where your users will have the right permission to access the list.  Then click on the gear icon to open settings.

NOTE: in my example, I chose a communications site.

2. From the settings panel, select “Site contents”

 

 

 

 

 

 

3. Click the “New” down arrow then select “List”

 

 

 

 

 

4. From the “Create a list” pop-up, select “Blank List”

 

 

 

 

5. Enter a name for the list and a description, then click “Create”

 

 

 

 

 

 

 

6. Click on the gear icon to open settings

 

 

7. From the settings panel, select “List settings”

 

 

 

 

 

 

8. In the columns section, select “Create column”

 

 

 

 

 

 

While column names can contain spaces, any space would be replaced with the hex “_x0020_” in Power Apps. For example, “Request Start Date” would appear as “Request_x0020_Start_x0020_Date”. As a result, I chose to name all my columns without any spaces. Here is a table of the columns I created in my SharePoint list:

NameTypeRequireValuesOther
RequestTypeChoiceYesVacation
Sick
Floating Holiday
Jury Duty
Bereavement
Clear “Default value”
RequestStartDateDate and TimeYes
RequestEndDateDate and TimeYes
HoursPerDayChoiceYes2
4
6
8
Clear “Default value”
ManagerEmailSingle line of textYes

9. Select the “Title” column and change the column name to “Status”

 

 

 

 

 

 

 

10. Select “Column ordering” to reorganize the columns in the list.

 

 

 

 

 

 

 

 

11. Change the “Status” column position to “6” then click “OK”

 

 

 

 

 

 

 

Here is the final view of the columns

 

 

 

 

 

12. In the views section, select the “All Items” view

 

 

 

13. Check the “Display” checkbox next to the “ID” column and change the “Position from Left” to “1”; also, change the “Position from Left” for the “Status” column to “7” then click “OK”

 

 

 

 

 

 

 

 

 

 

At this point, the majority of the work for the app has been accomplished in the SharePoint list. By defining the columns and reorganizing the order, the list is now prepped and ready to be converted to a Power Apps solution!

Create the Power Apps Solution

This is where all the magic begins! With a few clicks, the SharePoint list will be transformed into a fully functional app within a matter of minutes.

1. From the “All items” view, click the “Power Apps” down arrow then select “Create an app”

 

 

 

 

 

 

 

2. In the “Create an app” panel, enter a name for the app, then click “Create”.

 

 

 

 

 

 

 

 

 

Be patient while the SharePoint list is converted to a custom app

 

 

 

 

 

 

 

Once the app is built, it will have the following 3 screens to interact with the list:

Browse

The Browse screen will let the user refresh the data as well as sort the items listed. It will also allow the user to enter a new request by navigating the user to the Edit screen. If there are a lot of items in the list, the user can search for items via the search bar. If the user selects an item to view, it will navigate the user to the Detail screen to see additional data about the item selected.

 

 

 

 

 

 

 

 

Detail

The Detail screen will display the list item in read-only mode. The user can choose to delete the item from the list as well as edit the item, which will navigate the user to the Edit screen. The user can also choose the back arrow to navigate back to the Browse screen.

 

 

 

 

 

 

 

 

Edit

The Edit screen serves two functions:

  • Enter a new request (from the Browse screen) by displaying a blank form
  • Edit an existing request (from the Detail screen) by displaying the list item in edit mode.

The user can choose to submit the new/edited request to the list or cancel the changes by resetting the form back to its original state.

 

 

 

 

 

 

 

 

 

 

3. To allow others to use the app, it will need to be shared by selecting the “Share with other users” icon

 

 

4. In the share app panel, you can enter specific individuals or everyone in your organization – in my example, I chose “Everyone”

 

 

 

 

 

Since an organization cannot edit or share the app, you may want to consider adding a co-owner.

 

 

 

By default, an email will be sent to all new users – in my example, I chose to disable the checkbox. Click “Share” to finish sharing the app.

 

 

 

5. To enable the app for general use, it will need to be saved and published by first selecting “File”

 

 

6. In the left navigation menu, select “Save”

 

 

 

 

 

 

 

 

 

7.Enter notes about the version, then click “Save”

 

 

 

 

 

8.Once changes have been saved successfully, click “Publish”

Note: Depending on your organization, the ability to publish your solution may be restricted and may require admin approval

 

 

 

9. When prompted, click “Publish this version”

 

 

 

 

 

 

Once the app has been saved and published, there is another opportunity to share the app with additional users

 

 

 

10. Click on the back arrow to return to the app

 

 

 

 

 

 

 

 

 

11. Select the “Preview the app” icon and test the app by adding a new request, viewing and editing a request as well as submitting or canceling the change.

 

 

Conclusion

The app is now ready for use! As you can see, with minimal effort, the app came together with a few additional button clicks within Power Apps. Depending on the type of app, some tweaks can be made to improve the overall experience for your users.

In my next blog, I will work on putting some logic around the app to prevent a couple of common issues as well as help with automating the process using Power Automate. Here are some of the items that will be addressed including:

  • Prevent end date from preceding the start date
  • Enforce a valid pattern to the manager’s email
  • Restrict user’s access to list items
  • Auto-populate the status throughout the life cycle of the request
  • Route the request to the manager for approval/rejection
  • Send an email back to the requester upon approval/rejection

Thank you for your time and interest in creating a no-code Power Apps solution. See you next time!

CONTACT THREEWILL FOR GUIDANCE ON CREATION OF YOUR FIRST NO-CODE POWER APP!

Share and Enjoy !