Splitting a Time Block into Appointments Using Lightning Forms
This guide walks you through how to configure a SharePoint form using Lightning Forms so that when a user saves a time block (e.g., 09:00 to 11:00), it automatically creates multiple appointments based on a specified duration (e.g., 30 minutes). This setup is ideal for booking systems where appointments need to be broken up into multiple fixed-length slots.
Before You Begin
This guide assumes that you are already familiar with the basics of using Lightning Forms, including:
- How to open Lightning Forms for a list
- How to configure actions on the Save button
- How to open the Expression Builder
If you are new to Lightning Forms, we recommend reviewing the official documentation or contacting your internal administrator before proceeding.
⚠️ When using JavaScript in Expression Builders, make sure to paste your code in the Function area (not the text or assignment fields). This ensures the expression is executed correctly.
1. List Setup
Appointment Block List (e.g., `Appointment Blocks`)
This is the list where your users will enter the overall time block.
Required Fields:
- StartTime (Date & Time) – when the block begins
- EndTime (Date & Time) – when the block ends
- DurationMinutes (Number) – the length of each appointment
- Category (Choice) – the type of appointment
- LastEndTime (Single line of text) – used internally for calculations; hide from the form
Appointments Calendar List (e.g., `Appointments`)
This list will receive the individual appointment items.
Required Fields:
- Title (Text) – stores the category
- Start (Date & Time)
- End (Date & Time)
2. Configure the New Form (Lightning Forms)
Go to the `Appointment Blocks` list, open Lightning Forms, and select the New Form. Then configure the Save button actions as follows.
3. Save Button Actions
Action 1: Save the Form
Type: Save Modern Form -
No configuration needed.
Action 2: Add First Appointment
Type: Add List Item
List: Appointments
Fields to populate:
- Title: [[Category]]
- Start: [[StartTime]]
- End:
var start = new Date([[StartTime]]);
var duration = [[DurationMinutes]];
var end = new Date(start.getTime() + duration * 60000);
var pad = n => (n < 10 ? '0' + n : n);
return pad(end.getMonth() + 1) + '/' + pad(end.getDate()) + '/' + end.getFullYear() + ' ' + pad(end.getHours()) + ':' + pad(end.getMinutes());
What this does: Calculates the end time for the first appointment by adding the specified duration to the starting time.
Action 3: Set LastEndTime
Type: Set Form Field
Field: LastEndTime
Value: (Same code as above)
Why: This stores the end time of the first appointment, which becomes the start time of the next one.
Action 4: Condition – Is More Time Available?
Type: Condition
Condition:
return new Date([[LastEndTime]]).getTime() < new Date([[EndTime]]).getTime();
Why: Only continue creating appointments if there's still time left in the block.
Inside the Condition – Repeat These Steps:
Repeat the following 3 steps (Add List Item, Set Form Field, Condition) for each potential appointment. Typically 3–5 repetitions are enough depending on how large your appointment blocks are, just make sure to close the form on each No, and at the end of the final Yes
A. Add Another Appointment
- Start: Calculated from LastEndTime:
var start = new Date([[LastEndTime]]);
var pad = n => (n < 10 ? '0' + n : n);
return pad(start.getMonth() + 1) + '/' + pad(start.getDate()) + '/' + start.getFullYear() + ' ' + pad(start.getHours()) + ':' + pad(start.getMinutes());
- End:
var start = new Date([[LastEndTime]]);
var duration = [[DurationMinutes]];
var end = new Date(start.getTime() + duration * 60000);
var pad = n => (n < 10 ? '0' + n : n);
return pad(end.getMonth() + 1) + '/' + pad(end.getDate()) + '/' + end.getFullYear() + ' ' + pad(end.getHours()) + ':' + pad(end.getMinutes());
B. Set Form Field – LastEndTime
Use the same code as for End above.
C. Condition – Repeat?
Use the same condition again:
return new Date([[LastEndTime]]).getTime() < new Date([[EndTime]]).getTime();
Repeat these 3 steps until you’ve accounted for the full time blocks you'd like to support.
4. Why JavaScript is Used
All JavaScript is placed inside calculated value fields directly within the Lightning Forms UI. This code simply:
- Converts the user's StartTime into a Date object
- Adds the specified duration
- Formats the result into a readable date/time string
No external scripts or advanced programming is needed - it runs safely inside the form and only performs local date/time math.
5. Final Result
When a user fills out a time block (e.g., 09:00–11:00, 30 min slots), the system will automatically create multiple appointments in your calendar list:
- 09:00–09:30
- 09:30–10:00
- 10:00–10:30
- 10:30–11:00
This setup works with any time range, not just 09:00–11:00. For example:
- A block from 13:15 to 15:45 with 45-minute appointments will result in:
- 13:15–14:00
- 14:00–14:45
- 14:45–15:30
- A shorter block from 08:20 to 09:10 with 25-minute slots will produce:
- 08:20–08:45
- 08:45–09:10
You can confidently use this setup for any length of time block and appointment duration.
For more help, contact our customer success team via help@lightningtools.com