...
When entering the Page Builder, the page looks very similar to this:
Data Sources tab
Text
Sections tab
Text
DOM tab
Text
Toolbox
Txt
Properties
The Data Source tab holds all the data sources that interact with your page. To add a data source, click on the arrow on the Add button. To edit a data source, select it and click on Settings in the Properties panel. Data Sources allow your page to interact with other data, like business objects and other pages.
Sections tab
The Sections tab is a good place from which to navigate among the various panels within your page. Clicking on a panel will make its components appear on the Design surface.
DOM tab
All new pages come pre-populated with the following four components
- Head1 - this corresponds with the <head> tags of any HTML page
- PageManager - this manages custom C# code and resources such as the JavaScript navigation library
- ResourceManager1 - this manages the following listeners
- AjaxRequestComplete
- AjaxRequestExcption
- BeforeAjaxRequest
- DocumentReady
- TextResize
- WindowResize
- WindowScroll
- WindowUpload
- vwViewPort1 - all of the UI components, such as panels, textfields, and buttons are arranged within the ViewPort in a folder structure
All of a page's stores can also be found here.
Design surface
The Design surface is the core of the visual page builder. Drag page elements onto the design surface, arrange elements on the design surface and delete them from the design surface.
Preview surface
The preview displays the web page with live data. Across the top of the screen, you can select the environment in which you will see this page.
Source surface
The source surface holds all the source code that is generated to create the page. To customize a page beyond the capabilities of the page builder drag and drop wizard it is possible to edit this code.
Toolbox
The Toolbox displays all the elements that can be added to a particular container, such as a panel or a top bar.
For more information about these elements and additional ones, see
Properties
The Properties panel allows for the configuration of settings, listeners, data bindings, etc. Text