Top
Top
LibraryEASYProcess Training GuideChapter 8: WebPages
Intro to WebPages, Templates, and Content Areas
Create WebPage to House a WebPart
Place WebPage in Menu

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.

Templates

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.

Template Page

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]

Content Areas

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.


Create WebPage to House a WebPart

Create New WebPage

From the Application Home screen, go to “Work with WebPages”.

On this screen, click “Design New Web Page”.

Give this webpage a name and description.

Name: TrainingWebPartB

Description: Training: WebPart B

The Page Name cannot have spaces or special characters. Note that the description will show up as webpage “title”. This description has less limitations and can have these characters.

Below the Name and Description is the option to select a Template. The default option is the one selected as the Applications Default. However, you could have created a specific template to use on a set of pages that you could select here.

WebPage Design

Highlight “Body” from the list of all available Content Areas and check “Override Content Area”. Say “Yes” at the warning.

Pick your “WebPartB” from the list to the right and drag it into the middle area to display on this web page. “Save Page” after adding the webparts to the content area.

Notice as you do this, the HTML at the top of the page has been edited to reflect your chosen WebPartId. The Content Area has also changed now to display the WebPart B. Click the “Save” button to save your changes. This webpage now contains your created WebPart B.


Place WebPage in a Menu

Guest Menu

Go to “Entity Management” menu option and select “Entity Hierarchy”. Under “Browse Entities” to the left, find “EP_CMS_Page”. Double-click to display all the available web pages.

On the right half, under “View Hierarchy”, find “Menu”. Double-click to populate all the available menus. Double-click again on “Guest Menu”. This will show all the web pages currently present in it.

Now select and drag “Training: WebPart B” webpage from the left and drop it onto Guest Menu on the right.

You will be prompted to assign a relation type. Ignore this and click “No”.

Test Your WebPage

Now go to the application default page and verify the guest menu. You can open the default page by going to Tools → Open Website on the EASYProcess toolbar. In the future, you can test your WebParts in a full browser instead of through the “Test” tab in the WebPart Design Page.

User’s Menu

To make a web page accessible to authenticated users only:

  1. Make sure the web page is displayed just in the User’s Menu.
  2. Make sure the web page security is set

So remove the “Training: Web Part B” webpage from the “Guest Menu” by clicking on it under the “Guest Menu” and clicking the “Delete” button (red X).

Add it to “User Menu” by dragging it from the left panel just like you did before. This will add the web page at the end of the menu. You may need to adjust the position using the arrow keys.

Now this web page has been added to the User menu. But we need to increase the security level of this page so that only the logged-in users can view this page. Go to the “WebPage Design” screen again for “Training: Web Part B” web page. Click on the “Properties” tab and increase the “Security Level” to a value greater than 0 but less than 100.

This example shows a Security Level of 1 which is the minimum logged in security level. When finished, save the page.

Login and Test Again

Time to test! Go to the application default web page. Notice that, the guest menu will no longer contain ‘Training: Web Part B’ option. You will see it after logging in.

Note: The default user for a fresh application should be epuser/123


Powered by EASYProcess (© 2019 K-Rise Systems, Inc).