Creating Content
Step 3D of 3D
The template you created for lunar guides used CSS, HTML, and FreeMarker to style and format the corresponding structure’s fields. Templates in Liferay DXP can also use JavaScript. This lets you create complex, interactive content. To illustrate this, you’ll create a new structure, and then create its template using JavaScript.
Creating the Structure
The structure for the booking form is relatively simple–it only needs a Text field and an Image field. Follow these steps to create it:
-
Open the Menu (
) and select The Lunar Resort → Content → Web Content.
-
At the top-right of the screen, select Options (
) → Structures.
-
Click the Add icon (
) at the bottom-right of the page.
-
Name the structure Booking Form.
-
Add a Text field to the canvas. Below that field, add an Image field.
-
Set the Text field’s Field Label to Button Text. Set the field’s Name to
buttontext
. -
Set the Image field’s Name to
bgimage
. Leave the field’s Field Label alone.Figure 1: The Booking Form structure contains a Text field above an Image field.
-
Click Save.
Now that the structure is complete, you can move on the template.
Creating the Template
The booking form’s template styles the text and image, and also contains a JavaScript function that submits the booking. Follow these steps to create this template:
-
Open the the Menu (
) and select The Lunar Resort → Content → Web Content.
-
At the top-right of the screen, select Options (
) → Templates.
-
Click the Add icon (
) at the bottom-right of the page.
-
Name the template Booking Form.
-
Open the Details section and select Booking Form for the Structure. In the Language field, leave FreeMarker selected.
-
Now you’re ready to create the template’s script. First, you’ll add a JavaScript function that triggers a pop-up when called. In the Script section, delete any existing code and add this code:
<script> function bookNow() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } </script>
-
Now you’ll add a
div
namedpopup
containing aspan
namedpopuptext
that operates on thebookNow
function when clicked. Thisspan
retrieves thebuttontext
from the structure and sets thepopuptext
to display in the function. Everything is namespaced so that you can create the styles accordingly. Add this code now, above thebookNow
function:<div class="popup" onclick="bookNow()"> <button id="bookBtn">${buttontext.getData()}</button> <span class="popuptext" id="myPopup">You have successfully booked your trip! <br /> See you on the moon!</span> </div>
-
Finally, you’ll add the styles. The following code first defines the styles for the main
div
and the button. Next, it defines the style for the area that appears when thebookNow
function is called (note that its initial visibility ishidden
). Finally, when the function runs, the.show
class becomes active and the visibility is set tovisible
. Add this code above the existing code in the editor:<style> .popup { text-align: center; width: 100%; margin: auto; display: inline-block; cursor: pointer; height: 350px; background-image: url("${bgimage.getData()}"); } .popup button#bookBtn { position: relative; top: 110px; padding: 20px 20px; text-align: center; text-decoration: none; border: none; font-size: 40px; border-radius: 6px; background-color: #65b6f0; color: white; } .popup .popuptext { visibility: hidden; width: 450px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -220px; font-size: 150%; } .popup .show { visibility: visible; } </style>
When you’re done, click Save.
Awesome! Now you have a template for the booking form. You’re ready to use the structure and template to create some content.
Creating the Content
Like the structure, content for this structure and template is simple. It can only contain an image and button text. Follow these steps to create such content now:
-
Open the the Menu (
) and select The Lunar Resort → Content → Web Content.
-
Click the Add icon (
) at the bottom-right of the page and select Booking Form.
-
Enter Booking Form for the title.
-
Enter Book Now! for the button text.
-
For the image, click Select and then upload and select the
booking-image.png
. -
Click Publish.
Now, all you need to do is add it to the page.
Displaying the Content
-
Navigate to the Lunar Resort’s Book a Trip page.
-
Click the Add icon (
) at the top-right of the page and expand Content.
-
Drag the Booking Form content onto the page.
-
Open the Look and Feel Configuration of the Web Content Display app that contains your content.
-
On the General tab, set Application Decorators to Barebone and click Save.
-
Refresh the page, and then test out your button.
Figure 2: Template before click.
Figure 3: Template after click.
Great! Now you know how to use structures and templates to create and style web content. Next, you’ll learn about some other ways to publish content in Liferay DXP.