Layout guidelines – Microsoft Power Platform Developments

Note:
This page is a working demonstration of the proposed User Interface guidelines for Council. You are encouraged to interact with all elements on the page to understand how the layout, navigation, modals, and design components behave in practice.

This page layout is organised into three main zones: a fixed header, an optional overlay filter bar, and a two-column body with a left sidebar and a flexible content area.

It is recommended that all developments built using Microsoft Power Platform tools be designed to operate correctly on Council’s minimum standard display hardware configuration. Interfaces should be optimised for a resolution of 1280 × 720 pixels, which represents the lowest supported screen size for Council-issued devices.

1. Overall page structure

• The page is divided into:
  • Fixed top navigation bar (72 px high).
  • Optional overlay filter/search bar directly under the navbar.
  • Body area using a two-column layout:
    • Left: vertical sidebar with navigation.
    • Right: flexible content area filling remaining width.
• .layout-wrapper is a flex container.
• .sidebar has a fixed width (220 px).
• .content-area grows to fill the rest of the viewport width.

2. Header / navbar layout

• Height is fixed at 72 px, using a solid blue background #0067B1.
• The header is fixed to the top and remains visible while scrolling.
• The header content is split into:
  • Left side – app launcher icon, organisation logo, application title.
  • Right side – F-block shortcut buttons, filter toggle icon, Help and Info icons.
• The app title (for example “Power BI Catalogue”) uses a larger, semi-bold font to act as the primary label.

2.1 F-block placeholder buttons

• The F-blocks in the header are placeholders by default. A typical application will not use them unless there is a clear need to link to one or more external items (for example, a related report, dashboard, or companion app).
• Their use is optional and should only be enabled when:
  • there is a meaningful external destination, and
  • that destination provides additional context or functionality for this app/report.
• When they are used:
  • You may use as many F-blocks as required, as long as the header layout remains readable and uncluttered.
  • Each F-block should remain within a consistent size range:
    • Minimum width: approximately 52 px.
    • Maximum width: approximately 120 px.
    • Height: approximately 36 px.
  • Labels should be short (for example “F1”, “F2”, or a concise code of 2–4 characters).
  • Targets should be clearly documented (for example: which external app, report, or dashboard each F-block opens).
• If there are no relevant external links, the F-blocks may be hidden or left unbound in the final implementation.

3. Overlay filter / search panel

• The filter/search panel is positioned directly under the navbar and overlays the content.
• It matches the navbar colour (#0067B1) and spans the full window width.
• The panel is toggled by the chevron icon in the header (down = closed, up = open).
• Controls are grouped into logical sections in a single horizontal row:
  • Navigate – Back / Forward mini F-style buttons.
  • Group by – drop-down control.
  • Sort by – drop-down control.
  • Order – drop-down control (Ascending / Descending).
  • Apply / Cancel actions.
• The panel uses a compact typographic scale and reduced padding so it remains visually shallow.

4. Sidebar layout (left menu)

• The sidebar has a fixed width of 220 px and a white background with a light right border.
• Navigation items are full-width buttons with:
  • An icon on the left (Bootstrap icon set).
  • A text label on the right (e.g. Dashboard, Reports, Data Sources, Settings, Help).
• Hover behaviour:
  • Yellow highlight background using rgba(255,210,43,0.18).
  • Soft yellow outline / glow around the button.
  • Text colour deepens to a darker blue.
• The Help navigation item opens the Help Centre modal using Bootstrap modal attributes.

5. Main content area

• .content-area is the flexible region used for catalogue content, grids, tiles, or reports.
• Standard padding is applied to provide consistent breathing room from the edges.
• Content in this area should not interfere with:
  • The fixed header and overlay filter panel.
  • The structural role of the left sidebar navigation.

6. Help modal layout

• The Help modal uses a blue header bar matching the main navbar.
• The title row combines:
  • The Help icon (48 px).
  • The “Help Centre” heading.
• The body follows a “man-page” style layout with sections:
  • NAME – application name.
  • SYNOPSIS – brief one-line description.
  • DESCRIPTION – short paragraph outlining purpose and scope.
• Section headings use uppercase blue text with a thin underline for visual separation.

7. Info modal and technical details

• The Info modal also uses a blue header bar and lifebuoy/info icon next to the “Info Centre” label.
• The body contains three main segments:
  • About this application – short descriptive paragraph.
  • Technical details card – dense metadata about the report.
  • Support – contact information for assistance.
• The Technical details card is split into two columns on large screens:
  • Left column – report metadata and data source information:
    • Report name, workspace.
    • Primary data source and connection path.
    • Source type (e.g. SharePoint Online list).
    • Last successful refresh, refresh frequency, refresh status.
  • Right column – development lifecycle and governance:
    • Development, testing, approval, and go-live dates.
    • Dataset owner.
    • Gateway usage and data sensitivity classification.
• On narrow screens the two columns stack vertically to preserve readability.

8. Viewport size readout – (Optional, only used for debugging during development)

• A small diagnostic element shows the current viewport size in width × height format.
• It is styled as a monospace label on a dark rounded background, positioned unobtrusively near the bottom edge.
• The value is updated on window resize, allowing designers to verify the layout at common breakpoints.