How is your experience with the OutSystems Community?
admin-dashboard-website-template
Reactive icon

Admin Dashboard Website Template

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 27 Oct (8 hours ago)
 by 
0.0
 (0 ratings)
admin-dashboard-website-template

Admin Dashboard Website Template

Documentation
1.0.0

Installation

  1. From Forge, click Install and choose the target environment/stage, or download the .oml and open it directly in Service Studio.
  2. The module depends on OutSystemsUI and OutSystemsCharts (bundled automatically on install from Forge). If you’re importing the .oml manually, make sure both are already installed in your environment first.
  3. 1-Click Publish the module from Service Studio.

Configuring your app to use it

  1. In your own app/module, add metisSidebar as a dependency (Manage Dependencies → add the module’s public elements you need: the MetisTheme_Th theme and/or the LayoutSideMenu / Menu blocks).
  2. To use the full look out of the box, set MetisTheme_Th as your app’s active theme (Module Properties → Theme), or reference its LayoutSideMenu layout block directly when building individual screens.
  3. Re-publish your app.

Customizing the look

All design tokens live in one place: open MetisTheme_Th in Service Studio and click Open Theme Editor (or edit the stylesheet directly) — look for the :root block with --metis-* custom properties (colors, radii, shadows, spacing, typography, sidebar widths). Changing a token there updates every screen that uses the theme; you don’t need to touch individual screens.

Adding your own screens

  1. Create a new screen and set its layout to LayoutSideMenu (from the Layouts flow).
  2. To add a sidebar nav item, open the Menu block (in the Common flow) and follow the existing link pattern — an ILink with an icon + label, wired to your screen via OnClick.Destination. Submenus use the same nested-<details> pattern as “Elements”/”Pages”.
  3. The shipped Dashboard, Analytics, and Users screens are meant as working references — copy their widget/CSS-class patterns (KPI tiles, cards, tables, progress bars) when building new pages for visual consistency.

Sample data

The included screens use mock data generated by simple server actions (BuildChartData, BuildTableData, etc.) so the UI works immediately after install. For production use, replace these with your own aggregates/entities — the chart and table bindings are standard OutSystemsCharts DataPointList and TableRecords sources, so swapping the data source is a drop-in change.