Context System

context system overview 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 \<body data pxp platform="web" data pxp app id="my app"> 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 checking login state 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 related topics experience components docid\ osni9cwzjyrd2 tyz4f15 datasources docid\ fumbuabweon oto5wfevf views json custom js and $functions base component and onconfigchange