Settings

CARE supports flexible, dynamic application behavior through a centralized system of configurable settings. These settings allow developers and administrators to customize the frontend and backend behavior without hardcoding values or redeploying the application. Settings are stored in the database, can be grouped by key namespaces, and support multiple data types. This section shows how to define a new setting, what types are supported, and how to use the setting in your Vue components.

Example: Adding a New Setting

1. Add a migration

At first you need to add a new migration - please check out the Database for the details. To add a new setting, define it similar to this example:

'use strict';

const settings = [{
    key: "editor.document.enableComments",
    value: "true",
    type: "boolean",
    description: "Enable or disable comment functionality in the document editor"
}];

module.exports = {
    async up(queryInterface, Sequelize) {
        await queryInterface.bulkInsert('setting', settings.map(t => {
            t['createdAt'] = new Date();
            t['updatedAt'] = new Date();
            return t;
        }), { returning: true });
    },

    async down(queryInterface, Sequelize) {
        await queryInterface.bulkDelete("setting", {
            key: settings.map(t => t.key)
        }, {});
    }
};

Note

After running the migration, make sure to execute make init before restarting the server. This ensures the new settings are correctly applied and available in the frontend.

Supported Setting Types

The type field of a setting defines how the setting is interpreted and rendered in the frontend. The following types are currently supported:

• boolean: Enables a checkbox or toggle in the UI.

  {
      key: "editor.document.enableComments",
      value: "true",
      type: "boolean",
      description: "Enable or disable comment functionality in the document editor"
  }
  

• number or integer: Enables a numeric input field (as string or integer).

  {
      key: "editor.edits.debounceTime",
      value: "150",
      type: "number",
      description: "Delay time in milliseconds before processing edits"
  }
  

• string (default): Basic text field input. If type is omitted, it is treated as string by default.

  {
      key: "dashboard.navigation.component.default",
      value: "Home",
      description: "The default component to display in the dashboard"
  }
  

• html: Allows multi-line rich-text (HTML) input in the frontend, shown with a textarea.

  {
      key: "app.register.terms",
      type: "html",
      value: "<p>Please agree to the terms and conditions.</p>",
      description: "Terms and conditions text shown during registration"
  }
  

Note

You can mix and match these types depending on your use case. The value must always be provided as a string, regardless of type.

2. Use your Settings in the Frontend

You can access the setting value inside any component using Vuex:

this.$store.getters["settings/getValue"]("editor.document.enableComments")

Settings are always returned as strings, so their usage in components depends on the expected type. You must manually parse them as needed based on the setting’s type.

Type: Boolean

<BasicButton
    v-if="commentsEnabled"
    text="Add Comment"
    @click="addComment"
/>

export default {
    computed: {
        commentsEnabled() {
            return this.$store.getters["settings/getValue"]("editor.document.enableComments") === "true";
        }
    },
    methods: {
        addComment() {
            console.log("Add comment clicked");
        }
    }
};

Type: Integer

export default {
    computed: {
        debounceTimeForEdits() {
            return parseInt(this.$store.getters["settings/getValue"]("editor.edits.debounceTime"), 10);
        }
    }
};

Warning

Changes made to settings in the frontend are not automatically saved to the database. After modifying any setting through the UI, you must click the Save Settings button. Otherwise, your changes will be lost and not persisted.