ShowTable of Contents
The Web Experience factory 8.5 or the IBM Multichannel Feature Pack for IBM Web Experience Factory v22.214.171.124
includes an Application Page builder, which is an enhanced version of the original sample Application Page builder Application Page Sample Builder
. The sample included here demonstrates a customer account application that includes multi-page tabbed views of customer information that can be updated on demand. It uses the new Application Page builder.
About the Application Page builder
The Application Page builder provides new high-level builder support for constructing various types of pages in Web Experience Factory. This builder creates a new page in a model and automates several common page design patterns that can be applied to that page. The builder's inputs present a simple, easy-to-use interface for common scenarios, but give you optional access to more advanced features when you need them. This builder supports both server-side and client-side behavior, exposing only the features that are available for that processing model.
You can now use the Application Page builder rather than the Data Page or Page builders to implement common user interface patterns and sophisticated page navigation with minimal development effort. From this one builder you can integrate with themes and add model containment, page navigation, and standard page buttons. The Application Page builder lets you merge different views of data onto a single page, as shown in the Application Page Sample Builder
. You can also use the Application Page builder to create content that you can use in the Dojo container builders.
The builder imports a "base page" that includes placeholders for elements such as data forms and buttons, and it also implements one of the following page type options:
- Data View. This will invoke the Data Page builder in View-Only mode, for any type of view-only data display. You simply select the data you want to display.
- Data Entry. This will invoke the Data Page builder in Data Entry mode, for creating an input or update form page. You select the data to use for the form, and it provides options for validating and submitting the form. It also can automatically add a button to validate and submit the form (using the x_NextAction support of Data Page).
- Page Navigation. This will invoke the Page Navigation builder, for creating a page that lets users navigate to other pages/actions in the model. It has inputs that match the key inputs in the Page Navigation builder.
- Model Container. This option invokes the Model Container builder, for creating a page that displays the UI of another model. One use case for this is to have a set of tabs where each tab displays a separate model, as shown in one of the examples.
- Basic View Page This option allows you to import a page or define the HTML for the page.
Using model wizards with the Application Page builder
The new model wizards in this feature pack incorporate the Application Page builder because it simplifies the creation of multiple pages.
- The Model Contained Tabbed View wizard builds a model using the new feature pack themes and Application Page builder to create a multi-page tabbed view. The tabs are populated with models added using model containers.
- The Multi-Page Form (Server or Client-side) wizard builds a model using the new feature pack themes and Application Page builder to create a multi-page form. This form calls the server to perform validation as the user navigates through the pages.After the user fills out the form, a confirmation page lets the user submit data to the server. On completion, an acknowledgment page is displayed.
- The Multi-channel Starter wizard builds a model using the new feature pack themes to match the user interface of models created from other multichannel wizards. It will optionally add a service consumer. You can customize the model later by adding Application Page builders or other higher-level builders to create pages.
About the sample
The sample model combines the Application Page builder with the Client View & Form builder to create an application that allows a user to:
- Add a new customer (using the Multi-Page Form wizard to create it)
- View the records (using the Client View & Form builder)
- View and update customer information (using the Application Page builder to create the tabbed page elements).
This project also uses the Sample XML File Data Service Builder
to provide the data. This data service is designed for rapid prototyping of your data and service operations.
Setting up the sample
First create a Web Experience Factory Project and include the Client-side Application feature set. Install the multichannel feature pack prerequisites, then download the Multichannel feature pack and import it into your project. This will add the Application Page builder to the project along with new responsive data layouts. Then download and import the Sample XML File Data Service builder from this sample Sample XML File Data Service Builder
Now build the project to set up the data service builder. Your project now contains two models and a profile set that is needed for this application.
About the sample profile set and models
The profile set extends the standard multi-channel profile set to allow a profiling of Desktop and Tablet as a single setting in addition to the Desktop, Tablet, Smartphone, or Mobile profile. The CustomerAccountsProvider model uses the XMLFileService builder and extends that service by adding a custom service operation to add a new customer account and generate a customer ID. The ManageCustomers model was created using the Multi-Page Form wizard selecting CustomerAccountsProvider as the provider model and addnewCustomer as the data input operation. A Display Manager builder controls the placement and grouping of fields on these pages
About the Customer List view
A Client View & Form builder displays the list of items of customers. A button opens the multi-page form for adding a new customer.
About the Customer Details tabbed pages
The customized Details display uses a set of tabbed Details pages that match the fields on the input form.
Creating tabbed Details pages
Ordinarily, the Client View & Form builder automatically handles the navigation to the savedForms_DetailsPage and displays the correct record with all fields displayed. This custom multi-page design involves a number of design changes using Application Page and Page Navigation builders:
I added a new picture just showing the detailstab without the update tabs (KT)
- Application Page builder calls create three detailstabs pages (detailstab1, detailstab2, and detailstab3) whose contents come from the detail customer variable populated by the Client View & Form builder.
- A Page Navigation builder call references the detailstab pages and uses tabs as the navigation type.
- The default savedForms_DetailsPage was changed to hide all fields and replace the contents with detailstab1 in the body target of the page.
Adding identical Back and Edit buttons to each tabbed page
Button builders for the Back and Edit buttons invoke the same operation on each tab. The Advanced input for the page location in the Button builder allows you to target multiple pages with the same button definition and action. For example, the page location for the Edit button specifies all three detailstab pages (detailstab1, detailstab2, detailstab3) .
Adding an Update button and editable pages
An Update button and tabbed pages allow users to update a Details record within the tabbed interface.
- Application Page builder calls create three updatetab pages (updatetab1, updatetab2, and updatetab3) whose contents correspond to the detailstab contents, but allow changes to the fields.
- A Page Navigation builder call references the updatetab pages and uses tabs as the navigation type.
Adding code to preserve the editing state of the page
The Edit button clicked from a detailstab page invokes the updatetab page, but cannot notify the Page Navigation code that the page has changed from display mode to edit mode. A new Java class with a Linked Java Object builder sets up this alert.
Navigation between tabs must be customized to ensure that when users tab to the next page, the page displays in the same mode as the previous tab -- either display mode or edit mode -- with the appropriate buttons. The TabHelper code included with the Linked Java Object builder provides operations for using consistent buttons for processing within the tabs. These operations are targeted within the Page Navigation builder for standard tab navigation.
To reset the current tab back to the Basic Info tab, the savedForms_SetDetailsData method that was created by Client View & Form builder is overridden with a custom method.
By selecting Methods - Override for the savedForms_SetDetailsData method, a new Method builder is added to the model.The new code for the overriding method
sets the variables that are used by the Page Navigation builder to navigate to the Details page and resets the tab state.
< // Override the function to make sure the variable for the tab is always set to the first tab
Adding validation code for updates
if(!canChangeTab()) return false;
When the Page Navigation builder uses the Submit and invoke action method, as it does in this sample, the page navigation tabs are implemented using an tag. Returning false from the onlick event blocks the link and successfully prevents navigation to the next tab.
Application Page Sample Builder
This is just for reference the new updated Application Page Builder is included in the feature pack.
Sample XML File Data Service Builder
This builder needs to be added to your project to get this sample to work.