Bundles 2.0 Demo Repo Gobert

Bonjour Gobert.!

Welcome to the Bundles 2.0 Live Demo. The main audience for this demo is existing developers working within Expression looking for a "crash course" on the new stuff Bundles 2.0 provides - and analogues to existing techniques that will be familiar to individuals with experience developing within Expression.

If you're not familiar with Expression - find us over at expression.cloud. Expression is a fully customizable SaaS CMS, Digital Commerce, and Development Platform that empowers developers and marketers to build amazing digital experiences together. Bundles are just one part of that experience so if you've stumbled upon us, take a look - If you've been looking for an alternative to Wordpress, Drupal, Magento, and all the usual suspects, you've found what you're looking for.

Entry Point

This page, like all pages in Expression, is rendered with an Element. An Element is an HTML template for marking up data pulled from Datasources, used to render blocks of content. Elements are based on the Handlebars templating language. Elements can reference other Elements, allowing for modular markup construction

The Element rendering this page (template.hbs) can be viewed in GitHub here: xpr/element/template.hbs

Each Element can optionally have a configuration file. The configuration for this Element can be viewed in GitHub here: xpr/element_config/template.json

This page is using Elements to render links to files in GitHub: {{{XprElement bundlePath="git_link" options.path="xpr/element/git_link.hbs"}}}.

Output:

xpr/element/git_link.hbs .

Bundle Web Directory

Bundles can now include static media. This is great for custom images or assets which should be developer managed, rather than client managed. Static media lives in the bundle's web directory: xpr/web/

Using for CSS and JS

This is how we include the CSS and JS for this bundle: href="{{{WebRoot xpr.bundle}}}/css/devon-custom.css"

Developers may be interested in using this feature to use CSS/JS compilers or js package managers to compile custom css, and place the end result in the /xpr/web/ directory.

Request Context

Let's see how you can dump context variables using the XprJson. We will dump the xpr variable

. This is the same xpr variable you may be used to from working with Elements in traditional Bundles.


                {{{XprJson xpr}}}

