Creatio Freedom UI · Remote module

Portfolio & program dashboard

A config-driven view element that visualizes a project portfolio across four modes. This guide walks through every view and feature with a live, emulated interface — switch the language above and the mockups relabel using the component's real strings.

4 languages: RU · UK · DE · EN 4 views Config-driven Server-side aggregation

01

Toolbar & view switch

The toolbar carries the title, the view switch, refresh, the View options menu and Settings. Which tabs appear is config-driven — hide any you don't need.

Four modes — Dashboard, Hierarchy, Matrix, Grid, switched instantly.
Visible tabs — choose which tabs to show via Settings → Visible tabs.
Auto-language — labels follow the user's Creatio culture (RU/UK/DE/EN).

Freedom UI

Portfolios & programs

02

Dashboard

KPI tiles across the whole portfolio, followed by summary cards per portfolio with a health dot, project counter, budget rollups and an average-progress bar.

Dashboard

Total projects

128

Portfolios 6 · Programs 21

Budget

$14.2M

Spent $9.8M

Avg. progress

67%

On track 74

At risk

9

Overdue 5

EMEA42 Projects

Budget$5.1M Spent$3.4M Avg. progress71%

Americas38 Projects

Budget$4.6M Spent$3.6M Avg. progress58%

03

Hierarchy (Board)

A kanban-style breakdown of Portfolio → Program → Project as columns. Each project card shows status, progress and health; scroll a column to reveal more, lazily.

Hierarchy

EMEA · Germany12

Atlas Rollout

In progress · 64%

Vega Migration

Completed · 100%

Nova Integration

At risk · 22%

Americas · USA15

Orion Platform

In progress · 48%

Helix CRM

Due soon · 81%

APAC · Japan9

Sakura Portal

In progress · 55%

Kaizen Ops

Completed · 100%

04

Matrix

Region → Country grouped rich product cards: image, quantity chip, manager, progress, status, current milestone and expected readiness date. Every card expands to a milestone timeline and can be enlarged to the full row.

Matrix

EMEA

Germany

Atlas Rollout

1,200 pcs

AKA. Krause

StatusIn progress

Progress64%

MilestoneUAT

Planned readiness30.11.2026

Nova Integration

640 pcs

MBM. Baumann

StatusAt risk

Progress22%

MilestoneDesign

Planned readiness14.02.2027

05

Grid

The same hierarchy as a compact table with configurable columns — progress, status, milestone, manager, budget, readiness — and per-group "in progress" counters.

Grid

Project	Status	Progress	Milestone	Manager	Budget
EMEA · Germany — In progress 8
Atlas Rollout	In progress	64%	UAT	A. Krause	$1.4M
Vega Migration	Completed	100%	Go-live	S. Lang	$0.9M
Nova Integration	At risk	22%	Design	M. Baumann	$2.1M
Americas · USA — In progress 11
Orion Platform	In progress	48%	Build	J. Reyes	$1.8M

Project

Status

Progress

Milestone

Manager

Budget

EMEA · Germany — In progress 8

Atlas Rollout

In progress

64%

UAT

A. Krause

$1.4M

Vega Migration

Completed

100%

Go-live

S. Lang

$0.9M

Nova Integration

At risk

22%

Design

M. Baumann

$2.1M

Americas · USA — In progress 11

Orion Platform

In progress

48%

Build

J. Reyes

$1.8M

06

Filters & summary strip

Matrix and Grid share a summary strip (Total / In progress / Done / Canceled) and a Region / Status / Milestone filter row. Reset returns to the full set.

Matrix

128

Total projects

74

In progress

45

Done

9

Canceled

Region

All

Status

In progress

Milestone

All

07

View options menu

The sliders icon opens a menu that toggles each display parameter — visible columns, cards per row, product image, milestone breakdown, summary, filters, group totals. Every mode has its own set, and choices are saved automatically.

Turn any block on or off per mode.
Cards-per-row stepper (Auto or a fixed count) for the Matrix.
Persisted in the component settings — no redeploy needed.

View options

Summary tiles

Filter row

Product image

Milestone breakdown

Group totals

Cards per rowAuto

08

Milestone timeline & tasks

Expanding a Matrix card renders a phase-progress timeline: completed phases struck through with a check, the current phase highlighted, pending phases hollow, an optional per-phase day count, and a third level of tasks nested under each phase.

Phase progress

Design
14 d
Build
45 d
UAT
21 d
- Test scripts prepared
- Business sign-off
- Defect retest
Go-live
7 d

09

Settings dialog

All schema and column mappings are picked from dropdowns (Form mode), or edited raw as JSON. Settings persist to the SynComponentSettings table keyed by the element code — no rebuild required.

Settings

Project schema

Project

Status

SynStatusId

Progress

Budget

Milestone

SynMilestoneId

Visible tabs

Matrix · Grid

Settings are stored in the SynComponentSettings table by element code: SynConfigJson

10

Server-side aggregation

Three read paths are offloaded to the SynPortfolioService web service so the browser does less work. Each one degrades gracefully — if the method isn't published, the component falls back to an equivalent client query and keeps working.

GetRecordsCount

Record-count badge

The total project count for the header badge.

GetFeedCounts

Feed badges

SocialMessage counts in one GROUP BY instead of pulling raw feed rows.

Fallback: scoped, chunked client IN query.

GetPortfolioMetrics

Full-dataset money & progress KPIs

Budget, actual cost, progress, completed and overdue over the whole set in one COUNT/SUM pass — so tiles aren't understated when data exceeds one page.

Fallback: page-scoped client sums.

11

Filtering & page binding

Beyond the JSON settings, three designer-bound inputs scope the dashboard. They combine with AND.

1

Nothing bound

Shows all projects of the configured schema (up to pageSize).

2

recordColumn + recordId

Scopes to one record — place on a Portfolio/Program page and bind recordId → $Id.

3

folderId = GUID list

Shows only projects whose own Id is in the comma-separated list.

4

folderId = filter object

A page filter is detected and applied as-is (FILTER_OBJECT mode).

12

Configuration keys

The most-used keys of the config JSON. Column names are supplied through the designer; the component binds to any project entity.

Key	Meaning
Core
`schemaName`	Project entity schema (required)
`titleColumn`	Project name column
`portfolioColumn` · `programColumn`	Lookups to portfolio and program
`statusColumn` · `progressColumn`	Status lookup and numeric completion
`budgetColumn` · `actualCostColumn`	Planned budget and actual cost
Matrix & milestones
`milestoneColumn` · `imageColumn` · `quantityColumn`	Current milestone, product image, quantity chip
`milestoneSchema` · `milestoneParentColumn`	Milestone detail schema + link to project
`taskSchema` · `taskParentColumn`	Task detail schema (third level)
Display
`defaultView` · `enabledViews`	Starting view and which tabs to show
`currency` · `pageSize` · `componentHeight`	Currency, page size, component height