Prerequisites
You should have a basic familiarity with Web Experience Factory, HTML and styles. You should also know how to create and run models. The Tutorials And Samples/Building Models feature also should be added to the project.
Introduction to Creating a responsive Data Table
One of the current trends in web design is making your web pages more responsive to the environment they run on. As we all know the screen real estate for mobile phones, tables and desktop browsers are very different. So how do create pages that work well on all these devices with out having to have specific pages. So what can we do with data tables display the complete table with scrolling or scale the complete tables so it fits? Lets face it neither of these are good solutions to the problem.
So with this sample we will show you another way to handle the issue by using CSS media queries. Note that all browsers do not support these(Hello Internet Explorer) but that browsers that do will give your users a much better display of these tables in small view ports.
Sample description
In this sample we will start with just adding a style sheet and specific styles we will take a horizontal data table and display it vertically so that the user can easily see all rows within the table. The transformation of the table is done completely with styles and changes dynamically as the browser windows size changes. Doing this within a style sheet will have a weakness related to the way the column labels are handled. To make this issue more automated we will build a simple Responsive Data Table builder that will dynamically create the styles needed for the labels and add the style sheet. This is a good example how to take a task that is done with a builder and creating a new builder that just extends the functionality of that builder and automates a new task. To get the data for our models we are using the OredersServiceProvider model from the Building Models feature set. The base models were built using our best practices with a service provider and consumer. The consumer model was built using the List and Details Services Consumer model wizard. This model was then changed by adding a Style builder with an CSS added as an Input and the style added into the HEAD tag.
Here is the application running in a browser window where the table fits.
Here is the vertical table when the window is smaller.
So lets take a look at the styles that were added in the style sheet.
We start with a media query that when the width of the screen is less than 600 pixels it will use these styles
@media only screen and (max-width: 600px) {
Next we need to override the styles that are defined in out theme based style sheets so that the tables width works correctly
.gridTable, .vf_view_list, .vf_view_container{ width: 100%; }
form{ width: 100%; }
.displayPageTable{ width: 100%; }
For the split pagger we need to change the minimum width
.lotusui{ min-width: 300px ! important; }
Change the table to work like a block where each cell is on a separate line
/* Force table to not be like tables anymore */
.tableHeadRow, .tableRowOdd, .tableRowEven, .tableCell { display: block; }
The heading are just moved off the screen so screen readers can still access them even though users will not see them
/* Hide table headers (but not display: none;, for accessibility) */
.tableHeadRow { position: absolute; top: -9999px; left: -9999px; }
Set style on the individual columns so they look table like
tr { border: 1px solid #ccc; }
.tableCell { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; border-right: none ! important; position: relative; text-align: center ! important ; }
This adds space in each TD to add the labels for the columns that where hidden off the edge of the window
.tableCell:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 3px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; }
This adds the labels to each of the fields that are displayed. This is the section that would vary for every table depending on the displayed columns. This is why we will now add a builder that when added to a page that has a data table it will generate this section depending on the fields that are currently in the table
.tableCell:nth-of-type(1):before { content: "Order Id"; }
.tableCell:nth-of-type(2):before { content: "Date Ordered"; }
.tableCell:nth-of-type(3):before { content: "Status"; }
.tableCell:nth-of-type(4):before { content: "Date Shipped"; }
.tableCell:nth-of-type(5):before { content: "Quantity"; }
.tableCell:nth-of-type(6):before { content: "Amount"; }
.tableCell:nth-of-type(7):before { content: "Billing"; }
.tableCell:nth-of-type(8):before { content: "Shipped"; }
.tableCell:nth-of-type(9):before { content: "State"; }
}
If you use other style sheets or templates where the styles for the columns or containers are different than the default theme you might need to add your own style definitions to make sure the container has 100% width if not usually the labels and the data are displayed on top of each other.
To see this behavior in action run the ResponsiveTableWithStyleSheet model in the samples/ResponsiveUI directory and change the window size to be less than 600 pixels.
To handle the case where the width that you want the table to transition at or the columns of the tables vary and you want this automated I created a sample builder that will do this. This builder is a page automation based builder which allows it to get access to the data information about the page. I started by using the builder skeleton to create the initial builder def and builder code which I then modified. I added a couple of builder inputs that would allow the user to specify the minimum width that the media query would become active at this is in the main section of the builder. I also added the responsive style that defaults to the style that we have already looked at in the style sheet sample, excluding the labels and parameterizing the minimum width. Since the builder skeleton doesn't completely support page automation builders I modified the builder def by hand to add a page automation based input that allows you to select a container that the fields are located in.
I also changed the modifier initializer class so that it would work like the other page automation builders.
com.bowstreet.generation.implementation.PageAutomatonModifierBuilderInitialize
Next let's look at the the builder itself. The builder extends the style sheet builder to add the styles to the page. It also by using the page automation helper functions to find the columns that are in the currently displayed in the table. The main builder method doBuilderCall saves off the variables that are very helpful to have available within the builder class. It then gathers the needed inputs to generate the correct style sheet. Then after making sure there are styles to add to the page it locates the correct container and processes the fields that are in the container checking that they are visible within the table. While doing this it updates the Responsive Style input with the added column labels and updates the width within the media query. When this is complete it calls the Style Sheet builder setting the inputs for it so the style will be added to the page's HEAD tag. This builder is builder order dependent being that any builders that hide columns need to precede this builder in the model.
To see this behavior in action run the ResponsiveTableWithBuilder model in the samples/ResponsiveUI directory and change the window size to be less than 600 pixels.
Resources
Tutorial Creating a custom builder
http://www-10.lotus.com/ldd/pfwiki.nsf/dx/Tutorial_Creating_a_custom_builder
Creating Your Application's UI
http://www-10.lotus.com/ldd/pfwiki.nsf/dx/Creating_Your_Applications_UI
Developing Web Applications for Smartphones and Tablets with IBM Web Experience Factory
http://www-10.lotus.com/ldd/pfwiki.nsf/dx/Developing_Web_Wpplications_for_Smartphones_and_Tablets_with_IBM_Web_Experience_Factory