Using highly-customized UI designs with Web Experience Factory
Jonathan Booth 060000XRMC Visits (1877)
(Original posting date: September 28, 2011)
In this blog I wanted to highlight some new documentation and slides that we've recently published, on customizing application UI and layout. I wanted to make sure that people are familiar with the features for using detailed custom HTML layouts within the automation framework of Web Experience Factory.
There two basic approaches to controlling page layout in Web Experience Factory:
Anyone who's used Factory is likely familiar with the data-driven approach to UI development: you point one of the high-level UI builders (such as View & Form) at some data, and the forms and views are generated for you based on the data schema. You can then change the layout using builders and the Design view drag-and-drop tools. This approach can give the quickest development, but it doesn't give you complete detailed control of the HTML layout and design.
For complete customization and control you can use the custom HTML layout approach. This can be the best approach in cases where you're given detailed UI designs that can't easily be implemented using the data-driven approach. With this approach you still get the benefit that builders generate all the "code" into the HTML pages. For example, all the rich behavior of data fields is generated by highly automated builders such as Data Field Settings, and you can use the same high-level UI builders such as View & Form, Data Services User Interface, and Data Page to create the application. However, with this approach you can completely customize the HTML using any HTML editor.
If you want to play with the custom layout approach, the easiest way is to open any UI model, then right-click on a page in the "Pages" or "Application Tree" view. Choose the command for "Export HTML for Data Layout." This will generate an HTML file with named elements corresponding to all the data fields on the page. Then you can edit the HTML using any HTML editor, and whenever the model is regenerated, the builders read the HTML file and add all the code elements for the data. Note that in this case you're customizing just the "data" area of a page; if you want to customize the complete page (including the locations of all the navigation buttons, etc.), you would use the "Complete Page" technique discussed in the linked articles.
The main page for the new wiki documents is here: Creating Your Application's UI
And there are some overview slides here: Approaches to UI Design and Layout