views.json
13 min
overview views json is the main configuration file of a purple experience application it defines every page (view) the app can show — what url it lives at, what components render on it, and what data it loads it also defines redirects and global data that applies to all views the file is an array of viewconfig , redirectconfig , and globalconfig entries when to use this edit views json whenever you need to add a new page to the app, change what a page renders, configure seo metadata, set up server side cache behaviour, or define url redirects all component and data source configuration lives in this file basic example \[ { "globaldata" \[ { "type" "json", "contextkey" "experienceconfig", "data" "resource //dynamic/storefront/assets/data/experience config json" } ] }, { "path" "home", "name" "home", "appbar" "default", "navigation" "bottom", "content" \[ { "type" "list", "template" "vertical", "datasource" { "type" "content", "contextkey" "articles", "batchsize" 10 }, "content" { "type" "content", "template" "card" } } ] }, { "path" "article/\ contentid", "name" "article detail", "postview" {}, "content" \[{ "type" "content body", "template" "full" }], "seo" { "og title" "$context content title", "og description" "$context content description" } }, { "path" "old home", "redirectto" "home" } ] the first entry (with globaldata ) loads configuration data once on startup, available everywhere as $global the second entry is the home view the third is a post view (article detail) the fourth is a redirect ßaq21^ configuration viewconfig — a page definition property type default description path string — required url path for the view supports path parameters ( \ paramname ) first matching view wins name string — required internal name used for tracking and navigation content componentconfig\[] — required array of components to render on the page appbar string — key of the app bar to display null hides the app bar navigation string — key of the tab navigation to display null hides navigation data datasourceconfig\[] — data sources loaded when the view opens — results go into $context postview object — marks this view as a post/bundle detail view title string — browser tab title defaults to the url seo object — seo meta tags — see seo configuration below docid\ eif8nobj 5yq4vqrjtgkp cache object — ssr cache control settings — see cache configuration below docid\ eif8nobj 5yq4vqrjtgkp pulltorefresh object — enables pull to refresh gesture on the view errormessage string view error translation key for the error message if the view fails to load errorbuttonlabel string view error button translation key for the reload button label on error pageconfigs object — page level ad configuration (e g traffective) viewtrackingparams object — additional tracking parameters sent with view tracking events jsonld string — json ld structured data string for seo errorpage boolean false marks this view as the error/404 page jumptocontentbutton object — configuration for the "jump to content" accessibility button seo configuration the seo property sets html \<meta> tags all values support $context interpolation "seo" { "og title" "$context content title", "og description" "$context content description", "og image" "$context content thumbnails default", "robots" "index, follow" } keys prefixed with og are set as \<meta property="og " content=" "> keys prefixed with article are set as \<meta property="article " content=" "> all other keys are set as \<meta name=" " content=" "> canonical and og url are set automatically — do not configure them here robots is only applied on custom domains on preview instances, noindex, nofollow is always used cache configuration the cache property controls ssr cache control headers all values are in seconds as strings "cache" { "maxage" "60", "stalewhilerevalidate" "3600", "staleiferror" "86400" } property default description maxage "60" how long the response is considered fresh (1 minute) stalewhilerevalidate "3600" how long to serve stale content while revalidating (1 hour) staleiferror "86400" how long to serve stale content if the origin errors (1 day) postview — content detail views setting postview tells the system this view renders a content detail page without it, the url resolver should decide the view or the system does not know how to link content items to this view "postview" { "posttype" "article" } if posttype is omitted or empty, the view is used as a fallback for any content type that has no dedicated view redirectconfig — url redirects { "path" "old path/\ id", "redirectto" "new path/\ id", "statuscode" 301, "condition" { "value" "$context platform", "operation" "equals", "comparevalue" "web" } } property type description path string url path this redirect listens to redirectto string | navigateactionconfig the target path or action condition object optional — only redirects when true statuscode number http status code for ssr redirects (default 301 ) globalconfig — app wide data a globalconfig entry (identified by having a globaldata key) loads data sources once at startup the results are available via $global \<contextkey> across all views { "globaldata" \[ { "type" "json", "contextkey" "appsettings", "data" "resource //dynamic/storefront/assets/data/settings json" } ] } access it anywhere in views json as $global appsettings myproperty advanced features path parameters path parameters ( \ paramname ) are automatically resolved to their api objects if recognised (e g \ publicationid resolves the publication from the catalog api) they are also available raw in $context pathparams paramname pulltorefresh "pulltorefresh" { "enabled" true, "threshold" 80 } when enabled, a pull down gesture on mobile triggers a full view refresh (all data sources reload, metadata updates) this also happens automatically on app resume and after login/purchase testing notes / edge cases data sources vs component data sources data on a view loads data before the view renders component level datasource loads when the component is mounted use data for things every component on the page needs (e g the current publication) use component datasource for list specific data seo on client side navigation seo meta tags are applied on every navigation, including client side the robots meta tag is not set on preview instances regardless of configuration cache only affects ssr the cache settings control the http cache control header sent by the ssr server they have no effect on client side navigation errorpage view only one view should be marked as errorpage true it is shown when any route match fails global data timing globaldata sources load before any view renders if they are slow, the entire app startup is delayed keep global data sources lean — load only what is truly needed on every page related topics datasources docid\ fumbuabweon oto5wfevf context system docid\ c0z2lrmscicnrsjymkvub url resolver docid\ gkzy7wd58h fc2qwqurgr