Settings Reference

The Settings component provides a centralized interface for configuring workforce management features, including time tracking rules, team permissions, geolocation requirements, and break management.

Settings interface showing configuration options

Basic Implementation

iframe

React

React Native

Configurable settings

Feature Configuration

The Settings component allows showing and hiding of feature sections based on your use case. For example in an iframe implementation use-case, use these URL parameters:

Bring Your Own Settings

The component is designed as a plug and play experience into your existing settings page. However, if you'd like to manage some or all settings on your side, please contact our dev team for instructions.

Component Properties

Property	Type	Required	Description
`onSave`	`(settings: SettingsData) => void`	No	Callback when settings are saved. Use this to validate and store the details on your side.
`features`	`FeatureConfig`	No	Feature enablement configuration.
`initialSettings`	`SettingsData`	No	Initial settings state.

Theme Elements

Element Name	Type	Properties	Description
`settingsTeamWrapper`	`Container`	`gap`, `backgroundColor`, `padding`	Styles the container for team member listings.
`settingsTeamAvatar`	`Image`	`borderWidth`, `borderColor`, `borderRadius`	Styles the team member avatar images.
`settingsTeamName`	`Text`		Styles the team member name text.
`settingsTeamRole`	`Text`		Styles the team member role/position text.
`settingsTeamSeparator`	`Divider`	`color`, `height`	Styles the separator lines between team members.
`switches`	`Component`	`trackUnchecked`, `trackChecked`, `thumb`	Styles toggle switches throughout settings.
`settingsActionButton`	`Button`	`backgroundColor`, `borderRadius`, `borderWidth`, `borderColor`	Styles action buttons in settings screens.
`breakTypePicker`	`Container`	`backgroundColor`, `borderRadius`, `padding`	Styles the break type selection interface.
`breakTypeName`	`Text`		Styles break type names in settings.

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 allows 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
`settingsTitle`	"Settings"	Page title.
`settingsTimeTrackingSection`	"Time Tracking"	Time tracking section header.
`settingsTeamSection`	"Team"	Team section header.
`settingsGeolocationSection`	"Geolocation"	Geolocation section header.
`settingsBreaksSection`	"Breaks"	Breaks section header.
`settingsTimeTrackingSubheadline`	"Enable time clock, timesheets..."	Time tracking description.
`settingsTeamSubheadline`	"Choose which team..."	Team section description.
`settingsGeolocationSubheadline`	"Restrict employee actions..."	Geolocation description.
`settingsBottomOverlaySave`	"Save Changes"	Save button text.

💡

In some cases, some settings need to be stored on your platform's side and provided to the Easyteam Provider on initialization. Reach out to the team with your use case to verify all settings you want to use are supported.

Basic Implementation#

Feature Configuration#

Bring Your Own Settings#

Component Properties#