Clock App Availability and Shifts

From 3B Knowledge
Jump to navigation Jump to search

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.

List view availability

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"
                            }
                        ]
                    }
                }
            ],
    }
}