Output:


                {"settings":[],"request":{"debug":false,"uri":"\/","pageLandingType":"section","cookies":[],"domain":{"_links":{"self":{"href":"\/api\/sections\/7","title":"Section","name":"\/"},"sectionTypes":{"href":"\/api\/sectionTypes\/","title":"SectionType"},"find":{"href":"\/api\/sections\/{id}","templated":true}},"Id":7,"SortOrder":1,"Path":null,"Status":1,"Type":"domain","UsesPlaylists":false,"Variables":"","Popup":null,"UsesPermissions":false,"UsesSSL":true,"Target":"default","Config":null,"ModId":null,"Aliasing":null,"LockParent":null,"CreatedBy":null,"AdminTemplate":null,"Package":null,"ComponentDir":null,"ComponentFile":null,"RestrictedLink":"","DocType":"strict","LastModified":"2023-05-23 20:58:25","CreatedOn":null,"UrlRemainderPattern":"","ComputedDisplayDate":null,"RendererBundlePath":":template-git-bundles-Expresia\/element\/template","DomainAliases":["colnago.com"],"IsPrimaryDomain":true,"Name":"colnagodevelopment.xpr.cloud","Description":"","MetaTagKeywords":"","MetaTagDescription":"The World's Largest Bicycle Store Since 1976. Premium Bicycle Brands at Great Prices. Extensive Selection of High Quality Bikes, Frames, Wheels, Helmets, Shoes, Parts & Gear.","Title":"colnagodevelopment.xpr.cloud","Slug":"colnagodevelopment.xpr.cloud","Invisible":0,"DefaultPageTitle":"Colnago \u2013 The most successful bikes in the world","CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/","_locale":"en_CA","IsActive":false,"_UsesPermissions":"unrestricted","_embedded":{"Links":[{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/","_locale":"en_CA"},{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/it\/","_locale":"it_IT"},{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/es\/","_locale":"es_CO"},{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/fr\/","_locale":"fr_CA"},{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/de\/","_locale":"de_DE"}],"Children":[{"_links":{"self":{"href":"\/api\/sections\/5028","title":"Section","name":"\/"}},"Id":5028},{"_links":{"self":{"href":"\/api\/sections\/5029","title":"Section","name":"\/"}},"Id":5029},{"_links":{"self":{"href":"\/api\/sections\/5030","title":"Section","name":"\/"}},"Id":5030},{"_links":{"self":{"href":"\/api\/sections\/5031","title":"Section","name":"\/"}},"Id":5031},{"_links":{"self":{"href":"\/api\/sections\/5032","title":"Section","name":"\/"}},"Id":5032},{"_links":{"self":{"href":"\/api\/sections\/5033","title":"Section","name":"\/"}},"Id":5033},{"_links":{"self":{"href":"\/api\/sections\/5048","title":"Section","name":"\/"}},"Id":5048},{"_links":{"self":{"href":"\/api\/sections\/5055","title":"Section","name":"\/"}},"Id":5055},{"_links":{"self":{"href":"\/api\/sections\/5062","title":"Section","name":"\/"}},"Id":5062},{"_links":{"self":{"href":"\/api\/sections\/5066","title":"Section","name":"\/"}},"Id":5066},{"_links":{"self":{"href":"\/api\/sections\/5071","title":"Section","name":"\/"}},"Id":5071},{"_links":{"self":{"href":"\/api\/sections\/5079","title":"Section","name":"\/"}},"Id":5079},{"_links":{"self":{"href":"\/api\/sections\/5109","title":"Section","name":"\/"}},"Id":5109},{"_links":{"self":{"href":"\/api\/sections\/5119","title":"Section","name":"\/"}},"Id":5119},{"_links":{"self":{"href":"\/api\/sections\/5121","title":"Section","name":"\/"}},"Id":5121},{"_links":{"self":{"href":"\/api\/sections\/5127","title":"Section","name":"\/"}},"Id":5127},{"_links":{"self":{"href":"\/api\/sections\/5147","title":"Section","name":"\/"}},"Id":5147},{"_links":{"self":{"href":"\/api\/sections\/5160","title":"Section","name":"\/"}},"Id":5160},{"_links":{"self":{"href":"\/api\/sections\/5169","title":"Section","name":"\/"}},"Id":5169},{"_links":{"self":{"href":"\/api\/sections\/5170","title":"Section","name":"\/"}},"Id":5170}],"Translations":[{"_links":{"self":{"href":"\/api\/sections\/7","title":"Section","name":"\/"}},"Id":7}],"DomainLanguages":[{"_links":{"self":{"href":"\/api\/domainlanguages\/27","title":"DomainLanguage","name":"\/"}},"Id":27},{"_links":{"self":{"href":"\/api\/domainlanguages\/28","title":"DomainLanguage","name":"\/"}},"Id":28},{"_links":{"self":{"href":"\/api\/domainlanguages\/29","title":"DomainLanguage","name":"\/"}},"Id":29},{"_links":{"self":{"href":"\/api\/domainlanguages\/30","title":"DomainLanguage","name":"\/"}},"Id":30},{"_links":{"self":{"href":"\/api\/domainlanguages\/31","title":"DomainLanguage","name":"\/"}},"Id":31}],"SectionPermissions":[{"_links":{"self":{"href":"\/api\/sectionPermissions\/1832","title":"SectionPermission","name":"\/"}},"Id":1832},{"_links":{"self":{"href":"\/api\/sectionPermissions\/1833","title":"SectionPermission","name":"\/"}},"Id":1833}],"CustomFields":{"_links":{"self":{"href":"\/api\/resourceSchema\/sections\/7\/","title":"ResourceSchema","name":"\/"}},"_embedded":{"BannerDesktop":"","BannerResponsive":"","SolidHeader":{"Id":119,"Value":"1"},"Countries":[]},"BannerDescriptionOne":"","BannerDescriptionTwo":"","BigTours":"14","WorldChampionships":"62","ClassicRaces":"3173","Olympics":"33","BannerDescriptionThree":""}}},"store":{"_links":{"self":{"href":"\/api\/store\/stores\/1","title":"Store","name":"\/"},"find":{"href":"\/api\/store\/stores\/{id}","templated":true}},"Id":1,"Name":"Default Store","StreetAddress":null,"Apartment":null,"PostalCode":null,"City":null,"PhoneNumber":null,"CurrencyId":1,"DefaultLocale":"","InventoryManagement":"physical","BackOrdersEnabled":false,"AdditionalOrderEmails":null,"UserGroupId":1,"IsDefault":null,"DefaultCustomerType":0,"LoginOnRegistration":false,"UseEmailAsLogin":false,"TimezoneId":0,"InitialOrderStatus":"Pending","ActiveCategoryIdVarName":null,"ActiveProductIdVarName":null,"DisplayOutOfStock":false,"InvoiceTemplateId":0,"SubscriptionEmailTemplateId":0,"DomainId":7,"_embedded":{"Country":{"_links":{"self":{"href":"\/api\/store\/countries\/1","title":"Country","name":"\/"}},"Id":1},"Region":{"_links":{"self":{"href":"\/api\/store\/countryRegions\/1","title":"CountryRegion","name":"\/"}},"Id":1},"Domain":{"_links":{"self":{"href":"\/api\/sections\/7","title":"Section","name":"\/"}},"Id":7}}},"users":[],"section":{"_links":{"self":{"href":"\/api\/sections\/7","title":"Section","name":"\/"},"sectionTypes":{"href":"\/api\/sectionTypes\/","title":"SectionType"},"find":{"href":"\/api\/sections\/{id}","templated":true}},"Id":7,"SortOrder":1,"Path":null,"Status":1,"Type":"domain","UsesPlaylists":false,"Variables":"","Popup":null,"UsesPermissions":false,"UsesSSL":true,"Target":"default","Config":null,"ModId":null,"Aliasing":null,"LockParent":null,"CreatedBy":null,"AdminTemplate":null,"Package":null,"ComponentDir":null,"ComponentFile":null,"RestrictedLink":"","DocType":"strict","LastModified":"2023-05-23 20:58:25","CreatedOn":null,"UrlRemainderPattern":"","ComputedDisplayDate":null,"RendererBundlePath":":template-git-bundles-Expresia\/element\/template","DomainAliases":["colnago.com"],"IsPrimaryDomain":true,"Name":"colnagodevelopment.xpr.cloud","Description":"","MetaTagKeywords":"","MetaTagDescription":"The World's Largest Bicycle Store Since 1976. Premium Bicycle Brands at Great Prices. Extensive Selection of High Quality Bikes, Frames, Wheels, Helmets, Shoes, Parts & Gear.","Title":"colnagodevelopment.xpr.cloud","Slug":"colnagodevelopment.xpr.cloud","Invisible":0,"DefaultPageTitle":"Colnago \u2013 The most successful bikes in the world","CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/","_locale":"en_CA","IsActive":true,"_UsesPermissions":"unrestricted","_embedded":{"Links":[{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/","_locale":"en_CA"},{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/it\/","_locale":"it_IT"},{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/es\/","_locale":"es_CO"},{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/fr\/","_locale":"fr_CA"},{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/de\/","_locale":"de_DE"}],"Children":[{"_links":{"self":{"href":"\/api\/sections\/5028","title":"Section","name":"\/"}},"Id":5028},{"_links":{"self":{"href":"\/api\/sections\/5029","title":"Section","name":"\/"}},"Id":5029},{"_links":{"self":{"href":"\/api\/sections\/5030","title":"Section","name":"\/"}},"Id":5030},{"_links":{"self":{"href":"\/api\/sections\/5031","title":"Section","name":"\/"}},"Id":5031},{"_links":{"self":{"href":"\/api\/sections\/5032","title":"Section","name":"\/"}},"Id":5032},{"_links":{"self":{"href":"\/api\/sections\/5033","title":"Section","name":"\/"}},"Id":5033},{"_links":{"self":{"href":"\/api\/sections\/5048","title":"Section","name":"\/"}},"Id":5048},{"_links":{"self":{"href":"\/api\/sections\/5055","title":"Section","name":"\/"}},"Id":5055},{"_links":{"self":{"href":"\/api\/sections\/5062","title":"Section","name":"\/"}},"Id":5062},{"_links":{"self":{"href":"\/api\/sections\/5066","title":"Section","name":"\/"}},"Id":5066},{"_links":{"self":{"href":"\/api\/sections\/5071","title":"Section","name":"\/"}},"Id":5071},{"_links":{"self":{"href":"\/api\/sections\/5079","title":"Section","name":"\/"}},"Id":5079},{"_links":{"self":{"href":"\/api\/sections\/5109","title":"Section","name":"\/"}},"Id":5109},{"_links":{"self":{"href":"\/api\/sections\/5119","title":"Section","name":"\/"}},"Id":5119},{"_links":{"self":{"href":"\/api\/sections\/5121","title":"Section","name":"\/"}},"Id":5121},{"_links":{"self":{"href":"\/api\/sections\/5127","title":"Section","name":"\/"}},"Id":5127},{"_links":{"self":{"href":"\/api\/sections\/5147","title":"Section","name":"\/"}},"Id":5147},{"_links":{"self":{"href":"\/api\/sections\/5160","title":"Section","name":"\/"}},"Id":5160},{"_links":{"self":{"href":"\/api\/sections\/5169","title":"Section","name":"\/"}},"Id":5169},{"_links":{"self":{"href":"\/api\/sections\/5170","title":"Section","name":"\/"}},"Id":5170}],"Translations":[{"_links":{"self":{"href":"\/api\/sections\/7","title":"Section","name":"\/"}},"Id":7}],"DomainLanguages":[{"_links":{"self":{"href":"\/api\/domainlanguages\/27","title":"DomainLanguage","name":"\/"}},"Id":27},{"_links":{"self":{"href":"\/api\/domainlanguages\/28","title":"DomainLanguage","name":"\/"}},"Id":28},{"_links":{"self":{"href":"\/api\/domainlanguages\/29","title":"DomainLanguage","name":"\/"}},"Id":29},{"_links":{"self":{"href":"\/api\/domainlanguages\/30","title":"DomainLanguage","name":"\/"}},"Id":30},{"_links":{"self":{"href":"\/api\/domainlanguages\/31","title":"DomainLanguage","name":"\/"}},"Id":31}],"SectionPermissions":[{"_links":{"self":{"href":"\/api\/sectionPermissions\/1832","title":"SectionPermission","name":"\/"}},"Id":1832},{"_links":{"self":{"href":"\/api\/sectionPermissions\/1833","title":"SectionPermission","name":"\/"}},"Id":1833}],"CustomFields":{"_links":{"self":{"href":"\/api\/resourceSchema\/sections\/7\/","title":"ResourceSchema","name":"\/"}},"_embedded":{"BannerDesktop":"","BannerResponsive":"","SolidHeader":{"Id":119,"Value":"1"},"Countries":[]},"BannerDescriptionOne":"","BannerDescriptionTwo":"","BigTours":"14","WorldChampionships":"62","ClassicRaces":"3173","Olympics":"33","BannerDescriptionThree":""}}},"article":{"_links":{"self":{"href":"\/api\/articles\/1988","title":"Article","name":"\/"}},"Id":1988,"Title":"A new icon is born","PageTitle":"","Description":"<iframe src=\"https:\/\/player.vimeo.com\/video\/701281235?h=bafeeb69f8&amp;title=0&amp;byline=0&amp;portrait=0&amp;speed=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479\" width=\"1920\" height=\"1080\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen title=\"Colnago C68\"><\/iframe>","Html":"<p>The pinnacle of Colnago craftsmanship<\/p>\n","CreatedOn":"2022-04-20 19:56:47","Active":1,"PendingArticleId":0,"MetaTagKeywords":"","MetaTagDescription":"","CreatedBy":468,"Homepage":false,"SortOrder":0,"Invisible":false,"Searchable":false,"StartDate":null,"EndDate":null,"DisplayDate":null,"LanguageParentId":1988,"ArticleLink":false,"ArticleLinkUrl":"","ArticleLinkRedirect":false,"RenderLinkedArticleUrl":false,"LastModified":"2022-05-13 17:10:37","LastModifiedBy":0,"Slug":"testo1","CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/testo1","RendererBundlePath":"","_embedded":{"Section":{"_links":{"self":{"href":"\/api\/sections\/7","title":"Section","name":"\/"}},"Id":7},"Language":{"_links":{"self":{"href":"\/api\/languages\/1","title":"Language","name":"\/"}},"Id":1},"Domain":{"_links":{"self":{"href":"\/api\/sections\/7","title":"Section","name":"\/"}},"Id":7},"CustomFields":{"_links":{"self":{"href":"\/api\/resourceSchema\/articles\/1988\/","title":"ResourceSchema","name":"\/"}},"ButtonName":"","_embedded":{"ResponsiveImageBanner":"","ResponsiveMiddleBanner":"","CategoryManual":null,"ArticlesTechnical":[],"GalleryStore":[],"TypeOfRace":null,"Members":[],"Gender":null,"Gallery":[],"CompetitionName":null,"VideoFile":"","Countries":[],"BannerAdditional":"","BannerAdditionalResponsive":"","ImagenAdditionalStorie":"","TypeAwardAchivement":null,"Activities":null,"AwardCategory":null,"Carrers":null,"EventLocation":null,"Cities":[]},"Lat":"","Logn":"","TextOne":"","TextTwo":"","Address":"","PhoneNumber":"","Schedule":"","BannerDescriptionOne":"","BannerDescriptionTwo":"","Length":"","Hour":"","StartingPoint":"","Twitter":"","Facebook":"","Instagram":"","WebsiteURL":"","Country":"","IdObjectRanking":"","Pageweb":"","Emailstore":"","ZipCode":"","LinkVideo":"","MiddleTitle":"","MiddleDescription":"","TitleAdditional":"","DescriptionAdditional":"","AdditionalText":"","LongDescriptionStorie":"","CategoryAchivement":"","Hourpractice":"","DistanceRide":"","UserId":"","Awardyear":"","AwardStage":"","RideNumber":"","MinutesPractice":"","AwardRace":"","LinkRegisterEvent":"","IframeVideo":"","BannerDescriptionThree":"","Authorizedstore":""}}},"urlParams":{"section_id":"7","section_copy_id":"0"},"user":null,"language":{"_links":{"self":{"href":"\/api\/languages\/1","title":"Language","name":"\/"},"find":{"href":"\/api\/languages\/{id}","templated":true}},"Id":1,"Name":"English","Default":true,"Active":true,"IsoCode":"en","Abbreviation":"EN","IsoCode2":"CA","Locale":"en_CA"},"client":{"ip_address":"3.15.149.227","http_accept":"*\/*","http_accept_charset":null,"http_accept_encoding":"gzip","http_accept_language":null,"http_referer":null,"http_user_agent":"Mozilla\/5.0 AppleWebKit\/537.36 (KHTML, like Gecko; compatible; ClaudeBot\/1.0; +claudebot@anthropic.com)"},"body":"","headers":{"X-Varnish":"692940092","Accept-Encoding":"gzip","X-Forwarded-For":"3.15.149.227","Host":"colnagodevelopment.xpr.cloud","User-Agent":"Mozilla\/5.0 AppleWebKit\/537.36 (KHTML, like Gecko; compatible; ClaudeBot\/1.0; +claudebot@anthropic.com)","Accept":"*\/*","X-Forwarded-Proto":"https","X-Real-Ip":"3.15.149.227","Xff-Stripping":"3.15.149.227","Authorization":""}},"site":{"home":{"section":{"_links":{"self":{"href":"\/api\/sections\/7","title":"Section","name":"\/"},"sectionTypes":{"href":"\/api\/sectionTypes\/","title":"SectionType"},"find":{"href":"\/api\/sections\/{id}","templated":true}},"Id":7,"SortOrder":1,"Path":null,"Status":1,"Type":"domain","UsesPlaylists":false,"Variables":"","Popup":null,"UsesPermissions":false,"UsesSSL":true,"Target":"default","Config":null,"ModId":null,"Aliasing":null,"LockParent":null,"CreatedBy":null,"AdminTemplate":null,"Package":null,"ComponentDir":null,"ComponentFile":null,"RestrictedLink":"","DocType":"strict","LastModified":"2023-05-23 20:58:25","CreatedOn":null,"UrlRemainderPattern":"","ComputedDisplayDate":null,"RendererBundlePath":":template-git-bundles-Expresia\/element\/template","DomainAliases":["colnago.com"],"IsPrimaryDomain":true,"Name":"colnagodevelopment.xpr.cloud","Description":"","MetaTagKeywords":"","MetaTagDescription":"The World's Largest Bicycle Store Since 1976. Premium Bicycle Brands at Great Prices. Extensive Selection of High Quality Bikes, Frames, Wheels, Helmets, Shoes, Parts & Gear.","Title":"colnagodevelopment.xpr.cloud","Slug":"colnagodevelopment.xpr.cloud","Invisible":0,"DefaultPageTitle":"Colnago \u2013 The most successful bikes in the world","CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/","_locale":"en_CA","IsActive":false,"_UsesPermissions":"unrestricted","_embedded":{"Links":[{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/","_locale":"en_CA"},{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/it\/","_locale":"it_IT"},{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/es\/","_locale":"es_CO"},{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/fr\/","_locale":"fr_CA"},{"_links":{"self":{"href":"\/api\/sections\/sectionlink\/","title":"Section","name":"\/"}},"CanonicalUrl":"https:\/\/colnagodevelopment.xpr.cloud\/de\/","_locale":"de_DE"}],"Children":[{"_links":{"self":{"href":"\/api\/sections\/5028","title":"Section","name":"\/"}},"Id":5028},{"_links":{"self":{"href":"\/api\/sections\/5029","title":"Section","name":"\/"}},"Id":5029},{"_links":{"self":{"href":"\/api\/sections\/5030","title":"Section","name":"\/"}},"Id":5030},{"_links":{"self":{"href":"\/api\/sections\/5031","title":"Section","name":"\/"}},"Id":5031},{"_links":{"self":{"href":"\/api\/sections\/5032","title":"Section","name":"\/"}},"Id":5032},{"_links":{"self":{"href":"\/api\/sections\/5033","title":"Section","name":"\/"}},"Id":5033},{"_links":{"self":{"href":"\/api\/sections\/5048","title":"Section","name":"\/"}},"Id":5048},{"_links":{"self":{"href":"\/api\/sections\/5055","title":"Section","name":"\/"}},"Id":5055},{"_links":{"self":{"href":"\/api\/sections\/5062","title":"Section","name":"\/"}},"Id":5062},{"_links":{"self":{"href":"\/api\/sections\/5066","title":"Section","name":"\/"}},"Id":5066},{"_links":{"self":{"href":"\/api\/sections\/5071","title":"Section","name":"\/"}},"Id":5071},{"_links":{"self":{"href":"\/api\/sections\/5079","title":"Section","name":"\/"}},"Id":5079},{"_links":{"self":{"href":"\/api\/sections\/5109","title":"Section","name":"\/"}},"Id":5109},{"_links":{"self":{"href":"\/api\/sections\/5119","title":"Section","name":"\/"}},"Id":5119},{"_links":{"self":{"href":"\/api\/sections\/5121","title":"Section","name":"\/"}},"Id":5121},{"_links":{"self":{"href":"\/api\/sections\/5127","title":"Section","name":"\/"}},"Id":5127},{"_links":{"self":{"href":"\/api\/sections\/5147","title":"Section","name":"\/"}},"Id":5147},{"_links":{"self":{"href":"\/api\/sections\/5160","title":"Section","name":"\/"}},"Id":5160},{"_links":{"self":{"href":"\/api\/sections\/5169","title":"Section","name":"\/"}},"Id":5169},{"_links":{"self":{"href":"\/api\/sections\/5170","title":"Section","name":"\/"}},"Id":5170}],"Translations":[{"_links":{"self":{"href":"\/api\/sections\/7","title":"Section","name":"\/"}},"Id":7}],"DomainLanguages":[{"_links":{"self":{"href":"\/api\/domainlanguages\/27","title":"DomainLanguage","name":"\/"}},"Id":27},{"_links":{"self":{"href":"\/api\/domainlanguages\/28","title":"DomainLanguage","name":"\/"}},"Id":28},{"_links":{"self":{"href":"\/api\/domainlanguages\/29","title":"DomainLanguage","name":"\/"}},"Id":29},{"_links":{"self":{"href":"\/api\/domainlanguages\/30","title":"DomainLanguage","name":"\/"}},"Id":30},{"_links":{"self":{"href":"\/api\/domainlanguages\/31","title":"DomainLanguage","name":"\/"}},"Id":31}],"SectionPermissions":[{"_links":{"self":{"href":"\/api\/sectionPermissions\/1832","title":"SectionPermission","name":"\/"}},"Id":1832},{"_links":{"self":{"href":"\/api\/sectionPermissions\/1833","title":"SectionPermission","name":"\/"}},"Id":1833}],"CustomFields":{"_links":{"self":{"href":"\/api\/resourceSchema\/sections\/7\/","title":"ResourceSchema","name":"\/"}},"_embedded":{"BannerDesktop":"","BannerResponsive":"","SolidHeader":{"Id":119,"Value":"1"},"Countries":[]},"BannerDescriptionOne":"","BannerDescriptionTwo":"","BigTours":"14","WorldChampionships":"62","ClassicRaces":"3173","Olympics":"33","BannerDescriptionThree":""}}}}},"server":{"date":"2024-12-17"},"instance_id":"colnago_development_xpr_cloud","bundle":"template-git-bundles-Expresia"}

About Element

Demonstrates using {{{XprElement}}} to pull in an Element

The code for this Element (about.hbs) can be viewed in GitHub here: xpr/element/about.hbs

{{{XprElement bundlePath="about"}}}

Output:

... Hello! I am a Sub Element!

This repository intends to practically demonstrate how to accomplish the main mechanics of development in Expression using the Bundles 2.0 framework. This Element is a simple snippet of static HTML.

Attached Data

For these examples, we will be pulling data from bundles-demo.xpr.cloud's Content Management API's

The Element rendering this page (template.hbs) can be viewed in GitHub here: xpr/element/template.hbs

The configuration for this Element can be viewed in GitHub here: xpr/element_config/template.json

An Element's configuration includes the Datasources attached, and any options to configure those Datasources. This template Element has a Datasource attached which uses the datasource/articles_by_section.json Datasource Definitionto populate the variable {{PageArticles}} for this Element.


                {{#each PageArticles}}
                    <li> {{Title}} </li>
                {{/each}}

Handmade Bicycles
Welcome to C68
Colnago Studio
4 YEARS OF R&D
White Glove
MASTERY
ITALIANITY
Blockchain: the future of bike ownership
Colnago Blockchain
Tadej Pogačar
PRIDE
image
White Glove
COLNAGO ENTERS THE BLOCKCHAIN
SEDUCTION
EXCLUSIVITY
ACENESS
HERITAGE
A new icon is born

Context Passing

Elements can have data from the root (also known as parent) context passed into them to be rendered. Here we are going to loop over the same data as in the Attached Data context, but instead of rendering each article inline, pass the article to a sub Element for rendering. xpr/element/details/article_details.hbs


                {{#each PageArticles}}
                    {{{XprElement bundlePath="details/article_details" context.Article=this}}}
                {{/each}}

Output:

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:Handmade Bicycles

Html:

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:Welcome to C68

Html:

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:

Html:

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:Colnago Studio

Html:

Create your very own Colnago bike, fully customised to your needs and desires. Unleash your creativity, and watch your dreams come to life. We'll produce it and deliver it to you.

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:4 YEARS OF R&D

Html:

The C-series tradition continues with great innovations. Discover why the C68 is the best Colnago ever made. Proudly handmade in Italy.

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:White Glove

Html:

A Colnago representative will deliver your bike right to your doorstep. Enjoy the unboxing and final setup, in our own Colnago style.

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:MASTERY

Html:

We were guided by a true Master: Ernesto Colnago, the expert and visionary.

We still carry his wisdom and artisan skill to create superior experiences and reliable high-end products.

We are pioneers, we strive to design the future today.

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:ITALIANITY

Html:

The Italian passion runs through our veins.

We pursue a legacy of style, high-quality and fine details that gave place to the most enduring and attractive cultures on Earth.

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:Blockchain: the future of bike ownership

Html:

All our bikes are equipped with a unique NFC tag - linked to the MyLime® Polygon Blockchain - indissolubly associated with the bicycle. This solves many problems of bike ownership.

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:Colnago Blockchain

Html:

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:Tadej Pogačar

Html:

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:PRIDE

Html:

We are proud of our victories.

We are proud of our history, and proud of what we are to become.

Our long track of triumphs leads the way to our future.

We admire the eternal beauty of craftsmanship and art and aim to convey such admiration.

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:image

Html:

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:White Glove

Html:

Live the luxurious experience of having your bike delivered right to your doorstep. Enjoy the unboxing and final setup, in our own Colnago style.

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:

Html:

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:COLNAGO ENTERS THE BLOCKCHAIN

Html:

Blockchain and NFTs: positive or a big scam? Our opinion: it's up to us to use them for good. We believe that with NFTs we can solve many problems. See how.

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:

Html:

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:SEDUCTION

Html:

We follow the shapes, the colours and lines that define seduction.

We provoke emotions through our exquisite and aspirational lifestyle experiences.

We create attractive and breathtaking products that make people turn around in awe.

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:EXCLUSIVITY

Html:

We create iconic, elegant and breakthrough products that elevate everyday’s life standards and inspire each person to experience a sophisticated and exclusive way of living.

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:ACENESS

Html:

We are the Ace of Cycling.

We pursue nothing but excellence. We aim for the best at everything we do.

The audacious and victorious attitude of champions inspires us to create the most thriving and pioneer experiences.

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:HERITAGE

Html:

We deeply honour our heritage –a history full of innovations, victories and glories.

We admire the beauty and elegance of legendary art.

We live to eternalise the icon Colnago represents.

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:

Html:

I am a Sub Element. I accept "Article" objects and render them. Here is a rendering of the article that was passed into me:

Title:A new icon is born

Html:

The pinnacle of Colnago craftsmanship

Element Options

"Sub" Elements can also have their own Datasources attached. While it is usually better to "fetch up front and pass down", sometimes you want an Element which controls and fetches its own data. Here we demonstrate an Element which will fetch an article based on Id, and we will use the PageArticles variable from the previous example to supply the list of Ids.

Note that we are "wasting" some effort here by refetching from the API, this is just an illustration

These are the files in use for this demonstration, and an overview of the flow:

This Element configuration file receives the options and passes ArticleId to the downstream Datasource: xpr/element_config/details/article_details_fetching.json
This Datasource receives options.ArticleId and uses it to parameterize an API call: xpr/datasource/details/article_by_id.json
Finally, this template renders the result of the Datasource: xpr/element/details/article_details_fetching.hbs

{{#each PageArticles}} {{{XprElement bundlePath="details/article_details_fetching" options.ArticleId=this.Id}}} {{/each}}

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:Handmade Bicycles

Html:

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:Welcome to C68

Html:

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:

Html:

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:Colnago Studio

Html:

Create your very own Colnago bike, fully customised to your needs and desires. Unleash your creativity, and watch your dreams come to life. We'll produce it and deliver it to you.

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:4 YEARS OF R&D

Html:

The C-series tradition continues with great innovations. Discover why the C68 is the best Colnago ever made. Proudly handmade in Italy.

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:White Glove

Html:

A Colnago representative will deliver your bike right to your doorstep. Enjoy the unboxing and final setup, in our own Colnago style.

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:MASTERY

Html:

We were guided by a true Master: Ernesto Colnago, the expert and visionary.

We still carry his wisdom and artisan skill to create superior experiences and reliable high-end products.

We are pioneers, we strive to design the future today.

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:ITALIANITY

Html:

The Italian passion runs through our veins.

We pursue a legacy of style, high-quality and fine details that gave place to the most enduring and attractive cultures on Earth.

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:Blockchain: the future of bike ownership

Html:

All our bikes are equipped with a unique NFC tag - linked to the MyLime® Polygon Blockchain - indissolubly associated with the bicycle. This solves many problems of bike ownership.

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:Colnago Blockchain

Html:

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:Tadej Pogačar

Html:

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:PRIDE

Html:

We are proud of our victories.

We are proud of our history, and proud of what we are to become.

Our long track of triumphs leads the way to our future.

We admire the eternal beauty of craftsmanship and art and aim to convey such admiration.

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:image

Html:

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:White Glove

Html:

Live the luxurious experience of having your bike delivered right to your doorstep. Enjoy the unboxing and final setup, in our own Colnago style.

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:

Html:

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:COLNAGO ENTERS THE BLOCKCHAIN

Html:

Blockchain and NFTs: positive or a big scam? Our opinion: it's up to us to use them for good. We believe that with NFTs we can solve many problems. See how.

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:

Html:

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:SEDUCTION

Html:

We follow the shapes, the colours and lines that define seduction.

We provoke emotions through our exquisite and aspirational lifestyle experiences.

We create attractive and breathtaking products that make people turn around in awe.

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:EXCLUSIVITY

Html:

We create iconic, elegant and breakthrough products that elevate everyday’s life standards and inspire each person to experience a sophisticated and exclusive way of living.

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:ACENESS

Html:

We are the Ace of Cycling.

We pursue nothing but excellence. We aim for the best at everything we do.

The audacious and victorious attitude of champions inspires us to create the most thriving and pioneer experiences.

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:HERITAGE

Html:

We deeply honour our heritage –a history full of innovations, victories and glories.

We admire the beauty and elegance of legendary art.

We live to eternalise the icon Colnago represents.

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:

Html:

I am a Sub Element. I fetch "Article" objects based on an option passed in, and then render them.

Title:A new icon is born

Html:

The pinnacle of Colnago craftsmanship

SSJS - Bind Directly To Element

Element Inclusion


                {{{XprElement bundlePath="details/ssjs" options.message='Hello World!'}}}

Element Configuration

xpr/element_config/details/ssjs.json


{
    "datasources": [
        {
            "__comment" : "Note that there is no 'path' specified for this Datasource, in Bundles 2 there is no need to create 'null' adapters when only requiring a script binding",
            "name" : "script_output",
            "scripts" : [
                {
                    "_comment" : "Notice the preceeding / in the path which resolves to the script in /server_js/simple_echo. If the path was set to 'simple_echo' with no preceeding /, it would look for a 'neighbor file' which would be in /server_js/details/simple_echo",
                    "path" : "/simple_echo",
                    "options" : {
                        "message" : "{{options.message}}"
                    }
                }
            ]
        }
    ]
}

Script

xpr/server_js/simple_echo.js


//this is a "simple echo" JS script to demonstrate binding scripts to Elements and Datasources.

exports.process = function(context, options) {
    return options["message"];
}

Result

I am a sub element. I have an attached SSJS script which I can render the output of. The output looks like this:

    "Hello World!"

SSJS - Datasources & Modules

Coming Soon...

Bundle Routes

Bundle Routes are specified in the "routes.json" file at the root of the Bundle's xpr folder. xpr/routes.json A route binds an endpoint (URL) and it's HTTP request verb to a script. and provides a formatter Element to render the result of the script.

This demo shows an ajax GET route, running the same script but supplying different formatters: one for HTML and one for JSON.

Result: