Developer Tutorial | Create a View for an Existing HTML Template in Jahia (3 of 3)
Visit https://www.jahia.com/developer-guides to learn more about development on the Jahia platform.
This is the final part of our tutorial revolving recreating existing HTML templates in Jahia. In this part we cover how to create a visual rendering for the content type we created in the previous tutorial; at Jahia, we call this a View.
Transcript:
"Hi there & welcome to this Jahia developer tutorial. In this tutorial we’re going to be creating what’s referred to in Jahia as a view - that is, a visual rendering of a given piece of content - let’s get started.
In a previous tutorial we defined a content type on an HTML template. We’re now creating a view so that we can display that content in our own user-defined way within that template.
we’re back in our template and we’re going to replace the static content with a tag named content area.
This is an area on the site where a content author is free to do as they wish, contributing dynamic content.
We’re removing the static elements and adding free areas for dynamically generated content.
We are however going to restrict what can be contributed here to the content type we created in the previous tutorial.
This is a matter of design, we can leave the content authors very free or impose some restrictions based on what we want to achieve.
We’re creating a view which lives under a specific path, which is the prefix underscore the name of the content type slash html, to say that we are going to write an HTML rendition of the given content type. It could be anything though - XML, JSON, you name it - whatever the desired rendered output.
We’re going to copy & paste the prefix of another JSP file - they’re all the same so it doesn’t matter which one we copy from.
We’re also going to copy & paste the static code we removed from the main file into the view.
Everything here is still very static; we’re going to make it dynamic by extracting content that’s been authored by a content author.
We use the variable “common node” & the property names that we defined in our definitions.cnd file from the previous tutorial - we have a section, title, introduction & body.
We want an image not a string, so we’re going to extract the URL of the image file we want to utilize for the view - the syntax for this is .node.url - an image is a content node and we’re extracting it’s url directly.
Going back to the CMS, we’re going to contribute our content - we have a free area with a form with all the properties we’ve described.
Using the content author experience, we’re going to fill them in.
When we save we see an html rendering of what the content is going to look like.
We select an image and fill all the properties.
We’re happy - it looks good. We’re going to return to the page composer and preview it.
Again, looking good - and just like that, we have dynamically generated content from a content author within my CMS.
This concludes our tutorial series. Hopefully you’ve seen that by using Jahia, it’s incredibly easy to both create & reuse HTML templates as well as embed them with dynamically generated content. If you’d like to learn more, please reach out to us at [email protected]. Thanks for watching!"
For more on Jahia:
Website: http://jahia.com
Twitter: / jahia
LinkedIn: / jahia-solutions