Documentation

Everything you need to build and deploy Dataverse portals with PortalForge.

Getting Started

1. Create a project

Open the Dashboard and click New Project. Each project is a self-contained portal with its own pages, navigation, and settings.

2. Add pages

Go to the Pages screen to create portal pages. Each page has its own component layout and URL slug. Click a page and then Open to enter the Visual Builder.

3. Drag and drop components

In the Visual Builder, open the Components tab on the left and drag components onto the canvas. Use the right panel to configure each component's properties, data binding, actions, and security rules.

4. Bind to Dataverse

Select a data-bound component (DataGrid, Entity Form, Chart, etc.) and open the Data tab. Pick a Dataverse table, choose columns, and configure filters. Data appears instantly in preview mode.

5. Configure actions

Select a component and open the Config tab to add actions. Chain multiple actions on events like onClick, onSave, or onRowSelect. Use conditional logic for branching behavior.

6. Publish

Click Publish in the top bar. PortalForge builds and deploys your portal to Power Pages automatically. No manual solution packaging required.

Components

22 components available. All are drag-and-drop with visual configuration.

DataGrid

Tabular data display with sorting, search, pagination, row actions, and status badges. Binds to any Dataverse table.

boundTablecolumnscolumnConfigssortByenableSearchrowActionsbinding

Entity Form

Create/edit/readonly form with field-type-aware rendering. Supports lookups, date pickers, choice dropdowns, number inputs, boolean toggles, currency inputs, email/phone inputs, and required validation. Payload values are automatically coerced to the correct OData type.

boundTablemodefieldConfigslayoutModesectionsformBlocksbinding

Multistep Form

Multi-step wizard with per-step field selection, progress indicators (steps/bar/dots), and step-level validation.

boundTablestepsprogressStylesubmitLabelmode

Chart

Bar, line, and pie charts using recharts. Aggregates Dataverse data with groupAndAggregate.

boundTablechartTypexFieldyFieldaggregationheight

KPI Card

Single metric display with aggregation (sum/count/avg/min/max), trend indicator, click-to-filter, and configurable icon from any library.

boundTablefieldaggregationlabelformaticoniconLibrary

List Repeater

Card or list layout for record browsing. Configurable title, subtitle, and meta fields.

boundTabletitleFieldsubtitleFieldmetaFieldlayoutmaxItems

Tabs

Tabbed container with multiple panels. Each tab can hold any component tree.

tabsdefaultTabId

Card

Styled container with optional title, subtitle, header icon, background, border, and shadow.

titlesubtitlepaddingborderRadiusbackgroundshowBordericoniconLibrary

Modal

Overlay dialog triggered by actions. Contains its own component tree.

titlemodalIdwidth

Badge

Status indicator with filled/outline/dot variants, configurable color map, and optional icon.

textvariantsizecolorMapiconiconLibrary

Section

Full-width layout block with configurable padding, background, and optional header icon.

paddingbackgroundtitleiconiconLibrary

Columns

Multi-column layout with configurable column widths.

columnCountgap

Accordion

Collapsible content sections with expand/collapse toggle.

itemsallowMultiple

Text Block

Rich text with font size, weight, alignment, and expression template support.

textfontSizefontWeighttextAligneditable

Button

Configurable button with style variants, optional icon from any library, and event-driven actions.

labelvariantsizeiconiconLibraryevents

Icon

Standalone icon from Lucide, Fluent UI, or Font Awesome. Supports theme-aware colors, rotation, and flip transforms. Visual grid picker with search and recently used.

iconLibraryiconNamesizecolorrotationflipHflipV

Image

Image display with alt text and sizing options.

srcaltwidthheightobjectFit

Divider

Horizontal rule with configurable thickness, color, and margin.

thicknesscolormargin

Spacer

Vertical spacing control.

height

Rich Text

HTML content block for static content.

htmlmarginpadding

Search Bar

Search input that filters bound DataGrids on the same page.

placeholderboundTablemode

Filters

Dropdown, date range, and active filter chips that apply across all data components.

boundTablefieldNameoptions

Icons & Libraries

PortalForge includes a multi-library icon system with 90+ curated icons from three libraries. Icons can be added to buttons, KPI cards, navigation items, section headers, card titles, badges, and as standalone icon components.

Supported libraries

  • Lucide — 30 stroke-based icons. Clean, minimal style. Default library for backward compatibility.
  • Fluent UI — 30 fill-based icons from Microsoft's Fluent design system. 24px Regular variants.
  • Font Awesome — 30 solid fill icons from the Font Awesome free set.

Visual icon picker

The icon picker shows a searchable grid of icon thumbnails. Features include:

  • Library toggle — switch between Lucide, Fluent UI, and Font Awesome
  • Search — filter by name, display name, category, or search keywords
  • Recently used — last 8 selected icons shown at the top for quick re-use
  • Live preview — see the selected icon rendered inline in the picker trigger

Theme-aware colors

