Přepínání light a dark módu

<div class="dropdown dropend">
 <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"  style="font-size: 160%;">
           ☀ 
 </button>
 <ul class="dropdown-menu dropdown-menu-end">
  <li><a class="dropdown-item shp-app-action" data-action='setColorMode' href="#" data-app-color-mode='auto'>Auto</a></li>
  <li><a class="dropdown-item shp-app-action" data-action='setColorMode' href="#" data-app-color-mode='dark'>Dark</a></li>
  <li><a class="dropdown-item shp-app-action" data-action='setColorMode' href="#" data-app-color-mode='light'>Light</a></li>
 </ul>
</div>

Odhlašovací tlačítko

<a class="btn btn-outline-primary" href='{{dsRoot}}/user/logout-check?loginUrl=/ui/login/ui/test'>{{{@icon;icon:user/signOut}}}</a>

Kasa

{{{@systemWidget;classId:terminals.store.WidgetCashBoxNG}}}

Menu

Pro menu je možné použít navbar Bootstrapu, nebo si menu vytvořit. Níže je příklad s použitím Widgetů. Jejich ID je definované v jejich nastavení.

<div class="container-fluid app-content">
 <div class="row" style="height: 100vh; flex-wrap: nowrap;">
  <div class="col d-flex flex-column" style="flex: 0 0 5vw; padding: 0; background-color: aquamarine; text-align: center;">
   <a href="overview" class="main-nav{{data.url_path_overview_active}}">{{{@icon;icon:user/eye}}}Přehled</a>
   <a href="3dprint" class="main-nav{{data.url_path_3dprint_active}}">{{{@icon;icon:user/printer}}}3D tisk</a>
  </div>

  <div class="col" style="flex: 0 0 95vw; padding: 0;">
   {{#data.url_path_overview}}
    {{{@uiWidget;id:control-panel-overview}}}
   {{/data.url_path_overview}}
   {{#data.url_path_3dprint}}
    {{{@uiWidget;id:control-panel-3dprint}}}
   {{/data.url_path_3dprint}}
  </div>
 </div>
</div>

Nastavení aktivního prvku menu

class="main-nav{{data.url_path_overview_active}}"

je pro nastavení active pokud url odpovídá identifikátoru za „path“

Widgety

{{#data.url_path_overview}}
 {{{@uiWidget;id:control-panel-overview}}}
{{/data.url_path_overview}}

Načtení Widgetu pomocí jeho ID.