Context System

33 min

The context is the runtime data store that every component and data source in a Purple Experience view can read from.

It is a key-value object updated by the Experience as the user navigates, interacts, and as data sources finish loading.

Components reference context values in their config using $context.<key> — Experience replaces these at runtime with the actual values.

When to Use $context

Use $context.* in views.json whenever a component or data source needs to read runtime data, including:

Current publication

User attributes

Device type

Search query

Data source results

This is the primary mechanism for dynamic configuration without writing custom code.

Basic Examples

Example: Rendering a publication name

{ "type": "html", "tag": "h1", "text": "$context.publication.name" }

The heading renders the loaded publication name from $context.publication.

Example: Filtering content using context

{ "type": "list", "dataSource": { "type": "content", "contextKey": "articles", "filter": { "publication": { "id": { "value": "$context.publication.id" } } } }, "content": { "type": "content", "template": "card" } }

This list filters content items using the publication ID loaded into context.

Built-in Context Keys

Experience automatically populates these keys in every view.

Key	Type	Description
platform	string	WEB, IOS, or ANDROID
today	string	Current date in YYYY-MM-DD format
outlet	string	Active Angular router outlet
device_type	string	phone, tablet, or desktop
device_orientation	string	portrait or landscape
device_width	number	Browser window width
device_height	number	Browser window height
connection_state	string	ONLINE or OFFLINE
userAttributes	object	Persistent per-device user data
accountData	object	Logged-in user account data
initialUrl	string	Initial app URL
pathUrl	string	Current path URL
entitlement_token	string	Active entitlement token
preview	string	?preview= query param (web only)
preview_app	string	Preview metadata for in-app usage

Data Source Results in Context

When a data source defines a contextKey, the loaded results are published into $context.

Example

{ "type": "content", "contextKey": "articles", "batchSize": 10 }

After loading:

$context.articles contains the loaded array

$context.articles.totalCount contains total matching items

$context.articles.hasNextPage indicates whether more items exist

List and Swiper Item Injection

When a list or swiper renders child components, the current item is injected into the child context.

Default injected keys

Data source type	Injected key
content	$context.content
publication	$context.publication

Additional injected values:

$context.entryIndex

$context.groupIndex

Example: Custom entryId

{ "type": "list", "entryId": "article", "dataSource": { "type": "content", "contextKey": "articles" }, "content": { "type": "html", "tag": "h2", "text": "$context.article.title" } }

This makes the current item available as $context.article instead of $context.content.

URL Parameters in Context

All URL query parameters are automatically added to $context as raw strings.

Example:

?issueId=4711

Results in:

$context.issueId === "4711"

Automatically Resolved Parameters

Some query params are automatically resolved into full Catalog API objects.

Query param	Context key	Type
?publication=<id>	$context.publication	CatalogPublication
?issue=<id>	$context.issue	CatalogIssue
?content=<id>	$context.content	CatalogContent
?taxonomy=<id>	$context.taxonomy	CatalogTaxonomy
?collection=<id>	$context.collection	CatalogCollection
?category=<id>	$context.category	CatalogCategory
?post=<id>	$context.post	CatalogPost

Parameters ending in Id are not resolved automatically.

Path Parameters

Path segment values extracted by the URL resolver are available under $context.pathParams.

Example

Path definition:

/:publicationSlug/:contentSlug

Available values:

$context.pathParams.publicationSlug $context.pathParams.contentSlug

These values are raw strings, not resolved API objects.

$global — App-wide Data

Data loaded through globalData in GlobalConfig becomes available globally through $global.<contextKey>.

Example

"$global.experienceConfig.featureFlags.showBanner"

Important

$global is loaded once at app startup

It is not reactive

It does not update on navigation

Use $global for:

Feature flags

Shared app configuration

Global runtime settings

userAttributes

userAttributes is a persistent key-value map stored per device.

Access values using:

$context.userAttributes.<key>

Typical use cases:

Onboarding state

User preferences

Consent tracking

Attributes can be updated via:

set-user-attribute actions

JavaScript through the Purple API

$context vs $global vs $functions

Scope	Access	Description
$context	$context.key	Per-view reactive runtime data
$global	$global.key	App-wide startup data
$functions	$functions.myFn(arg)	Custom synchronous JS functions

Context Object Layers

The final $context object is built by merging multiple layers.

Later layers override earlier ones.

Layer	Contents
1	Metadata (platform, today, etc.)
2	URL query parameters
3	View context and resolved objects
4	Always-present fields (initialUrl, accountData, etc.)
5	Parent list/swiper injected item

Layer 5 has the highest precedence.

Context Updates

Experience updates context reactively.

Trigger	Changed keys	Timing
URL query param changes	Query params + resolved objects	On navigation
Data source loading	Data source contextKey	After API response
Metadata refresh	Metadata keys	Login/logout refresh
Entitlement changes	Entire component tree	Global re-evaluation
User attribute updates	userAttributes	On update
Account updates	accountData	After refresh
Network changes	connection_state	Online/offline transitions

Rapid synchronous updates are automatically coalesced into a single async re-evaluation.

Body Tag Attributes

Exerience automatically applies runtime context values to the HTML <body> element.

Example

Available Attributes

Attribute	Description
data-pxp-platform	Current platform
data-pxp-app_id	App ID in preview mode
Custom attributes	Configured through bodyAttributes

Example Configuration

{ "purple": { "bodyAttributes": ["device_type", "locale"] } }

Experience 5.0.0 Changes

Since Experience 5.0.0, only these categories are automatically added to the body tag:

Platform

App ID (preview only)

Explicitly configured custom attributes

If older automatic body attributes are required, add them to bodyAttributes manually.

Advanced Features

Use $context.entitlement_token to conditionally render content.

{ "type": "section", "condition": { "value": "$context.entitlement_token", "operation": "SET" }, "content": [ { "type": "html", "tag": "p", "text": "You are logged in" } ] }

Testing Notes & Edge Cases

$context.content vs $context.<contextKey>

Inside a list:

$context.content

Outside a list:

$context.articles

These are different values.

pathParams Keys

Path parameter keys match the slug name in the route definition.

Example:

/articles/:articleSlug

Available at:

$context.pathParams.articleSlug

$global Is Not Reactive

Changes to $global require a full application reload.

Falsy Value Normalisation

The following values are normalized to null:

undefined

null

false

"undefined"

"null"

"false"

Prefer SET / NOT_SET conditions over direct equality checks.

Deprecated $context.issue

$context.issue comes from the deprecated issue data source.

Prefer:

content data sources

$context.content

SSR Device Keys

These keys are browser-only and unavailable during SSR:

device_type

device_orientation

device_width

device_height

Experience Components

Data Sources

views.json

custom.js and $functions

Base Component and onConfigChange

Context System

When to Use $context

Basic Examples

Example: Rendering a publication name

Example: Filtering content using context

Built-in Context Keys

Data Source Results in Context

Example

List and Swiper Item Injection

Default injected keys

Example: Custom entryId

URL Parameters in Context

Automatically Resolved Parameters

Path Parameters

Example

$global — App-wide Data

Example

Important

userAttributes

$context vs $global vs $functions

Context Object Layers

Context Updates

Body Tag Attributes

Example

Available Attributes

Example Configuration

Experience 5.0.0 Changes

Advanced Features

Checking Login State

Testing Notes & Edge Cases

$context.content vs $context.<contextKey>

pathParams Keys

$global Is Not Reactive

Falsy Value Normalisation

Deprecated $context.issue

SSR Device Keys

Related Topics