BluKavantUI Design system
TEMPLATES

Operations overview

Metrics, a live request grid, approvals, team workload and upcoming deadlines.

Open web preview ↗Download TypeScript screen ↓Get complete starter →

Screen preview

The image below shows the TypeScript screen. Open the web preview to try its controls; it runs the same source included in the starter.

Operations overview TypeScript screen

Web components used

Statistic · Sparkline · Grid · Timeline

createAppLayout, createPageLayout and createPageHeader provide the shared structure. Each component is also available independently from @blukavantui/web. Import the grid from @blukavantui/web/grid.

Connect your API

Connect the screen to your own data and save actions. Handle permissions and validation on your server.

Use this TypeScript screen

  1. Download the complete starter and run npm ci, then npm run dev. Choose Operations overview under Screen templates.
  2. To move it into an existing web app, copy src/templates/overview.ts together with shared.ts and data.ts. Install @blukavantui/web and import @blukavantui/web/theme.css plus @blukavantui/web/grid.css.
  3. Call mount(host, env) with a connected HTML element. Use env.url for your screen routes and env.galleryUrl for the header link. Call destroy() when removing the screen.

The single-file download needs the shared files above; the complete starter contains everything.

OutSystems version — separate setup

In Service Studio, copy TemplateOverview and the shared TemplateLayout from BluGrid_Sample. Retain the referenced BluKavantUI libraries selected by that screen, including BluKavantUi_Grid. Foundations belong to Core; layout, input, data, feedback and media Blocks live in their corresponding libraries. Replace sample reads and saves with your application’s server actions.

These instructions apply only to the OutSystems screen.

Open OutSystems screen ↗

Search BluKavantUI