Clock App Availability and Shifts
Intro
In version 8.106, we replace the calendar view type for Shifts and Availability in the mobile app, for the more versatile list view type.
This change allows us to be more flexible in how we display shift schedules and availabilities and adds the following features
- We can now display shifts and availability per day, week or month
- We now support adding filters to both Shifts and Availability (see filtering, below)
- We are paving the way to a multi-day availability scheduling interface
Decorations
With this change, we can now define decorations for availabilities, e.g.:
{
...
"request": {
...
"decorations": [
{
"name": "request-unavailable",
"condition": {
"allOrSome": "all",
"selectors": [
{
"field": "b3s__Type__c",
"operator": "equals",
"value": "Unavailable"
}
]
},
"icon": {
"svg": "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5' /><path d='M17 11.5a1.5 1.5 0 0 1 3 0v4.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47' /><path d='M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5' /><path d='M14 5.5a1.5 1.5 0 0 1 3 0v6.5' /></svg>"
},
"title": {
"literal": "Unavailable"
}
},
{
"name": "request-available",
"condition": {
"allOrSome": "all",
"selectors": [
{
"field": "b3s__Type__c",
"operator": "equals",
"value": "Available"
}
]
},
"icon": {
"svg": "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-accessible'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /><path d='M10 16.5l2 -3l2 3m-2 -3v-2l3 -1m-6 0l3 1' /><path d='M11.5 7.5a.5 .5 0 1 0 1 0a.5 .5 0 1 0 -1 0' fill='currentColor' /></svg>"
},
"title": {
"literal": "Available"
}
}
], ...
}
}
Background
You can now define a background to the shift view. Simply add a background property to a shift like so:
{
"shift": {
"background": {
"match": {
"field": "b3s__Specialty__c",
"equals": {
"Obstetrics": {
"literal": "bg-fuchsia-50"
}
},
"otherwise": {
"literal": ""
}
}
},
}
}
Upgrade Instructions
Record Dates
Since previously we used a calendar style for displaying shifts and availability, the date of the record was automatically displayed on the box. With this change in version 8.106, the record will no longer have a date, so you need to add it manually, e.g.:
{
"request": {
....
"title": [
{
"label": "Times",
"fieldPath": "b3s__Start__c:b3s__End__c",
"formatter": "startEndWithDate",
"siteTimezoneFieldPath": "b3s__Contact__r.b3s__Timezone__c",
"hideIfNull": false
},
{
"label": "Comments",
"fieldPath": "b3s__Comments__c",
"hideIfNull": true
}
]
},
"shift": {
...
"title": [
{
"label": "Scheduled Times",
"fieldPath": "b3s__Scheduled_Start_Time__c:b3s__Scheduled_End_Time__c",
"formatter": "startEnd",
"siteTimezoneFieldPath": "b3s__Site__r.b3s__Site_Timezone__c",
"hideIfNull": false
},
{
"label": "Actual Times",
"fieldPath": "b3s__Actual_Start_Time__c:b3s__Actual_End_Time__c",
"formatter": "startEnd",
"siteTimezoneFieldPath": "b3s__Site__r.b3s__Site_Timezone__c",
"hideIfNull": true
},
{
"label": "Job",
"fieldPath": "b3s__Job__r.Name",
"hideIfNull": true
},
{
"label": "Site",
"fieldPath": "b3s__Site__r.Name",
"hideIfNull": true
},
{
"label": "Location",
"fieldPath": "b3s__Site__r.b3s__Site_Location_Link__c",
"hideIfNull": true
},
{
"label": "Comments",
"fieldPath": "b3s__Comments__c",
"hideIfNull": true
}
],
}
}
Filtering
You can add a filtering view component to shifts, expenses and availability by defining a "filters" array like so:
{
"shift": {
...,
"filters": [
{
"label": "Job",
"type": "reference",
"value": {
"labelField": "b3s__Shift__r.b3s__Job__r.Name",
"valueField": "b3s__Shift__r.b3s__Job__c"
}
},
{
"label": "Site",
"type": "reference",
"value": {
"labelField": "b3s__Shift__r.b3s__Site__r.Name",
"valueField": "b3s__Shift__r.b3s__Site__c"
}
},
{
"label": "Type",
"type": "select",
"value": {
"valueField": "b3s__Shift__r.b3s__Type__c",
"options": [
{
"label": "Day",
"value": "Day"
},
{
"label": "Night",
"value": "Night"
},
{
"label": "On-Call",
"value": "On-Call"
},
{
"label": "Swing",
"value": "Swing"
}
]
}
}
],
}
}