DGA Template (Saudi Digital Government Authority) — OutSystems 11 Reactive

Overview

A production-ready OutSystems 11 Reactive template aligned with DGA UI/UX guidelines. It ships with a compliant theme, reusable layouts/blocks, and a complete set of public pages. The template is responsive, WCAG-aligned, supports RTL/LTR, and is multilingual (Arabic & English) with a Settings screen for runtime language switching.

What This Asset Does

• Provides a DGA-aligned theme (colors, typography, spacing, elevation, motion).

• Includes layouts & widgets (header, footer, breadcrumb, side-nav, tabs, loaders, alerts).

• Delivers starter pages: Home, Services, Board of Directors, Contact Us, FAQs, Form, Help & Support, Search, Sitemap, and Error (404/500).

• Supports Arabic (RTL) and English (LTR) with a built-in language switcher.

• Follows OutSystems best practices with a modular structure for clean reuse and upgrades.

Modules

• DGA — Main app with layouts, Settings, and the standard pages.

• DGA_Th — Theme tokens (colors/typography/spacing), RTL/LTR rules, global CSS.

• DGA_Assets — Shared assets (icons, logos, illustrations, extra CSS/JS).

• DGA_CW — Common widgets/blocks (Header, Footer, Breadcrumb, Menu, Loader, Alert).

Included Pages

• Home — Landing with hero and feature sections.

• Services — Service catalog (grid/list) with icons and deep links.

• Board of Directors — Profiles with photos, roles, and bios.

• Contact Us — Validated form + optional map/locations.

• FAQs — Accordion Q&A with search/filter.

• Form Page — Generic form template with validation.

• Help & Support — Docs/help links and support channels.

• Search — Results layout supporting Arabic & English.

• Sitemap — Hierarchical site map (auto/assisted).

• Error (404/500) — Branded error pages.

Quick Start

1. Import the .OAP in Service Studio.

2. Set your app Theme to DGA_Th.

3. Reference DGA_CW (widgets) and DGA_Assets (logos/icons).

4. Create screens using layouts from DGA (Layout_DGA_Default, Layout_DGA_Auth, Layout_DGA_Blank).

5. Publish and test both Arabic (RTL) and English (LTR) modes.

Configuration

Site Properties (examples)

• PrimaryColor, SecondaryColor

• HeaderLogoUrl, FooterLogoUrl

• EnableRTL, DefaultLanguage (ar or en)

• FontFamilyArabic, FontFamilyLatin

CSS Variables (excerpt)

:root {
  --dga-color-primary: #146c43;
  --dga-color-accent:  #0d6efd;
  --dga-color-text:    #1d2939;
  --dga-radius-md:     8px;
  --dga-shadow-sm:     0 1px 2px rgba(0,0,0,.06);
  --dga-spacing-3:     .75rem;
  --dga-font-size-md:  1rem;
}

Language & RTL

• Built-in Arabic (RTL) and English (LTR).

• Settings screen lets users switch languages at runtime.

• Direction, fonts, spacing, and alignment auto-adapt.

• Extend to more languages via Data → Translations.

Accessibility (WCAG)

• Visible focus rings and skip-to-content included.

• Default tokens target WCAG 2.1 AA contrast.

• Ensure images have alt text; add ARIA where needed.

• Validate with automated and manual tests.

SEO Basics

• Per-page titles and meta descriptions.

• Use the Sitemap page; expose via robots.txt if applicable.

Testing Checklist

• Language switch toggles direction and fonts correctly.

• Components scale across mobile/tablet/desktop.

• Forms show validation & focus states clearly.

• Keyboard navigation reaches all interactive elements.

• Color overrides still meet contrast ratios.

Developer Notes

• Prefer CSS variables and page-level overrides vs. editing base CSS.

• Clone blocks for structural changes; keep originals for upgrade safety.

• Optimize images; prefer SVG for logos/icons.