arrow-down
    1. Widgets
  1. IAM
    1. Virtual apps
    1. Projects
    2. Layers
        1. AttachmentUploader
        2. Checkbox
        3. Combobox
        4. ContentSelector
        5. ContentTypeFilter
        6. CustomSelector
        7. Date
        8. DateTime
        9. Double
        10. GeoPoint
        11. HtmlArea
        12. ImageSelector
        13. Long
        14. MediaSelector
        15. Radiobutton
        16. Tag
        17. TextArea
        18. TextLine
        19. Time
      1. Field set
      2. Item set
      3. Option set
      4. Mixins
      5. Localization
    3. Content Types
    4. X-data
    5. Macros
    6. Custom styles
    7. Sites
      1. Regions
      2. Part component
      3. Layout component
      4. Text component
      5. Fragments
      6. Filtering
      7. Component indexing
      8. Visual editor
    8. Page templates
    1. Sandboxes
    2. Code
    3. Building
    4. Configuration
    1. Globals
    2. HTTP
    3. Controllers
    4. Filters
    5. Events
    6. Websocket
    7. Error handler
    8. ID provider
    9. Tasks
    10. Localization
    11. Mappings
    12. Components
    13. Processors
    14. Contributions
    15. Templating
    16. Main controller
    17. Java bridge
      1. Webapp Engine
        1. Image service
        2. Component service
      2. Admin Engine
      3. Asset service
      4. HTTP service
      5. IDprovider service
    1. Task engine
    2. Management Endpoint
    3. Statistics Endpoint
    1. Nodes and repos
    2. Properties
    3. Indexing
    4. Branches
    5. Queries (NoQL)
    6. Queries (DSL)
    7. Filters
    8. Aggregations
    9. Highlighting
    10. Editors
    1. Strategies
    2. Distributions
    3. Docker image
    4. Vhosts
    5. Configuration
    6. Backup & restore
    7. Systemd
    8. Clustering
    1. Admin API
    2. Application API
    3. Auditlog API
    4. Authentication API
    5. Cluster API
    6. Common API
    7. Content API
    8. Context API
    9. Event API
    10. Export API
    11. Grid API
    12. I18N API
    13. IO API
    14. Mail API
    15. Node API
    16. Portal API
    17. Project API
    18. Repo API
    19. Scheduler API
    20. Schema API
    21. Tasks API
    22. Value API
    23. VHost API
    24. Websocket API
  2. Audit Logs
    1. Upgrade Notes
    2. Upgrading Apps

Templating

Contents

Templates engines may be used to simplify output generation from controllers.

Introduction

Enonic XP does ship with a standard templating engine, but supports use of 3rd party engines. In this section we give examples of how you may use templating engines with your controllers.

A range of integrated templating engines are available as libraries on Enonic Market.

React / JSX

Enonic offers a solution for server-side rendering with JSX React templates. Details are available in a separate tutorial called React4XP.

Thymeleaf

Here we will demonstrate templating using the Thymeleaf templating engine. Thymeleaf is available as an Enonic library.

For a more extensive tutorial using Thymeleaf, visit the My first site tutorial

Start by including the library in your app:

build.gradle
dependencies {
   include 'com.enonic.lib:lib-thymeleaf:<version>'
}
Replace <version> with the version of the library you want to use.

Add a template file to your project:

src/main/resources/views/sample-view.html
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>My first page, with a view!</h1>
    <h2>Hello <span data-th-text="${name}">World</span></h2>
  </body>
</html>

Your controller must then be updated to use the template:

Example controller using Thymeleaf
var thymeleaf = require('/lib/thymeleaf');

exports.get = function(req) {

  // Resolve the view
  var view = resolve('/view/my-template.html');

  // Define a model
  var model = {
    name: "John Doe"
  };

  // Render a thymeleaf template
  var body = thymeleaf.render(view, model);

  // Return the result
  return {
    body: body,
    contentType: 'text/html'
  };

};

Unlike some controller files, templates may reside anywhere within the src/main/resources structure of your project.

If the view file is in the same folder as your controller, it can be resolved with only the file name resolve('my-template.html'). Otherwise, the full or relative path should be used.


Contents

Contents

AI-powered search

Juke AI