Ui Index

UI index (data-ui-key)

This app is being refactored so every major UI block (card/section/menu) can be uniquely referenced across: - CSS (desktop styling) - future wiki/documentation - future layout changes and per-screen tuning

How UI elements are identified

Templates are tagged using attributes: - data-ui-key="..." (stable unique key) - data-ui-kind="..." (card/section/button/link/etc)

Example:

<div class="card" data-ui-key="management.card" data-ui-kind="card">
  ...
</div>

Database index

The pmcore.UiElement model stores an index of these keys so we can attach documentation to the UI reliably.

Sync command

After template changes (adding/removing data-ui-key attributes), sync the DB index:

docker compose exec django python manage.py sync_ui_elements

Optional flags:

docker compose exec django python manage.py sync_ui_elements --deactivate-missing
docker compose exec django python manage.py sync_ui_elements --dry-run

Naming convention (recommended)

• Start with the page name: management.*, connection.*, trading.lab.*, tools.*, etc.
• Use dots for hierarchy: nav.main.links.trading
• Keep keys stable once published (wiki references will depend on them).

Back to wiki home