Intro to WebPages
How does EASYProcess Use WebPages?
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.
When you are developing a WebPart, the WebPart Designer page has a “Test” tab which allows you to view your WebPart as it will appear on the Webpage.Here is an example of that for a WebPart displaying address information.This is the only WebPart on this WebPage EASYProcess has created for us.
Outside of this “Test” feature, when the developer is done creating a WebPart, the next step will be to create or choose an existing WebPage to house the WebPart. 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.
If you wanted to break free from the samples provided by EASYProcess, 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 (as determined by which template is being used). The template used for this example has HTML which outlines that the content areas be 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. You would only need to change the associated Content Area to WebPart assignment and all the WebPages that reference the Content Area would now reference the new WebPart.
WebPage Home (Work with Pages)
1) WebPage List
This lists all WebPages that exist in the Application. The list can be filtered with the lookup textbox and “Find” button. This can be used to search by Page Name and Description. Click the “Refresh Data” to undo any filtered searches and return to the full WebPage list.
2) General WebPage Actions
Design New WebPart - Used to create a new WebPage. This allows the user to type a WebPage Name, Description and select a Template.
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.
3) Selected WebPage Actions
Design - Open the selected WebPage. Only one WebPage can be selected.
Delete - Delete the selected WebPage. Only one WebPage can be selected.
Content Areas Tab
After creating/opening a WebPage, you will be on the “Content Areas” tab of the WebPage Design Page. This is created by 3 main sections
1) WebPage Content Areas
The template chosen for the WebPage determines which Content Areas will be available on the page.
By default, the chosen WebParts for the Content Areas are auto-filled. This means, if application-wide you selected WPT-10000109 to be the Header, when you create a new WebPage, the Header Content Area will have that WebPart selected.
Once you select a Content Area, if you wish your WebPage to differ from the Webpart assignment for Content Areas, check the “Override At Page Level” checkbox. For applications, there will be no default WebPart chosen for the Body content area and each WebPage will specify to override this area and specify one to show in its place.
2) Current Content Area
After selecting a Content Area from the left panel, you can view its HTML and see its layout in this section. It displays information for the selected Content Area.
If you selected to “Override At Page Level”, you can edit this area by right-clicking. This is the same screen from editing Application-wide defaults for Content Areas.
Here you can select a WebPart from the list of all WebParts on the right and drag it onto the current content area screen. This creates the appropriate HTML that EASYProcess will use to say “This WebPart goes here”.
3) WebParts List
Here is the list of all WebParts to choose from. This allows the user to scroll through the list and find the desired one to drag on the content area.
The properties tab allows you to reselect the options you were given when the WebPage was created. Once any properties are changed, save your changes with the “Save” button.
Page Name: This is the name used to find the page in the EASYProcess database. It cannot be changed, but it is only used internally to search and associate it to other properties.
Description: You can change the Description, which is displayed when you visit the page on your browser.
Security Level: This determines who can see your page. 0 is the lowest security level and it means everyone can view the page with the URL. Other higher levels must be viewed by a user who is logged in and has equal to or greater than the chosen security level. Different user types are assigned different security levels.
Template: You can change the Template that is being used to define the Content Areas of the WebPage. You can select the default template assigned for the application (a label displays which one is currently selected as the default) or you can choose another from the drop down list.