Pushing Podio

Fun Experiments pushing Citrix Podio to the limit so you can get more done.
... with a little help from GlobiFlow, ProcFu, and other friends ...

Creating a Booking Form App

- Posted in Uncategorized by

Having a website booking form with availability is an often requested feature.

This is what we're aiming for:

http://groovy.globi.ca/img/20200130-1e01e349cea2f743f8863b47031b3d32.gif

It's now possible and super easy to build this using ProcFu's mini apps. Here's how ...

Podio Bookings App

In Podio we need a Bookings app with a date field. The date field should have time enabled, but end date disabled. It should also be set to show up in calendars

For this example, I'm also adding a text field for the person's name, and an email field for their email address. Naturally, you can have as many fields as you want and/or need.

http://groovy.globi.ca/img/20200130-3704b4baaef7383b379d8fd2fb5bad25.png

We'll also need the ical feed of this calendar. You can get from from App Settings > Add to calendar > iCal > Calendar URL.

http://groovy.globi.ca/img/20200129-ca8f9312b481695b8742552fc8a5ab69.png

http://groovy.globi.ca/img/20200129-c75f312f06bfc2e08d6801ded3857a5c.png

The Mini App

For the mini app for this booking system, we'll set the authentication to "None". Note that this is super dangerous for most mini apps because it gives full access. However, since we're only allowing the creation of a booking, it's safe here.

http://groovy.globi.ca/img/20200130-5fdcfe5b31f2c055fbad000d773ffe85.png

Now we'll work backwards.

When someone completes a booking, we'll need a simple confirmation screen.

http://groovy.globi.ca/img/20200130-d7a2adb93664291a64489f3ba363e53f.png

We'll also need a screen to create a new booking, which on submit goes to the confirmation screen.

http://groovy.globi.ca/img/20200130-4f2d5d9a77a5d5e06c05c5aa3463b25e.png

There are a few tricks employed here, working with the "@[pf_datepicker]" token, which will contain the date and time of the last date picker event (coming in the next screen).

We pre-fill the date field with "@[pf_datepicker]" and hide it from the user.

In the header, we include the date and time they selected, but instead of boring "yyyy-mm-dd hh:mm:ss", we use javascript for format it. The code is:

<script>
  var date = new Date("@[pf_datepicker]").toString();
  //date = date.split("(")[0];
  document.write("<h3>Confirm your Booking for:<br>"+date+"</h3>");
</script>

Lastly, we'll need a date picker screen to let users pick a date and time, which on submit goes to the booking creation screen.

http://groovy.globi.ca/img/20200130-8ec469755c70448f28384912b7ce31b1.png

To explain some of the settings above:

  • Daily Hours is the hours you want to be available, eg "08:00-17:00" or "09:00-12:00,14:00-17:30" etc
  • The Availability Interval determines the granularity of start times. Eg, at 30 mins, users will be able to select 09:00, 09:30, etc. At 1 hour, they will only be able to select 09:00, 10:00, etc.
  • The Booking Size is the length of the booking to be made.
  • Block Weekends prohibits users from selecting Saturdays, Sundays, or Both
  • The Busy Calendar ICAL feed is the URL of the Podio calendar you retrieved earlier. This tells the app which times are taken, and therefore no bookings can be made to fall in these busy times. Note that you can provide multiple ical feeds separated by commas (eg if you want to also exclude any times from your personal Google Calendar, etc).

All that's left now is to tell the mini app to start at the date selection screen.

http://groovy.globi.ca/img/20200130-a789843503d4c593bc38f6ed81dbb393.png

The End Result Booking Mechanism

The result is a nice and simple booking app that let's users select a time from the calendar and book, but not select any times which are already busy.

http://groovy.globi.ca/img/20200130-1e01e349cea2f743f8863b47031b3d32.gif

Comments