Templates in Tridion Sites are a cool feature, and power a lot of great implementations. When used in cooperation with BluePrinting and versioning support, so you can say that Tridion Sites is a content management system, a version control system, and a deployment solution. However, it requires proprietary knowledge about the template implementation. Also, looking into the common process of developing a website, the template design step was preventing the possibility to deliver content to the final presentation environment, be it a web app, mobile app, or something else.

 Let’s see how the process changed with the introduction of the Semantic content models feature as part of Tridion Sites 9.5 release. 

Of course, steps might be different looking at different requirements for different applications, although I expect that mentioned steps will be essential for most of them.

So they are:

• Define your content structure
• Publish
• Set up your optional semantic content models
• Develop your website
  • Consume content using GraphQL endpoint

Let’s go step by step to build our web application.

Before defining a content structure let’s look into basic design mocks for a website. We decided to use one of the popular nowadays approaches with big tiles and a header at the top.

Home page

 Once a user clicked on the tile we will open a full article view.

Article page

 Define your content model

Looking into this design mocks it is clear that we will need one Schema called article and two content representations (semantic content models) of it for the Home page and Article.

So let’s start with content modeling on the Schema level as a first step.

 As soon as we are done with it we can publish our content. So templating step is not needed anymore.

 Define your semantic content models

Our next step is to define semantic content models that will be used in our application. You can define your models two ways either via qraphql schema file on content service side or via Add-on package, in both ways you need to use qraphql schema language definition. We have chosen second approach and came to the following list of semantic content models:

• FullArticle that will be used for Article page
  • 
• ShortArticle that will be used for Home page
  • 

Both semantic models will use the same published content. In other words, having semantic models feature we are not creating renditions on the ContentManager side anymore, instead you can create them in GraphQL.

Additionally in Tridion Sites 9.6 version semantic models will be created automatically during publishing process based on Content Manager schema definition.

Once we are done with defining custom models on GraphQL side we can move further and start doing our webapp.

 Build your web application

React was chosen as a framework having the following dependencies:

• Appolo-boost: package that contains everything you need for Appolo client to communicate to GraphQL
• React-appolo: View layer integration for react
• Graphql-tag: used for parsing GrapghQL queries
• Graphql: used for parsing GrapghQL queries

Application will have following components to get and visualize data:

• Header
• List of articles
  • a separate GraphQL query is used to return a list of components
• Short article
  • Defined semantic content model is used
• Full article
  • Defined semantic content model is used
• Shared component article image
  • a separate GraphQL query is used to return link to binary content

 If you would like to play with it yourself:

• You need Tridion Sites 9.5 version box having both Content Manager and Content Delivery
• Import Content Porter package with predefined content: localhost_2021.08.06_06.53.29.zip
• Install Add-on package with defined semantic models and restart your Content Delivery services: udp-stm.zip
• Get and build Web application: https://github.com/MrPix/TridionDevSummit

I suggest taking a look at the presentation for Tridion Expert Summit related to this theme: