Create the Country Part

We also need a way to present a country - because every country wants to be seen. This time, rather than just making another page controller, we will create a Part component. Parts are reusable components that can be added to pages containing “regions” - more on this later.

  1. Create a folder called “country” inside the “parts” folder in your project.
  2. Add the part controller and view files below to the “country” folder:
Country part controller - site/parts/country/country.js
var portal = require('/lib/xp/portal'); // Import the portal functions
var thymeleaf = require('/lib/xp/thymeleaf'); // Import the Thymeleaf rendering function

// Handle the GET request
exports.get = function(req) {

    // Get the country content and extract the needed data from the JSON
    var content = portal.getContent();

    // Prepare the model object with the needed data extracted from the content
    var model = {
        name: content.displayName,
        description: content.data.description,
        population: content.data.population
    };

    // Specify the view file to use
    var view = resolve('country.html');

    // Return the merged view and model in the response object
    return {
        body: thymeleaf.render(view, model)
    }
};

The part controller file above handles the GET request and passes the country content data to the view file which is shown below.

Country part view - site/parts/country/country.html
<div>
    <h3 data-th-text="${name}"></h3>
    <div data-th-if="${population}" data-th-text="'Population: ' + ${population}"></div>
    <div data-th-if="${description}" data-th-text="${description}"></div>
</div>