# Hello World for a Widget Using the App builder
This tutorial will take you through the basics of creating an Entando widget and placing it on a page. This document will also review the basics of fragments which are re-usable pieces of a user interface.
# Basic Widget Tutorial
For this example you will use the Entando App Builder to build and assign your widget on a page. In a production system or a larger development environment you would build and deploy widgets differently, however this example provides a quick idea of the building blocks.
In the App Builder menu, at the top, Go To: UX Patterns -→ Widgets
Select NEW
The Custom UI Field is a freemarker template where you can put raw html and include freemarker logic,
It allows you to import javascript, css, or any normal HTML
Example, put <h2>Hello World</h2> into your widget, give it a name and save it
Go To: Page Designer -→ Page Settings
In the Home Page dropdown select Home / Service and select SAVE
Now place the widget on the page
Go To: Page Designer -→ Page Tree
On the row that says "Service", on the far right side, select the Kebab button and select CONFIGURE
Find the widget created in step 5 on the right hand side
Drag and drop the widget onto the open frame of the page
Select PUBLISH at the bottom of the screen
Then select GO TO HOME PAGE in the upper right
You should see "Hello World" on the page
# Simple Fragment tutorial
A fragment is a way to take a common piece of front end code and reuse
it across multiple pages or widgets. Common elements such as basic html,
javascript, or freemarker logic can be stored as fragments and
referenced via the <@wp.fragment … tag.
Starting from the simple widget tutorial above:
In the app builder Go To: UX Patterns -→ Fragments
Enter the code for the fragment as
testIn the
Gui Codeenter<h2>This is a fragment</h2>Next place the fragment on a page
Go To: Ux Patterns -→ Page Models
On the row for
service, select EDITUse the fragment tag to place the fragment on the page
<@wp.fragment code="test"/>SAVE the page model
Go To: homepage (assuming you’ve set the service page to the homepage)
Note that the fragment is printed including the HTML tags. By default html embedded via a fragment tag is escaped so you get it rendered exactly as you enter it. You’ll need to un-escape it to get it to render correctly.
Go back to your page model (UX Patterns -→ Page Models) select SERVICE and EDIT
Change the tag to:
<@wp.fragment code="test" escapeXml=false/>Go back to the homepage
See correctly rendered fragment
# Freemarker Basics in Entando
The freemarker templating language gives you a lot of flexibility and power in how pages are rendered. You can include conditional logic, inject information from the backend, check for query parameters and route to different pages.
For example, to check for a query parameter you can use:
<#if RequestParameters.myParam?exists > …
To check the current username, use:
<#if (Session.currentUser.username != "guest") >
When you need dynamic behavior in your widgets consider using the power of freemarker.