Settings.json

The settings.json file exists primarily to allow configurable settings that don't require a full rebuild of a frontend - also some visual elements can be controlled by these settings like headings, positions, icons, and colors etc. Some of the configurable settings include:
Composer settings, like domain, protocol, and auth method.
Basic App-level visuals; title, meta details, logos, etc.
Top-level menu listings
Banner child element organisation and appearance.
Page routes and titles.
Bookings - granular conditional settings
The settings.json file can become monolithic but this, for the moment, allows backend devs, or anyone not frontend-familiar with git repo access, the ability to change visuals and other aspects of an app easily.
When approaching an existing frontend first check to see if the change can be made in the settings.json file; it might save some headache.
Overview
Composer config
{
    ...
​
    "composer": {
        "domain": "",
        "route": "",
        "protocol": "http:",
        "use_domain": true,
        "local_login": false
    }
​
    ...
}
The default composer config is setup for simple local development, if you require your app to work in conjunction with a local Engine instance then the domain setting will have to match the corresponding domain listing in the admin panel of the instance (Backoffice).
For example:
{
    ...
​
    "composer": {
        "domain": "localhost:4200",
        "route": "",
        "protocol": "http:",
        "use_domain": true,
        "local_login": false
    }
​
    ...
}
NB: This assumes the app is being served with default settings with the gulp serve terminal command - i.e. utilizing port 4200. A production settings.json file will be created from this with modified settings at compile time. These production values overrides will exist within /config/default.ts.
Cosmetics/Supplementary Details
{
    ...
​
    "app": {
        "title": "ACA Staff App",
        "name": "Staff App",
        "description": "ACA Projects Staff Application made in Angular",
        "short_name": "ACA",
        "code": "ACA",
        "login": {
            "forgot": false
        },
        "analytics": {
            "enabled": false,
            "tracking_id": "UA-123456789"
        },
        "logo": {
            "type": "img",
            "src": "assets/img/logo.svg",
            "inverse": "assets/img/logo-inverse.svg",
            "background": ""
        },
        "banner": {
            "enabled": true,
            "header": true,
            "home": false,
            "type": "color",
            "full": true,
            "allow_image_on_home": false,
            "src": "assets/img/background-hero.jpg"
        },
        "copyright": "Copyright 2020 ACA Projects",
​
        ...
    }
​
    ...
}
In this example basic app-wide details are specified; these include page-wide titles/meta data details, logos, GA code, and toggles for when to show hero banners. All things that can be configured post build.
Granular Configurations for Sections
This snippet shows the configuration options for room booking on the default ACA Staff App.
{
    ...
​
    "booking": {
            "min_attendees": 0,
            "external_visitors": false,
            "recurrence": false,
            "max_days_ahead": 180,
            "max_length": 480,
            "default_length": 30,
            "min_length": 30,
            "multi_room": false,
            "title_prefix": "",
            "charge": false,
            "terms": false,
            "old_filters": false,
            "select_room_first": true,
            "privacy": false,
            "control": false,
            "lock_cancel": 0,
            "external_floors": [],
            "return_id": "",
            "fields": [
                {
                    "key": "date",
                    "label": "Date",
                    "icon": {
                        "class": "material-icons",
                        "value": "event"
                    },
                    "simple": true,
                    "description": "",
                    "control_type": "custom",
                    "required": true
                },
                {
                    "key": "start",
                    "label": "Start",
                    "icon": {
                        "class": "material-icons",
                        "value": "access_time"
                    },
                    "refs": [
                        "date"
                    ],
                    "simple": true,
                    "description": "",
                    "control_type": "custom",
                    "required": true
                },
                {
                    "key": "duration",
                    "label": "End",
                    "icon": {
                        "class": "material-icons",
                        "value": "access_time"
                    },
                    "refs": [
                        "date"
                    ],
                    "simple": true,
                    "description": "",
                    "control_type": "custom",
                    "required": true
                }
​
                ...
​
            ],
            "banner": {
                "enabled": true,
                "links": [
                    {
                        "id": "book",
                        "name": "Book Space"
                    },
                    {
                        "id": "book/visitor",
                        "name": "Book Visitor"
                    }
                ]
            }
        }
​
    ...
}

Widgets

Next - API

Authentication

Last modified 2yr ago

Copy link

On this page

Overview

Composer config

Cosmetics/Supplementary Details

Granular Configurations for Sections