Icon colors can be set to theme tokens (Primary, Secondary, Accent, Text, Muted) so they automatically follow theme changes. Custom hex colors are also supported.

Rotation & flip

The standalone Icon component supports rotation (0°, 90°, 180°, 270°) and horizontal/vertical flip transforms. Useful for directional icons like arrows and chevrons.

Components that support icons

Icon (standalone)ButtonKPI CardBadgeSection headerCard headerNav itemsRow actions

Backward compatibility

Existing saved content with Lucide-only icon names continues to work. When no iconLibrary is specified, PortalForge defaults to Lucide.

Adding new libraries

The icon system is extensible. Each library is a self-contained registry with SVG path data and metadata. New libraries can be added by creating a registry file and registering it in the resolver.

Data Binding

Every data-bound component connects to a Dataverse table through the Data tab in the properties panel.

Binding scope

Control which records a component shows:

  • All records — no filtering, shows everything
  • Current user — filters by a field matching the logged-in user
  • Current record — loads a specific record (e.g. from a grid row click)
  • Custom filter — manual filter rules (field, operator, value)

Column selection

PortalForge only fetches the columns each component needs. A DataGrid showing 4 columns sends $select=col1,col2,col3,col4 — not the entire table.

Mock vs. Live mode

Switch between Mock data (built-in samples for prototyping) and Live Dataverse (real data from your environment) in Settings. Both modes use the same binding config.

Actions & Logic

12 action types. Chain them on any event. No JavaScript required.

NavigateGo to another page in the portal. Optionally pass record context.
Open ModalOpen a modal dialog by its ID.
Submit FormSubmit or reset a specific entity form.
Dataverse CreateCreate a new record in a Dataverse table with configured field values.
Dataverse UpdateUpdate an existing record using selected row or navigation context.
Dataverse DeleteDelete a record by its ID from a Dataverse table.
Set Field ValueSet a component property value dynamically.
Toggle VisibilityShow or hide a component by ID.
Set DisabledEnable or disable a component by ID.
Show NotificationDisplay a success, warning, error, or info toast message.
ConditionalIF/THEN/ELSE logic — evaluate a condition and run different action branches.
Run ScriptExecute a custom JavaScript expression (advanced use).

Event triggers

Actions can be attached to these component events:

onClickonChangeonLoadonSaveonRowSelectonViewonEditonDelete

Security

PortalForge uses the same security model as Power Pages — web roles and table permissions.

Security rules

Add rules at the page, component, or action level. Each rule specifies:

  • Scope — page, component, data source, or action
  • Roles — which web roles can access
  • Mode — any role (OR) or all roles (AND)
  • Deny behavior — hide completely or render as disabled
  • Anonymous access — allow unauthenticated users

Table permissions

Per-role, per-table CRUD toggles. Configured in the Permissions page. Controls Create, Read, Update, Delete per web role per Dataverse table.

Publishing

One-click publish deploys your portal to a Power Pages environment as a React Single Page Application.

SPA vs. traditional Power Pages

Traditional Power Pages portals are server-rendered Liquid templates — every page navigation triggers a full server round-trip. PortalForge portals are SPAs: they load once, then navigate between pages instantly on the client side. Data is fetched directly from Dataverse via the OData API. The portal still runs on Power Pages infrastructure and uses the same security model.

What happens when you publish

  1. PortalForge builds a production-optimized React SPA from your portal project
  2. Generates a publish manifest with all pages, components, security rules, and data sources
  3. Packages it as a Power Pages code site
  4. Uploads to your Power Pages environment
  5. Generates a minimal Liquid host template that bootstraps the SPA and injects user context

Requirements

  • Active Pro or Team subscription
  • A Power Pages environment with Dataverse
  • Azure AD authentication configured

Theming

Customize your portal's appearance through the Appearance panel in the top navigation bar.

Presets

5 built-in themes:

  • Fluent Corporate — Microsoft Fluent design system colors and Segoe UI font
  • Fluent UI — activates real Fluent UI v9 components (buttons, cards, tabs, badges, inputs) in the portal rendering surface
  • Modern SaaS — vibrant purple accent with Inter font
  • Minimal Light — neutral tones, clean borders, maximum readability
  • Dark Workspace — dark background with emerald accent for data-heavy dashboards

Overrides

After selecting a preset, override any individual token:

  • Colors — primary, secondary, background, surface, text, border, success/warning/error
  • Font family — applied to all portal text
  • Border radius — none, small, medium, large
  • Density — compact, comfortable, spacious
  • Shadow — none, soft, medium, strong
  • Component styles — button (solid/outline/subtle), card (flat/border/shadow), input (outline/filled/underline), nav (dark/light/accent)

Builder dark mode

The builder itself supports a dark mode toggle (Moon/Sun icon in the header). This affects only the builder UI (sidebar, header, panels, dropdowns) — the portal canvas remains unaffected and follows its own portal theme. Your dark mode preference is saved in localStorage and persists across sessions.