DGA Template (Saudi Digital Government Authority) is a production-ready OutSystems 11 Reactive template that implements DGA-aligned UI/UX out of the box. It ships with a compliant theme, reusable layouts/blocks, and a full set of public pages (Home, Services, Board of Directors, Contact Us, FAQs, Help & Support, Search, Sitemap, Error). It’s responsive, WCAG-aligned, RTL/LTR, and multilingual (Arabic & English) with a Settings screen to switch languages at runtime.

Architecture & Modules

• DGA — main app: layouts, samples, settings, and standard pages.

• DGA_Th — theme tokens (colors, typography, spacing), RTL/LTR rules.

• DGA_Assets — shared assets: icons, logos, illustrations, CSS/JS.

• DGA_CW — common widgets/blocks: header, footer, breadcrumb, menu, alerts, loaders.

Included Pages

• Home — DGA-styled landing with hero, cards/sections.

• Services — grid/list of digital services with icons and deep links.

• Board of Directors — profiles, photos, roles, bios.

• Contact Us — validated form + map/locations area.

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

• Form Page — generic form template (ready for your entities).

• Help & Support — guides, manuals, support channels.

• Search — Arabic/English search layout and results template.

• Sitemap — hierarchical site map (auto/assisted generation).

• Error (404/500) — branded fallback pages.

Key Features

• DGA-aligned theme: tokens for color, type scale, spacing, elevation, focus.

• Responsive across desktop/tablet/mobile.

• RTL/LTR with automatic direction, spacing flips, and font presets.

• Accessibility: focus states, contrast-aware tokens, skip-to-content.

• Reusable navigation: header, footer, side-nav, breadcrumb, tabs.

• Forms kit: inputs, selects, validation states, hints/errors.

• Utilities: spacing helpers, grid/flex helpers, visibility/shadows/z-index.

• SEO basics: titles, meta placeholders, sitemap page template.

• Upgrade-safe styling: theme variables + additive CSS.

Language & RTL

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

• Settings screen lets users switch language at runtime.

• Direction, fonts, alignment, and labels adapt automatically.

• Extensible to more languages via standard OutSystems translations.

Installation

1. Import the .OAP package into Service Studio.

2. Set your app Theme to DGA_Th.

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

4. Start from the provided pages or duplicate as templates.

5. Configure language and branding in Settings / Site Properties.

Configuration (examples)

• Site Properties: PrimaryColor, SecondaryColor, HeaderLogoUrl, FooterLogoUrl, EnableRTL, DefaultLanguage, FontFamilyArabic, FontFamilyLatin.

• CSS Variables: --dga-color-*, --dga-radius-*, --dga-shadow-*, --dga-spacing-*, --dga-font-size-*.

How to Use

• Choose a layout (Default, Auth, Blank) from DGA.

• Drop DGA_CW blocks (Header, Footer, SideNav, Breadcrumb) onto screens.

• Build forms with the Form Page pattern and validation states.

• Localize labels using Translations; expose Settings to end users if needed.

Compatibility

• Platform: OutSystems 11 (Reactive Web)

• Browsers: Latest Chrome/Edge/Firefox/Safari

• Accessibility Target: WCAG 2.1 AA (developer responsibility to validate)