Skip to content

Settings Editor

The Settings Editor allows you to configure backend and frontend settings for your applications with multi-layer inheritance.

Overview

Configure settings at three levels:

  • Project Level - Defaults for all applications in the project
  • Tenant Level - Defaults for all projects in the tenant
  • Application Level - Specific to one application

Editor Modes

GUI Editor (Default)

User-friendly interface with forms and toggles.

Best for:

  • Non-technical users
  • Quick changes
  • Structured data entry

JSON Editor

Raw JSON editing for advanced users.

Best for:

  • Bulk changes
  • Copy/paste configurations
  • Advanced customization

Toggle between modes using the switch in the top-right corner.

Backend Settings

Configure backend modules and parameters.

Available Modules

View which backend modules can be enabled:

Modules: auth, api, analytics, reporting, webhooks

Enabled Modules

Select which modules are active:

  • [OK] auth
  • [OK] api
  • [OK] analytics
  • reporting
  • webhooks

Key-Value Pairs

Add custom configuration parameters:

KeyValue
api_versionv2
rate_limit1000
timeout30s

Adding a Key-Value Pair

  1. Go to Backend tab
  2. Scroll to "Key-Value Pairs"
  3. Click Add Key-Value Pair
  4. Enter Key and Value
  5. Click Save

Frontend Settings

Configure frontend modules, themes, and locales.

Frontend Modules

Modules with version support:

  • dashboard@1.2.0
  • reports@2.0.1
  • settings@1.0.0

Enable/disable modules as needed.

Themes

Manage available themes:

ThemeEnabledDefault
Light[OK][Default] Default
Dark[OK]
Auto

Setting Default Theme

  1. Ensure theme is enabled (checkbox)
  2. Click radio button in "Default?" column
  3. Changes save automatically

TIP

Users can override the default theme in their preferences.

Locales

Manage languages:

LocaleEnabledDefault
English[OK][Default] Default
Spanish[OK]
French

Configuration Layers

Settings inherit from parent layers:

Tenant Settings
    ↓ (inherited)
Project Settings
    ↓ (inherited)
Application Settings

Viewing Effective Configuration

The Layer Viewer shows:

  • Current layer's settings
  • Inherited values (in gray)
  • Overridden values (highlighted)
  • Final effective configuration

How Inheritance Works

Example:

Tenant sets:

json
{
  "theme": "light",
  "locale": "en"
}

Project sets:

json
{
  "theme": "dark"
}

Application sets:

json
{
  "locale": "es"
}

Effective configuration for the application:

json
{
  "theme": "dark", // from Project
  "locale": "es" // from Application (overrides Tenant)
}

Using GUI Mode

Backend Tab

  1. Modules Section

    • View available modules
    • Toggle enabled/disabled
    • Add new modules
  2. Key-Value Pairs Section

    • Add custom parameters
    • Edit existing pairs
    • Delete unused pairs

Frontend Tab

  1. Modules Section

    • Manage versioned modules
    • Enable/disable
  2. Themes Section

    • Enable themes
    • Set default
  3. Locales Section

    • Enable languages
    • Set default language
  4. Key-Value Pairs Section

    • Custom frontend parameters

Saving Changes

  • Most changes auto-save
  • Watch for success notification
  • Refresh page to see updates

Using JSON Mode

Backend JSON Example

json
{
  "AvailableModules": ["auth", "api", "analytics"],
  "EnabledModules": ["auth", "api"],
  "KeyValuePairs": [
    {
      "Key": "api_version",
      "Value": "v2"
    },
    {
      "Key": "rate_limit",
      "Value": "1000"
    }
  ]
}

Frontend JSON Example

json
{
  "AvailableModules": ["dashboard@1.2.0", "reports@2.0.1"],
  "EnabledModules": ["dashboard", "reports"],
  "AvailableThemes": ["light", "dark"],
  "EnabledThemes": ["light", "dark"],
  "DefaultTheme": "light",
  "AvailableLocales": ["en", "es"],
  "EnabledLocales": ["en", "es"],
  "DefaultLocale": "en",
  "KeyValuePairs": [
    {
      "Key": "app_title",
      "Value": "My Dashboard"
    }
  ]
}

Editing JSON

  1. Switch to JSON Editor mode
  2. Select Backend or Frontend tab
  3. Edit the JSON directly
  4. Click Save button
  5. Watch for validation errors

JSON Validation

Invalid JSON will show an error message. Fix syntax before saving.

Common Tasks

Copy Settings Between Layers

  1. View source layer (e.g., Project)
  2. Switch to JSON mode
  3. Copy the JSON
  4. Navigate to destination layer (e.g., Application)
  5. Switch to JSON mode
  6. Paste and modify as needed
  7. Save

Reset to Defaults

  1. View the layer you want to reset
  2. Delete all settings in JSON mode:
    json
    {
      "AvailableModules": [],
      "EnabledModules": [],
      "KeyValuePairs": []
    }
  3. Save
  4. Configuration will inherit from parent layer

Add Multiple Key-Value Pairs

GUI Mode: Add one at a time

JSON Mode: Add multiple at once:

json
{
  "KeyValuePairs": [
    { "Key": "key1", "Value": "value1" },
    { "Key": "key2", "Value": "value2" },
    { "Key": "key3", "Value": "value3" }
  ]
}

Best Practices

Configuration Strategy

  1. Set common defaults at tenant level - Apply to all projects and applications
  2. Override at project level - For project-specific needs
  3. Customize at application level - Only when necessary

Organizing Settings

  • Use clear, descriptive keys
  • Group related settings
  • Document custom configurations
  • Keep JSON formatted and readable

Testing Changes

  1. Make changes in development/staging first
  2. Test application behavior
  3. Apply to production when verified

Troubleshooting

Changes Not Applying

Check:

  1. Did you click Save?
  2. Is there a validation error?
  3. Is application caching settings?
  4. Are you editing the correct layer?

Cannot See Inherited Values

Solution: Use the Layer Viewer to see full inheritance chain

JSON Validation Error

Common issues:

  • Missing comma between items
  • Trailing comma after last item
  • Unmatched brackets or braces
  • Unquoted strings

Fix: Use a JSON validator or switch to GUI mode

Settings Conflict

Issue: Application behaves unexpectedly

Debug:

  1. View effective configuration
  2. Check each layer's settings
  3. Look for unexpected overrides
  4. Verify module compatibility

See Also