Booking
Refer to Stockport Design System for book pattern styling information and reference images
NOTE: Booking element requires a page with a page-slug of no-appointment-available
. This page must exisit with the Pages array for when a appointment type currently has no available appointments within the booking search period, this page is displayed.
Example no-appointment-available json
{
"Title": "We're sorry, there are no available appointments",
"PageSlug": "no-appointment-available",
"DisplayBreadcrumbs": true,
"HideBackButton": true,
"Elements": [
{
"Type": "H2",
"Properties": {
"Text": "Why not?"
}
},
{
"Type": "p",
"Properties": {
"Text": "There are currently no online appointments available."
}
},
{
"Type": "H2",
"Properties": {
"Text": "What you can do next"
}
},
{
"Type": "p",
"Properties": {
"Text": "Please email ##### to book your ####."
}
},
{
"Type": "link",
"Properties": {
"Text": "Go to the homepage",
"Url": "https://www.stockport.gov.uk",
"ClassName": "govuk-button"
}
}
]
}
NOTE: Reservation endpoint requires customer contact details, this implies that there are elements within the forms json which map to customer.firstname, customer.lastname, customer.email additionally customer.address and customer.phone can be supplied but are optional (more info about target mapping).
Property | Type | Required | Default Value | Description |
---|---|---|---|---|
QuestionId | string | ✔️ | ❌ | Unique question id allowed charatcers are [a-zA-Z] only |
Label | string | ✔️ | ❌ | Label associated with the question |
BookingProvider | enum | ✔️ | ❌ | Only one type of 'Booking provider' can be used on a form. Booking provider used for booking data (Current List of Providers) |
AppointmentTypes | Array[AppointmentType] | ✔️ | ❌ | Contains a list of objects for each env which contains the UniqueId for Appointment type, the Env and any optional resources.Appointment Types and optional resources info. The response the BookingProvider recieves determins if the appointment is a fullday appointment or requies the time selection to be shown. (Current list of fake ids to test on local) |
CheckYourBooking | bool | ❌ | false | Displays check your booking page after booking date/time selection if enabled |
NextAvailableIAG | string | ❌ | This is the next available appointment | IAG which is displayed when the next available appointment is not within the current month |
SearchPeriod | int | ❌ | 12 | Specified the Time in months into the future an appointment can be booked. i.e. 3 will allow a search period of this month plus 3 additional months. 0 would allow booking only for this month. The default is 12 months in advance |
LabelAsH1 | bool | ❌ | false | Display Label as h1 not a label (if this is set to true, HideTitle in the Page properties should also be set to true) |
Warning | string | ❌ | ❌ | Warning which appears above the input NOTE: Only use one of Warning, Hint or IAG |
Hint | string | ❌ | ❌ | Hint which appears above the input NOTE: Only use one of Warning, Hint or IAG |
IAG | string | ❌ | ❌ | Inset text to appear below the Label. NOTE: Only use one of Warning, Hint or IAG |
TargetMapping | string | ❌ | ❌ | Used for custom object mapping when creating submit data (more info about target mapping) |
CustomValidationMessage | string | ❌ | ❌ | Custom validation message to override the default |
NoAvailableTimeForBookingType | string | ❌ | appointments | Custom warning message to override the default 'appointment' text |
CustomerAddressId | string | ❌ | ❌ | The QuestionId of the element capturing the customer address to be used for the booking. If not provided, no address will be populated in the booking |
SummaryLabel | string | ❌ | ❌ | Change the label associated with this input on the summary |
AutoConfirm | bool | ❌ | false | Enable form builder to confirm a booking |
LimitNextAvailableByDays | int | ❌ | 0 | Delay the first available appointment by x days |
LimitNextAvailableFromDate | string | ❌ | ❌ | The date from which to add the LimitNextAvailableByDays value, can be a hard coded string date or a reference to an earlier question using Tag Parser. Note: if the date question is optional or only on certain journeys, you will need a separate booking page |
{
"Type": "Booking",
"Properties": {
"QuestionId": "booking",
"Label": "Select a date and time",
"LabelAsH1": true,
"BookingProvider": "Fake",
"AppointmentTypes": [
{
"Environment": "env",
"AppointmentId":"000000000000-0000-0000-0000-000000000000",
"OptionalResources": [
{
"ResourceId": "000000000000-0000-0000-0000-000000000000",
"Quantity": 1
}]
}
],
"CheckYourBooking": true,
"SearchPeriod": 3,
"CustomerAddressId": "address"
}
}
The AppointmentTypes array will need to include 'AppointmentIdKey' field to match the question id to retrieve the element appointment id value.
Property | Type | Required | Default Value | Description |
---|---|---|---|---|
AppointmentIdKey | string | ❌ | ❌ | Id to match to Question Id |
{
"Type": "Booking",
"Properties": {
"AppointmentTypes": [
{
"Environment": "int",
"AppointmentIdKey": "{questionid}"
}
]
}
}
- Availability
- Actions
- Behaviours
- Breadcrumbs
-
Conditions
- String Conditions
- Date Conditions
- Integer Conditions
- File Upload Conditions
- Custom validation
-
Elements
- AddAnother
- Address
- Button
- Booking
- Checkbox
- Date Input
- Date Picker
- Declaration
- Document Download
- Document Upload
- File Upload
- H1-H6
- HR
- Image
- Inline Alert
- Link
- Map
- Multiple File Upload
- OrderedList
- Organisation
- P
- Radio
- Select
- Street
- Summary
- Success page
- Textarea
- Textbox
- Time input
- Unordered List
- Uploaded files summary
- Warning
- EnabledFor
- Feedback form
- File uploads
- Form Schema
- Header
- Inbound Values
- Integrating with PowerAutomate/0365
- Lookup
- Page
- Payment & Payment calculations
- Preview data structure
- Render conditions
- Reusable elements
- Structure tests
- Success page
- Tag parsers
- Target mapping
- Validators