Im trying to customize the UI for the Walkup Experience, Appointment Booking Widget. Ive been able to show the window on the button by editing the HTML, however id also like to display the number of available slots for each window. i cant figure out how to get this information. has anyone done this???
this is what it looks like now:
Id like it to look something like this:
Ok so my requirement changed, we are now using multiple different time slots per location so i had to start over from scratch since my original method only allowed one set of window times per location, this new method lets you setup for a location between these dates/times to have its specific window and slots per window, you can grow this to many different slots per day/week/month/season etc...
the result will look something like this:
to allow for this, the location needs to have the enable day level configuration activated...
you can do this by going to Appointment Booking -> Appointment Booking Configuration - Walk-up Experience and from the related list Appointment Booking Service Configuration, add/edit a location.
check the box for Enable Day level configuration (if you dont see this, ensure your view is set to default).
Once enabled a new related list will display allowing you to setup the custom schedule you want to create. (note, my script does not use the bookable days function as of yet, if i add this functionality, i will add a new post here)
Widget: Appointment Booking
For server script i adjusted the original code to allow for the original intent or the new (this is to replace the code originally indicated it should be inserted around line 12:
//get max number of appts per window from config table, table has only 1 record, so query and grab the data
var bookingSlots = new GlideRecord('wu_location_queue');
bookingSlots.addQuery('sys_id', location_id);
bookingSlots.query();
while(bookingSlots.next()){
data.daySchedule = bookingSlots.appointment_booking.enable_day_level_config;
//if no day schedule is enabled just take the one slot for the location
if(!data.daySchedule){
data.bookingSlotsTotal = parseInt(bookingSlots.appointment_booking.appointments_per_bookable_slot);
}
//if a day schedule has been configured grab it and store each record as a JSON within an array to be passed to client to be evaluated
else{
data.bookingSchedule = [];
data.dayLevelSysId = bookingSlots.appointment_booking.sys_id;
var gr = new GlideRecord('sn_apptmnt_booking_day_configuration');
gr.addQuery('service_configuration', data.dayLevelSysId);
gr.addQuery('active',true);
gr.query();
var j = 0;
var str2 = "{";
var length = gr.getRowCount();
while(gr.next()){
var str = {"name" : gr.name.getDisplayValue(), "start_date" : gr.start_date.getDisplayValue(), "end_date" : gr.end_date.getDisplayValue(), "daily_start_time": gr.daily_start_time.getDisplayValue(), "daily_end_time" : gr.daily_end_time.getDisplayValue(), "appointments_per_bookable_slot" : gr.appointments_per_bookable_slot.getDisplayValue()};
var parser = new global.JSON();
var JSONObject = parser.encode(str);
data.bookingSchedule.push(JSONObject);
}
data.bookingSlotsTotal = "";
}
}
Adjust the client script:
for the entry around line 10, change it to:
var appts = c.data.appts;
var availAppts ;
var length = appts.length;
var dayLevelID = c.data.dayLevelSysId;
var totalApptsAllowed = c.data.bookingSlotsTotal;
var bookingSchedule = c.data.bookingSchedule;around line 350 update the actualWindow.slots to be:
actualWindow.slots = findAppt(reformatDate(window.start_date),appts, actualWindow.start);replace the findAppt function with my new function:
function findAppt(date, apptsObj, startTime){
var count = 0
if(length > 0){
for(var aa=0; aa < length; aa++){
if(apptsObj[aa] == date){
count++
}}}
if(!c.data.daySchedule){
availAppts = totalApptsAllowed - count;}
else{
availAppts = 10;
var lookupsysid = c.data.dayLevelSysId;
var windowD = date.split(" ");
var windowDate = windowD[0];
var a = 0
while(a<bookingSchedule.length){
var value = bookingSchedule[a];
var test = JSON.parse(value);
if((windowDate < test.end_date && windowDate > test.start_date)){
if(test.daily_start_time <= startTime && test.daily_end_time >= startTime)
availAppts = test.appointments_per_bookable_slot - count;
}
a++;
}
}
return availAppts;
}For the html, i wanted to see the window start/end times so i modified the appointmentWindow.start from my original post where i see div class="content" to:
{{appointmentWindow.start}} - {{appointmentWindow.end}}<br>{{appointmentWindow.slots}} Availablegood luck, and if anyone takes the time to develop the day of the week level configuration let me know, otherwise itll be my next stab at this project.
