Shift Notes Reference

The Shift Notes component provides an interface for employees to create and view notes related to their shifts in real time.

ShiftNotes showing notes interface showing notes for the current shift

The ShiftNotes component allows employees to document important information during their shifts, visible to managers and for compliance purposes.

Basic Implementation

To get started with shift notes, Make sure features: { shiftNotes: true } is active on your Provider.

iframe

React

React Native

The ShiftNotes component is automatically included in the Clock iframe component and will appear when activated through the UI if the relevant features flag is turned on.

State

The ShiftNotes component appears as a full-screen overlay. It automatically retrieves and displays previously entered notes for the current shift.

The best practice is to display the shift notes screen only during an existing shift

Notes entered by employees will be visible to managers in timesheet reviews and can be used for compliance documentation.

Component Properties

Property	Type	Required	Description
`onEvent`	`() => void`	No	Callback for standard events.

Events

The ShiftNotes component emits the following events:

Event	Description
`onNoteAdded`	Triggered when a note is submitted. Provides the note text as a parameter.
`onNoteDeleted`	Triggered when a note is deleted.

Theme Elements

Element Name	Type	Properties	Description
`emptyStateBanner`	`Container`	`text`, `borderWidth`, `borderColor`, `borderRadius`, `padding`, `backgroundColor`, `icon`	Styles the empty state banner shown when no notes exist.
`addNoteForm`	`Container`	`borderWidth`, `borderColor`, `borderRadius`, `padding`, `backgroundColor`	Styles the area that wraps the form button and input area at the bottom.
`addNoteFormTextArea`	`Textarea`	`text`, `width`, `borderWidth`, `borderColor`, `borderRadius`, `backgroundColor`	Styles the text input area for entering notes.
`addNoteFormButton`	`Button`	`size`, `padding`, `borderRadius`, `borderWidth`, `borderColor`, `backgroundColor`, `icon`	Styles the add note button with enabled/disabled states.
`noteElement`	`Container`	`borderWidth`, `borderColor`, `borderRadius`, `padding`, `width`, `backgroundColor`	Styles the container that wraps the content of individual notes.
`noteAuthor`	`Text`		Styles the author name text (e.g., "Me").
`noteText`	`Text`		Styles the content text of each note.
`actionThreeDots`	`Icon`	`color`, `size`	Styles the three dots menu icon that can appear in notes and other places in the app.
`noteDate`	`Text`		Styles the date/time text for each note.

For a comprehensive overview of UI customization options and to learn more about theming across all components, please see our UI Customization Introduction article.

Custom Strings

Custom strings allow you to override any of the texts on the component with your own texts.

Custom Strings are currently in beta.

String Key	Default Value	Description
`emptyStateBannerText`	"Share notes with your manager..."	Text displayed in the empty state banner when no notes exist.
`addNoteFormTextAreaPlaceholder`	"Write your note here"	Placeholder text for the note input when empty.
`noteAuthorMe`	"Me"	Text displayed for the current user's notes.

Compliance Requirements

In certain industries, shift notes are required for compliance reasons:

Healthcare documentation

Security incident reporting

Safety protocol adherence

Quality assurance logs

By default, employees cannot edit or delete notes after being submitted.

💡

ShiftNotes entries are automatically timestamped and associated with the employee's current shift, making them valuable for audit trails and compliance documentation.

Basic Implementation#

State#

Component Properties#

Events#

Theme Elements#

Custom Strings#