IMPORTANT MESSAGE: We are still experiencing some difficulties that will affect your ability work with the RWS AppStore. Our IT team is working to resolve this but for now you may not be able to download or upload apps through the RWS AppStore. We apologise for the inconvenience and will update the community when we have a resolution in place. In the meantime you can take advantage of the Private AppStore if you are using Trados Studio 2021 or 2022.

Tridion powered website within a couple of hours

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.

Field name

Purpose

Field type

Publishable

Searchable

Title

Title of the Article

Text

Yes

Yes

Short description

Short description of the Article to be used on Home page

Text

Yes

Yes

Content

Full article text

Text

Yes

Yes

Image

Link to the large image that represents an article

Multimedia Link

Yes

Yes

 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:

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