Settings API
The Settings API allows tool-specific settings to be stored and retrieved between sessions.
Reading Settings
toolboxAPI.settings.getAll()
Retrieve all settings for your tool.
Returns: Promise<Record<string, any>> Object containing all settings key-value pairs
const settings = await toolboxAPI.settings.getAll()
console.log('All settings:', JSON.stringify(settings))
// Example output:
// {
// "pageSize": 50,
// "defaultColor": "blue",
// "showAdvancedOptions": true,
// "lastUsedFilter": "active"
// }
toolboxAPI.settings.get(key)
Retrieve a specific setting by key.
Parameters:
key: string- The setting key to retrieve
Returns: Promise<any> Value of the setting or undefined if not found
const pageSize = await toolboxAPI.settings.get('pageSize')
console.log('Page Size setting:', pageSize) // Output: 50
// Handle missing settings with defaults
const pageSize = await toolboxAPI.settings.get('pageSize') || 25
const theme = await toolboxAPI.settings.get('theme') || 'light'
Writing Settings
toolboxAPI.settings.set(key, value)
Set a specific setting by key.
Parameters:
key: string- The setting key to setvalue: any- The value to store for the setting (will be serialized to JSON)
Returns: Promise<void> Successful completion
await toolboxAPI.settings.set('pageSize', 50)
await toolboxAPI.settings.set('defaultColor', 'blue')
await toolboxAPI.settings.set('showAdvancedOptions', true)
// Store complex objects
await toolboxAPI.settings.set('lastFilter', {
type: 'status',
value: 'active',
appliedAt: new Date().toISOString()
})
toolboxAPI.settings.setAll(settings)
Set multiple settings at once.
Parameters:
settings: Record<string, any>- Object containing key-value pairs to set
Returns: Promise<void> Successful completion
await toolboxAPI.settings.setAll({
defaultColor: 'blue',
pageSize: 50,
showAdvancedOptions: true,
lastUsedFilter: 'active'
})
Best Practices
Use Meaningful Keys
Use descriptive, namespaced keys to avoid conflicts:
// Good: Descriptive keys
await toolboxAPI.settings.set('ui.pageSize', 50)
await toolboxAPI.settings.set('ui.theme', 'dark')
await toolboxAPI.settings.set('data.cacheExpiry', 3600)
// Bad: Vague keys
await toolboxAPI.settings.set('size', 50)
await toolboxAPI.settings.set('value', 'dark')
Provide Default Values
Always provide fallback values when reading settings:
// Good: Default values
const pageSize = await toolboxAPI.settings.get('pageSize') || 25
const theme = await toolboxAPI.settings.get('theme') || 'light'
// Even better: Use a defaults object
const DEFAULTS = {
pageSize: 25,
theme: 'light',
showWelcome: true
}
async function getSetting(key) {
const value = await toolboxAPI.settings.get(key)
return value !== undefined ? value : DEFAULTS[key]
}
Validate Settings
Validate settings before using them:
async function getPageSize() {
const pageSize = await toolboxAPI.settings.get('pageSize')
// Validate the value
if (typeof pageSize === 'number' && pageSize > 0 && pageSize <= 100) {
return pageSize
}
// Return default if invalid
return 25
}
Batch Updates
When updating multiple settings, use setAll() for better performance:
// Good: Batch update
await toolboxAPI.settings.setAll({
pageSize: 50,
sortColumn: 'name',
sortDirection: 'asc',
filters: { status: 'active' }
})
// Bad: Multiple individual updates
await toolboxAPI.settings.set('pageSize', 50)
await toolboxAPI.settings.set('sortColumn', 'name')
await toolboxAPI.settings.set('sortDirection', 'asc')
await toolboxAPI.settings.set('filters', { status: 'active' })
Store Only User Preferences
Store only user preferences, not application state or temporary data:
// Good: User preferences
await toolboxAPI.settings.set('defaultView', 'grid')
await toolboxAPI.settings.set('itemsPerPage', 50)
// Bad: Temporary/application state (use local state instead)
await toolboxAPI.settings.set('currentPageNumber', 3)
await toolboxAPI.settings.set('selectedItems', [1, 2, 3])
Handle Errors
Always handle potential errors when working with settings:
try {
await toolboxAPI.settings.set('pageSize', 50)
} catch (error) {
console.error('Failed to save setting:', error)
await toolboxAPI.utils.showNotification({
title: 'Error',
body: 'Failed to save preferences',
type: 'error'
})
}
Examples
Save and Load Form Preferences
// Save form state
async function saveFormPreferences(formData) {
await toolboxAPI.settings.setAll({
'form.defaultEnvironment': formData.environment,
'form.showAdvanced': formData.showAdvanced,
'form.autoRefresh': formData.autoRefresh
})
}
// Load form state
async function loadFormPreferences() {
const settings = await toolboxAPI.settings.getAll()
return {
environment: settings['form.defaultEnvironment'] || 'production',
showAdvanced: settings['form.showAdvanced'] || false,
autoRefresh: settings['form.autoRefresh'] || true
}
}
Theme Preference
// Apply and save theme preference
async function setTheme(theme) {
// Apply theme to UI
document.body.classList.remove('theme-light', 'theme-dark')
document.body.classList.add(`theme-${theme}`)
// Save preference
await toolboxAPI.settings.set('ui.theme', theme)
}
// Load theme on startup
async function loadTheme() {
const theme = await toolboxAPI.settings.get('ui.theme') || 'light'
document.body.classList.add(`theme-${theme}`)
}
Data Grid Preferences
// Save grid configuration
async function saveGridConfig(config) {
await toolboxAPI.settings.setAll({
'grid.pageSize': config.pageSize,
'grid.sortColumn': config.sortColumn,
'grid.sortDirection': config.sortDirection,
'grid.visibleColumns': config.visibleColumns,
'grid.density': config.density
})
}
// Load grid configuration
async function loadGridConfig() {
const settings = await toolboxAPI.settings.getAll()
return {
pageSize: settings['grid.pageSize'] || 25,
sortColumn: settings['grid.sortColumn'] || 'name',
sortDirection: settings['grid.sortDirection'] || 'asc',
visibleColumns: settings['grid.visibleColumns'] || ['name', 'status', 'date'],
density: settings['grid.density'] || 'comfortable'
}
}