A Slot Booking component allows users to select a slot for an event or service based on predefined schedules. It handles hierarchical selections (e.g., group type → group → time → seats) and validates the number of seats.
{
"key": "slotbooking",
"type": "customslotbooking",
"props": {
"label": "Title",
"scheduleId": "986127a2-c0a4-4e3a-83d2-6e6bee8f76d7",
"configs": [
{
"key": "groupType",
"type": "customdropdown",
"label": "Group Type",
"required": true,
"bindlabel": "name",
"bindvalue": "",
"placeholder": "Select Group Type",
"requiredErrorMessage": "Required"
},
{
"key": "group",
"type": "customdropdown",
"label": "Group",
"parent": "groupType",
"required": true,
"bindlabel": "name",
"bindvalue": "",
"placeholder": "Select Group",
"requiredErrorMessage": "Required"
},
{
"key": "timeRange",
"type": "customdropdown",
"label": "Time",
"parent": "group",
"required": true,
"bindlabel": "name",
"bindvalue": "",
"placeholder": "Select Time Range",
"requiredErrorMessage": "Required"
},
{
"key": "seats",
"type": "number",
"label": "Seats",
"parent": "timeRange",
"required": true,
"placeholder": "Select Seat",
"isSeats": true,
"maxSeatErrorMessage": "Max seats error",
"minSeatErrorMessage": "Min seat error",
"numbersOnlyErrorMessage": "Numbers only"
}
]
},
"validation": {
"messages": {
"invalidSlot": "Invalid slot"
}
}
}
Hierarchical Selection
Seat Validation
isSeats: true ensures that only valid seat numbers are accepted.Customizable Labels & Placeholders
Dynamic Expressions & Defaults
Validation
invalidSlot validation.UI Settings
{
"key": "2slotbooking0r4iF",
"type": "customslotbooking",
"props": {
"label": "2Slot booking",
"scheduleId": "797b2ee2-1a2d-4868-a348-1255745ae929",
"configs": [
{
"key": "groupTypeoVTeC",
"type": "slot_booking_customdropdown",
"label": "Group Type foreign",
"hidden": true,
"required": true,
"bindlabel": "name",
"bindvalue": "id",
"placeholder": "Select Group Type",
"defaultValue": "bb4f8d9d-d0b5-4ea2-9d2a-8292e58cf44c",
"requiredErrorMessage": "This field is required"
},
{
"key": "groupoVTeC",
"type": "slot_booking_customdropdown",
"label": "Group foreign",
"parent": "groupTypeoVTeC",
"required": true,
"bindlabel": "name",
"bindvalue": "id",
"placeholder": "Select Group",
"defaultValue": "0fde7874-3e18-4110-aac3-7abc5d0b40e5",
"requiredErrorMessage": "This field is required"
},
{
"key": "timeRangeoVTeC",
"type": "slot_booking_customdropdown",
"label": "Time foreign",
"parent": "groupoVTeC",
"required": true,
"bindlabel": "name",
"bindvalue": "",
"placeholder": "Select Time Range",
"requiredErrorMessage": "This field is required"
},
{
"key": "seatsoVTeC",
"type": "number",
"label": "Seat foreign",
"hidden": true,
"parent": "timeRangeoVTeC",
"isSeats": true,
"maxSeats": 1,
"required": true,
"placeholder": "Provide seats",
"defaultValue": 1,
"maxSeatErrorMessage": "Maximum seats exceeded",
"minSeatErrorMessage": "Invalid seat number",
"requiredErrorMessage": "This field is required",
"numbersOnlyErrorMessage": "Numbers only"
}
]
},
"validation": {
"messages": {
"invalidSlot": "Invalid slot"
}
}
}
invalidSlotinvalid