Recent articles by this author

The new responsivetemplate.html template allows details, create, and update pages to dynamically and responsively support a two column layout. The template has a layout that uses css floats to lay out the fields. Columns are automatically laid out with the first field in the first column and the ...

In this article we will talk about the responsive data layouts that we created that were based on the datalayouts we created for the Web Experience Factory feature pack. These layouts are designed to work with the default theme for Web Experience Factory 8.5, Some of these layouts require the new ...

The IBM Multichannel Feature Pack for IBM Web Experience Factory v8.0.0.3 And version 8.5 includes an Application Page builder, which is an enhanced version of the original sample Application Page builder. The sample included here demonstrates a customer account application that includes ...

The new fp80responsivetemplate.html template allows details, create, and update pages to dynamically and responsively support a two column layout. The template has a layout that uses css floats to lay out the fields. Columns are automatically laid out with the first field in the first column and ...

The new responsive_template.html template allows details, create, and update pages to dynamically and responsively support a two column layout. The template has a layout that uses css floats to lay out the fields. Columns are automatically laid out with the first field in the first column and the second field in the right column. The third field then is placed in the column that it "floats" into.

Prerequisites

You should be familiar with Web Experience Factory and be able to create and run models.
Mobile archive installed
Building Models archive installed

Introduction toOptional Responsive Page Automation HTML Template

The new responsive_template.html template allows details, create, and update pages to dynamically and responsively support a two column layout. The template has a layout that uses css floats to lay out the fields. Columns are automatically laid out with the first field in the first column and the second field in the right column. The third field then is placed in the column that it "floats" into. So, this layout works well, depending on how your fields "float" together. A side effect of the floating is that you do not have much control of the layout rendering, so you must test it with your fields to determine if it works for your field types and values. If you use this layout template, the fields float from a two column layout to a single column layout, depending on the size of the container.

There are two new style sheets that are designed to work with this template: responsive_label_above.css and the responsive.cssstyle sheet.

To use this HTML template, add it to a customized copy of the user interface (UI) themes from this feature pack, or override a theme using the standard techniques that are described in the product documentation. To set the location of the field labels relative to the fields, use either the responsive_label_above.css style sheet to display your field labels above the data, or the responsive.css style sheet to display labels that precede the data.

Controlling overall style and look with themes.

Themes allow you to centrally control and modify the look and feel of an entire application,by providing the following:

CSS styles

“Smart refresh” and page loading progress indicators

Page layouts

Table and form layout rules (HTML templates)

Table highlighting and paging controls

A theme can be applied for a model, or for a whole project

You can override theme elements at any level with the Theme builder

One of your design decisions is at what level you want to customize your models within the project: at the project level where all models within the project are affected, or at an individual model level.

The following sample shows you how to customize an existing model by adding the new HTML template and style sheets.

Sample description

This sample is based on the OrdersServiceConsumer.model, which you must add to your project by adding the Building Models archive found in Features and Tutorials.
You also need the Mobile archive.

The initial model OrdersServiceConsumer.model and the customized model OrdersServiceResponsiveDetails.model are both included in the project. You can see what was added and how these changed the pages.

Techniques illustrated in this sample

Customization Technique

Where used

Adding new Themes

Theme Builders added for desktop, tablet, and smartphone.

Adding new layout for details, create, and update

Theme builders modified to set the new HTML templates.

We want to change the UI to minimize the colors and move the labels above the edit fields to help minimize the width of the forms. To do this, we added three theme builders to the model and set them to use the themes defined in the feature pack for desktop, smartphone, and tablet.

Below are the inputs we set for the desktop theme. It is profiled to only be enabled on desktop devices. We reference the new feature pack desktop theme, and we override the theme properties that let us set the HTML Template and styles we want for the details, create, and update pages.

Next, we open the Data Service User Interface section of the Theme builder. If your models are using other builders, such as the Data Page or View and Form builder, open that section to override the specific inputs.
We navigate to the section of inputs that control the HTML templates and style sheets, and add references to the new responsive template and the style sheet we want. In this case, field labels are placed above the fields.

You are not required to use the same template and style sheet for the theme builders for mobile or tablet, but in this case we did.

After creating this theme builder, we then create the builders for smartphone and tablet. Since we want the settings for the overrides to be the same for the other two builders, we copy the desktop theme builder, open the copies, and change the profiling and referenced theme. You can also create the themes and redo the steps for the other builders.

Here is how information is displayed on a details page:
and if the screen area is smaller:

Instructions for running the sample:

To run the sample application:
1. Create a Web Experience Factory project or use an existing project.
2. Add the Mobile and the Building Models archives to the project.
3. Download the ResponsiveDetails.zip file and import it into the project by selecting File > Import> WebSphere Portlet Factory Archive.
4. Open the OrdersServiceResponsiveDetails model, which is found in WEB-INF\models\samples\ResponsiveTemplateand run it. This model runs out-of-box without any configuration required.