How to set up SharePoint booking calendars from scratch

Transcription

1 How to set up SharePoint booking calendars from scratch Acknowledgements Requirements Create a new list Make adjustments to your list's advanced settings Add Columns to the list Hide columns from the new item form Code to comment out Create a workflow for your list Set up the workflow Step 1 Step 2 Step 3: Write our variables to the object Save your workflow Publish your workflow Set the workflow to run whenever a new item is inserted Create a calendar view for your list Make a page for your calendar and create link for users to add new items Example (with HTML to make the link look more like a button) Verify that it works the way you expect it to Save your list as a template, so you can make copies of it Make copies of your list for new calendars Optional: Create a calendar to overlay all your booking calendars into Acknowledgements This may not be the best way to accomplish this, but it's the way that worked for us. New events won't show up instantly - it will take a few seconds, because a workflow must run on them before they can appear. This will make it appear as though a user's event just dissappeared, until they refresh the page a few seconds later. If your school ever changes its period/bell schedule, you will need to edit the workflows of all calendars you set up using these instructions If your school has an abnormal period/bell schedule, this may not work for you. This system will not check for or prevent double-bookings Requirements Access to Sharepoint and the permissions to create and manage lists SharePoint Designer 2013 installed on your computer Some basic HTML knowledge will help Create a new list Settings Site Contents Add an app Custom List Name your list something like "Booking: Library Lab" Make adjustments to your list's advanced settings List Settings Advanced Settings Attachments Disabled Add Columns to the list List Settings (of the list you created above) Rename the "Title" column to "Teacher Name" Create the following new columns:

2 BookingDate Date and Time Require that this column contains information (Yes) Date and Time Format: Date Only Default value: Today's date Add to default view (Yes) Period Choice Require that this column contains information (Yes) Values: Period 1 Period 2 Period 3 Noon Period 4 Period 5 Period 6 Display as Drop-Down Menu Default Value: Period 1 Add to default view (Yes) ActualStartDate Date and Time Do not require this column contains information Date and Time format: Date & Time No default value Uncheck Add to default view ActualEndDate Exactly the same as ActualStartDate EventTitleToDisplay Single line of text No default value Uncheck Add to default view Hide columns from the new item form Open Sharepoint Designer 2013 on your computer Connect to your list's parent site On the left column, click "Lists and Libraries" Click your list In the Forms section, click the New.. button Call your new form SimpleNewItemForm New item form Set as default form for the selected type (Yes/Checked) Click OK Click the form you just created, and a bunch of code will pop up Find the HTML code that places the form fields on the page - the table that these are contained in is probably around line 118 of the file Hide or delete the fields that you want to hide (ActualStartDate, ActualEndDate, EventTitleToDisplay) by using HTML comments to comment out the table rows that they are in. You can hide by enclosing sections of code in "<!--" and "-->" Each field will have a block of code, which should be contained between a <tr> and a </tr> - An example of what should be commented out is below Save your form Code to comment out Original file:

3 File with ActualStartDate, ActualEndDate, and EventTitleTodisplay hidden: If you visit your list and attempt to create a new item, your form should now look like this:

4 Create a workflow for your list Open SharePoint designer and connect to your list's parent site Lists and Libraries (on left pane) Click your list to open it's controls Workflows section Click New... Name your workflow something descriptive (like workflowcalculateeventtimes) and click OK Set up the workflow Step 1 Add three Set Workflow Variable Actions, and set them up as in the screenshot below. You will need to select "Create a new variable" for each, and set them up with the following data types: ActualStartDate (Date/Time) ActualEndDate (Date/Time) ShortenedPeriodName (String) When selecting a value, two buttons should show up, an ellipsis, and a "Fx" (function) button. Click the function button and a window will pop up allowing you to choose fields from the list. Do not just type in "CurrentItem:BookingDate", it will not work the way you expect. For ShortenedPeriodName, just type in the box "P0"

5 Step 2 Add a new Step. Using If Conditions for each period, customize the variables for each period. When selecting fields for the if condition, use the "Fx" function button to select the Period field from the list - do not just type in "Current Item:Period". Set the ShortenedPeriodName using the Set Workflow Variable action Set the start and end time using Set Time Portion of Date/Time Field actions.

6

7 Step 3: Write our variables to the object Now, using Set Field in Current Item Actions, we write the data from our variables back into the list item. When setting EventTitleToDisplay, use the ellipse button (3 dots) to open the "String Builder" dialog. Save your workflow Publish your workflow Set the workflow to run whenever a new item is inserted In Sharepoint Designer, click Lists and Libraries on the left pane Click your list to display it's settings

8 Click your workflow, on the right, in the Workflows section Check Start workflow automatically when an item is created Check Start workflow automatically when an item is changed Your calendar should now function, we just need to display it on a page somewhere. Create a calendar view for your list List Settings Create view (at the bottom of the page) Calendar View For this example, we are going to create a month view (where the viewer will see an entire month at a time) Give it a name that is descriptive, such as CalendarView_Month Check make this the default view (Yes/Checked) Time Interval Begin: ActualStartDate End: ActualEndDate Calendar Columns Month View Title: EventTitleToDisplay Week View Title: EventTitleToDisplay Day View Title: EventTitleToDisplay Leave Week view sub-heading and Day view sub-heading blank. Default Scope: Month Filter: Show all items Mobile Number of items to display in list view web part for this view: 99 Make a page for your calendar and create link for users to add new items With a normal calendar, you can hover your mouse over a date and an "Add" button will appear allowing you to create a new event. Since this isn't a normal calendar (its a custom list that we're simply displaying as a calendar), you won't get this "Add" button like you would expect. We'll need to create a link directly to the "New Item" form we created above. I would recommend using a Content Editor web part so that you can edit the HTML of the link manually. Your "create a booking" link's URL should be: URL_OF_YOUR_LIST/SimpleNewItemForm.aspx?Source=URL_TO_REDIRECT_TO_ONCE_SUBMITTED For example: /school/nbchs/booking/pages/library.aspx Example (with HTML to make the link look more like a button) <div style="text-align: right;"> <a href="url_of_your_list/simplenewitemform.aspx?source=url_to_redirect_to_once_submitted" style="padding: 25px; border-radius: 10px; color: #ffffff; text-transform: uppercase; fontweight: bold; text-decoration: none; background-color: #682a7a;"> Click here to book this room </a> </div>

9 Verify that it works the way you expect it to It will take a few seconds for new events to show up in the calendar view, because the workflow must run before the date and time is actually set up. Save your list as a template, so you can make copies of it List settings Save list as template Name it something descriptive and unique: "Booking Calendar with workflow" Make copies of your list for new calendars Once you've saved a template, it will now show up as an "App" that you can create wherever you want. The workflow should copy with it. If you want your app to show up on all school sites/portals, you'll need to copy it to the top-most List Template Gallery (how to do this exactly is beyond the scope of this article) Optional: Create a calendar to overlay all your booking calendars into Your individual calendars can be overlayed onto a "central" calendar, so that users can see an overview of multiple rooms. Keep in mind that a "Month" calendar view will typically only display 3 items before it hides them under a "more items" link. 1. Create a new calendar called something like "Booking Calendars Overlay" 2. Set the permissions on this calendars so that users cannot add events to the calendar a. this calendar is just a container for the others, and should never have any events of it's own. 3. Open the calendar, and click Calendars in View along the left 4. Add the calendar views of some/all of your booking calendars you've created above. Make sure you are selecting the "CalendarView_Month" views for the "List View" 5. Add HTML in a content editor web part with links to each booking calendar's "New item" form, for easier booking.

10