Flow Tool Kit | Calendar & Scheduling Component
Salesforce Admins and Developers, get ready to elevate your scheduling solutions with a new dynamic component available within the Flow Tool Kit, a FREEMIUM! advanced form builder interface designed to take your Flow screen solutions to the next level.
What is the “Form (Calendar/Scheduler)” component?
This custom Flow screen component enhances your Flows by allowing users to select, manage, and visualize date-centric records through an intuitive and visually engaging calendar interface. Whether you’re scheduling appointments, managing events, or tracking deadlines, this component is versatile enough to handle various use cases.
Use Cases
Custom Scheduling Solutions:
Tailor the component to create bespoke scheduling experiences, from booking meetings to managing resource allocations.
Displaying Availability:
Quickly show when resources or personnel are available, streamlining the scheduling process without the need for external tools.
Key Features
Dynamic Record Grouping:
Pass in any collection of records, and the component will organize and group them by date and time. The only prerequisite? Each record must have a populated datetime field.
Monthly Calendar View:
Visualize records through a clear and concise monthly calendar interface. Days or dates with related records are highlighted, making it easy to identify available dates at a glance.
Time Selector Blocks:
Upon selecting a valid date, a column of time blocks will appear next to the calendar. Each block represents and displays a record’s time value. This allows for quickly selecting one or more time slots based on your solutions’ requirements.
Flexible Object Integration:
This component can be used with any Salesforce object with a Datetime field.
Visual Tracking and Easy Adjustments:
Pill badges represent each selection under the calendar. This allows users to view and adjust their choices across different days and months without losing track of their current schedule.
Customize the User Experience
Admins and Developers can control some key UX features within the component’s custom property editor. This enables your team to control how users interact with the calendar and how the calendar interacts with other components within your flows.
Calendar Properties
Calendar Label/Title:
By default, the calendar label is “Select a Date and Time.” This can be overridden by passing in any text template variable.
Override Selected Start Date:
By default, the earliest datetime value within the record collection will be selected automatically. If you have a record with a value from two months ago, that month will be the month displayed within the calendar, and that date will be selected when the Flow loads. This can be overridden by passing in any date variable, including the CurrentDate.
Hide Calendar on Selection:
When this parameter is enabled, the calendar will be hidden after a user selects a date within the calendar. The user will then only see available time blocks. A back arrow allows users to toggle the calendar back on to change the date within the calendar.
Time Selector Properties
Maximum Selection
Limit the number of records that a user can select within the calendar by setting the maximum selection parameter. This limit can be set between 1 and 100. Note: the UX of time selectors changes depending on whether this parameter is set to 1 or something greater. When the maximum is set to 1 (default), a User can select a time block and change the selection by selecting a different one. When the maximum limit is set to a value greater than 1, once the limit is reached, all other selectors are toggled off, preventing further selection. A User would need to deselect one of their prior selected values to change or select a new time block.
Required:
Toggling the required parameter forces your users to select at least one record. This prevents the flow from navigating forward until a selection is made.
Navigate on Select:
After enabling this parameter, when a user selects a time block, the Flow automatically navigates to the next screen or flow element.
Hide selected record pill(s):
Enabling this parameter will hide the pill badges displayed below the calendar.
Hide Time Selectors:
Enabling this parameter will hide the time selector blocks, preventing users from selecting records. This is typically used when integrating the component with other Flow screen components like the Form (Repeater). See the advanced solution demo for an example.
Advanced Time Selector Properties
Leverage these optional parameters to override the default display/UX for the time selectors within the component. By default, the time selectors display the time and time zone values formatted to the running browser’s LOCALE. Admins can override the default display value and background theme and disable specific time selectors by mapping fields from the related records.
Selector Label Override | FieldApiName
Functionality:
Select a field on the related object to override the default display value within the time selector blocks. By default, time blocks display the time value in the user’s local time. You can override this with field values from the same record. For example, Configure a formula field and assign it here to display additional information, such as remaining capacity, total duration, or end time.
Use Case:
Enhance clarity by showing critical information directly within each time block, making it easier for users to make informed choices. The example below shows a time block as “Full/Waitlisting” so users understand that they will be added to a waitlist.
Disabled | FieldApiName
Functionality:
Select a field, typically a Boolean formula field, on the related object. If this value on the related record is true, then the corresponding time block will be displayed but greyed out, preventing selection.
Use Case:
Effectively display fully booked or unavailable time slots without allowing further selections, thereby preventing overbooking and managing user expectations.
Theme | FieldApiName
Functionality:
Select a field, usually a String formula field, on the related object to dynamically change the background or theme colors of time blocks using a custom list of CSS classes. Note: You can use LDS Themes or custom style sheet classes.
Use Case:
Highlight featured time blocks, such as VIP slots or priority services, or create visual groupings based on record attributes, thereby enhancing the visual experience and making the calendar more intuitive.
Integrating with Your Flows
Once a date and time are selected, the “Form (Calendar/Scheduler)” component returns the selected records and other useful outputs. Then, you can incorporate these records into any part of your Salesforce Flow, ensuring seamless integration into your broader business processes. All of these outputs are reactive, enabling your team to integrate this component with other components on your Flow screen.
Selected Record(s) Collection | selectedRecords:
This output returns all of the selected records, with all populated fields included.
First Selected Record | firstSelectedRecord:
This output returns the first selected record, with all its populated fields included.
Active Record(s) Collection | currentActiveRecords:
When a date is selected, this parameter returns a collection of all records associated with that date. Combine this output with Flow reactivity to extend this component by incorporating other Flow screen components such as the Flow Tool Kit’s Datatable and/or Repeater.
Has Selection | hasSelection:
Returns true when at least one selection is made. Use this reactive output for additional validation or to toggle the visibility of other components within the Flow screen. Therefore, we like using this parameter to disable Flow Tool Kit buttons, preventing users from clicking next until a record is selected.
Total Records Selected | totalRecordsSelected:
No need to add an assignment element to count total selected records, we do that for you and return the value within this live reactive output.
Selected Id(s) Collection | selectedRecordIds:
This output returns a string collection of all selected record IDs. This is useful for querying related records via the IN operator.
Selected DataTime(s) Collection | selectedRecordDates:
This output returns a Datetime collection of all selected datetime values.
Quick Start Overview
Conclusion
You can install the “Form (Calendar/Scheduler)” component and the Flow Tool Kit from the Salesforce AppExchange. If you find this solution useful, we invite you to share your feedback and reviews on the listing page. We are always grateful for any feedback. If your team requires support with implementing flow-based solutions like this, reach out. Our team can help with design, implementation, or Flow coaching.
💥 Join our weekly office hours
💯 More Demoes and How-to videos
🙌🏼 Learn More about the Flow Tool Kit 🧙♂️⚡️
Explore related content:
How to Improve Your Flows Using the Flow Analyzer
Integrating the New Flow Action Button From Summer ’24
How to Use the Data Table Component in Screen Flow
Is this component still available? I wasn’t able to find it on the appexchange unless it’s part of another package.