Skip to main content
Version: 2.2.0

Dashboard Module Quickstart

Get started with the Dashboard (DASH) module to create and manage interactive dashboards with customizable widgets in your web application.

Prerequisites​

The following section assumes you have installed all the tools required for web development from our tools section.

Before you move on, it is also mandatory that you read through the key technology list in our web technologies section and you understand the justification for each one, especially if you're not familiar with the specific technology.

info

It is presumed that you already have a Web Base prepared and ready for you to install modlets, otherwise, please go to the Web Framework quickstart section to initialize your Web Base.

It is also presumed that you are already familiar with running a local development environment, otherwise, please go to the Local Dev Environment to prepare your machine for local development.

Installation​

1. Install the DASH Modlet​

Run the following command in the root of your Web Base project:

web-base
npx cli install dash

You'll be prompted to choose your 'root folder' - use the default (current working directory).

The modlet will be installed with:

  • Dashboard components and widgets
  • Navigation configuration
  • Type definitions and services
  • Dependencies added to your package.json

2. Configure Environment Variables​

Add the required environment variables to your .env file:

.env
## ==================== DASH ====================
# URL of the dashboard service (required)
DASH_URL=http://dash.127.0.0.1.nip.io
# URL of the tag service (required)  
TAG_URL=http://tag.127.0.0.1.nip.io

These default values work with the standard development setup using 127.0.0.1.nip.io. Adjust them according to your environment.

For detailed information about each environment variable, see the configuration section.

3. Start Backend Services​

Start the required backend services using the development containers:

dev-containers
podman compose --env-file .env -f dash/compose.yml up -d
tip

Remember to adjust and add the compose.override.yml if you have specific requirements like exposing the database for direct connection from database management tools.

4. Start Development Server​

web-base
npm run dev

Using the Dashboard Module​

Once installed and running, you can access the dashboard functionality:

The DASH module adds navigation items to your application:

  • Dashboard Management (/aoh/dash) - Main dashboard management interface
  • Favorite Dashboards (/aoh/dash/favourite) - Quick access to favorited dashboards

Creating Your First Dashboard​

  1. Navigate to Dashboard Management - Visit /aoh/dash in your application
  2. Create New Dashboard - Click "Create Dashboard" and provide:
    • Dashboard name and description
    • Initial layout configuration
    • Optional tags for organization
  3. Add Widgets - Use the widget selector to add components:
    • Position widgets using the grid system
    • Configure widget properties
    • Resize widgets as needed
  4. Save and Test - Save your dashboard and test the functionality

Basic Dashboard Component Usage​

You can also use dashboard components directly in your custom pages:

src/routes/my-page/+page.svelte
<script lang="ts">
  import { DashboardGrid, Widget } from '$lib/aoh/dash/components';
  
  const dashboardConfig = {
    name: "My Custom Dashboard",
    widgets: [
      {
        type: "Info",
        config: {
          title: "System Status",
          value: "Online",
          subtitle: "All systems operational"
        },
        position: { row: 0, column: 0, width: 6, height: 4 }
      }
    ]
  };
</script>

<DashboardGrid config={dashboardConfig} />

Next Steps​

  • Explore Widget Development: Learn how to create custom widgets in the development guide
  • Configure Advanced Features: Set up advanced dashboard features in the configuration section
  • Deploy to Production: Follow the deployment guide for production setup
  • Review Reference Pages: Check the FAQ and troubleshooting guides in the reference section