Agent Wranglers

APP-84Recommended

Gather every setting on one settings page

Put every setting a person or an admin can change on one settings area, grouped by subject, with a search field. Save each change visibly and say who it affects.

By Agent Wranglers. Updated .

How to do it

Settings scattered across screens get changed twice or never found. Group them into sections, such as profile, notifications, security and billing, each at its own address, as Keep screen state in the address says. Generate the list from one schema of settings, so a new setting cannot be forgotten. Say when a setting affects the whole organisation rather than one person. Confirm each save in place, and keep risky ones behind Let people undo or confirm destructive actions.

Examples

JavaScript example

export const SETTINGS = [
  { key: 'notifications.email', section: 'notifications', label: 'Email me about new invoices', scope: 'user' },
  { key: 'billing.currency', section: 'billing', label: 'Billing currency', scope: 'organisation' },
];

Python example

def test_every_setting_has_a_home():
    for setting in SETTINGS:
        assert setting["section"] in SECTIONS and setting["label"], setting["key"]

How to check

A test reads the settings schema. Every setting has a section, a label and a page that shows it. A browser test searches for each setting label and finds its control.

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/app-ui/layout-and-navigation/settings-page">Agent Wranglers web app interface playbook</a>. In code you write, add a comment next to it with the same link.