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.
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.
Data Layout builder help (describes the Data layout template file format)
Data Layout video
Data Layout UI Patterns