How to Configure the Resource Booking Web Part

Use the Resource Booking web part to quickly see resources such as desks or car parking spaces which are available and be able to book them out.

This component also provides a nice graphic of the resource to give users a better idea on what to expect. The Resource Booking component requires the following pieces in order to work:

  1. Microsoft Visio: Visio is used to create the diagram you want to display on the page. Visio is a useful tool which includes the necessary shapes and images in order to build scaled diagrams of a room or Office space

    image-png
  2. SVG: An SVG is used as a two-dimensional graphic so that you can make it interactive/clickable. Once you have created your diagram in Visio, you can export the diagram as an SVG so that it becomes interactive when uploaded to your Intranet. As an example, you will notice when I hover over the desk in the diagram, you can see they become selectable with a dark grey tint, once booked - Desk 1 has changed to red. 

    image-png-2
  3. SharePoint Lists: In order to make a resource such as a desk bookable, you need a way to make those desks. You will need to create a list named "Resources" and add an entry for each resource. You can create this list either on the site you want to add the webpart to, or Percy Resources /sites/percyresources. The title of the resource cannot use any special characters like (- + &)

    The list entries Title will need to link to the visio diagram, so on your diagram, if you have named the shape "resource|Desk 1", the entry in the list needs to match that title

    image-png-3

Adding the Web Part

Use the Resource Booking web part to quickly see resources which are available and be able to book them out. This component also provides a nice graphic of the resources to give users a better idea on what to expect. Below will outline the steps for adding the web part to the page and linking it up with your graphic and resources

For a full guide on the Resource Booking component from creating the Visio Diagram to uploading and configuring the web part, see here

  1. If you're not in edit mode already, click Edit at the top right of the page.

    Resource Booking Web Part - Edit Banner
  2. Hover your mouse above or below an existing web part or under the title region and click the plus sign and then select the Room Booking web part
    Resource Booking Web Part - Plus Web Part
    resourcebooking-setup-1
  3. Click on the edit pen in the top left corner of the web part to configure it and select Manage plans
    Resource Booking Web Part - Resource Book Edit
  4. The details pane will then appear on the right hand side. Providing the following options:
    1. List Location: Determines where to look for the Resources list. This can either be This Site, or Percy Resources (a site which holds core components for Percy).
    2. Manage Plans: Upload an SVG file of the plan you want to display.
    3. Show User Details: This will be if you want to show the details of who has booked out each resource on the visual diagram. 
    4. Limit Configuration: This lets you control how many resouces someone can book at the same time. The limits can be set per SVG plan you upload, so you need to upload at least one before this setting can be configured.
    5. Add To Calendar: When enabled, this gives people the option to add their bookings to their Outlook calendar, and lets you customise the timeslots that are booked out.
  5. Manage Plans: Upload an SVG file of the plan you want to upload. Once uploaded, "Plan name" will appear as the heading.
  6. Once saved, you will see the SVG appear with the tile you gave it in manage plans.

  7. There are three Power Automates that can be configured in-line with the resource booking tool, please see to your CSM for more details. The flows we have built will:
    1. Remove Bookings - once you hit the delete button on a booking, it will trigger the list item to be removed.
    2. Linked Resources - Within the list where the resources are managed, you can "link" resources together so if you have a requirement to block out desks that are joined due to social distance guidelines. You can link desks together so when one is booked, the flow will run and also book out the linked resources. 
  8. On top of this, we have the option to add email confirmations to any of the flows above and also the ability to create daily reminders to send an email one day before a booking to remind the individual. 
  9. Please speak to your Intranet Owner or CSM if you need access to the Power Automates to make changes.