Intro to WebPages, Templates, and Content Areas
How does EASYProcess Use WebPages?
All development you have done so far has been viewed in the tester tab of the WebPart Canvas. EASYProcess has been putting your WebPart in a simple WebPage for you in the Test tab so you can easily verify if it is looking/acting the way you intend. When you begin using EASYProcess out of training, those WebParts will need to be housed in a WebPage that you create yourself.
You could think of it this way: In EASYProcess, everything exists within something else. We maintain a site. That site has WebPages.
- WebPages are containers for the WebParts we create.
- WebParts are containers for Sections.
- Sections are containers for Fields.
The entire User Interface of the site is comprised of these elements.
Think about our WebPart B example.
Here, the “WebPart B” is the only WebPart on this WebPage EASYProcess has created for us. However, when you start making your own WebPages, many WebParts can be placed on a WebPage. Let’s look at an existing page from an EASYCommerce site.
In this OrderDetails page snippet, we can see the page has three visible WebParts. The WebPartIds of the WebParts on the page are shown and highlighted. Part of creating a WebPage to house your WebParts is deciding how they will be displayed on the page.
When EASYProcess determines how to display things on the page, it is using Templates. These are prewritten HTML structures which tells EASYProcess how to organize the WebPage.
To start with we won’t make any changes to these templates, but if you wanted to break free from the samples provided, you would create a new template, edit the HTML, save your changes, and select it as your Default for the application.
Navigate to the “Templates” page from the “Web Application” menu.
The Template page is broken down into three main areas:
- Add New Template - You can add a new template in this section it will appear in the list of Existing Templates once created
- Existing Templates - This is the list of already existing templates. From here you can set the default one for your application and delete unwanted templates.
- View/Edit Existing Template - If you select a template from the Existing Template list, its content will show in this panel. Here you can make changes to the HTML and save it with the “Save” button at the bottom.
Content Area Placeholders
Each of the existing Templates work because they have a specific variable that EASYProcess looks for. These are placeholders that EASYProcess will replace with the actual content we want such as WebParts. If you create your own Template, you must include these placeholders so EASYProcess knows where to insert your content.
Placeholders: [EP_CA:Header], [EP_CA:Menu], [EP_CA:Body], [EP_CA:Footer]
Each of the Placeholders in the template is considered a Content Area by EASYProcess.
Here is a zoomed out view of the WebPage so you can see how the Content Areas are laid out on the site when we use that template. Just as we saw in the HTML, they are displayed from top to bottom: Header, Menu, Body, and Footer.
Most of the time on a site, you want all of the pages to have the same Header, Menu, and Footer Content Areas, while the Body will change from page to page. In EASYProcess we can set the default WebParts for these Content Areas so that we won’t need to specify which WebPart is the Header each time we create a new WebPage.
Navigate to “Content Areas” under the “Web Application” menu.
The Content Area page allows you to view the existing Content Areas, edit those, delete them, or add new ones.
If you design a Content Area, it will bring you to the following screen. Here you can build your content area.
Here you can select a WebPart from the list of all WebParts on the right and drag it onto the screen on the left. This creates the appropriate HTML that EASYProcess will use to say “This WebPart goes here”.
This tool makes it easy to switch the Header WebPart or Footer WebPart if they were ever to change.