Getting Started Part 3
Contents
See Also
Extending your first App
Adding a new page
Now let's spice up the app by building an additional page that provides information about employees.
Create a new blank page by clicking on the Page icon in the Form tools. If you get a blank Form section created for you by default with the page - this is determined by the App Settings (Settings at the bottom of the Modebar) - click on the trash can icon in the section header to remove it, as we do not need it.
Image Strips
Now click on the Sections icon in the Form tools and select the Image Strip.
Populating an Image Strip
Now click on the employees table in the Tables panel, then click on the photograph field and drag it into the Image Strip section that you created in the previous step.
You can also just drag an image object field directly onto an empty area on a Page and an Image Strip section will be created and populated.
Add an additional form section
Now click Sections in the Form tools and select Form. A new form section will be added to the page. Now click on the employees table as shown below and drag it into the new section that you have just created (or just drag the table onto an empty area of the Page).
Customizing form section fields
The caption for the fields in the form section can be customized by moving the mouse cursor over the caption and clicking the edit icon. If you double-click the caption, the Field's Attributes dialog will open, allowing you to modify any of its attributes.
You can remove fields you don't want to be visible by clicking the delete icon, which is then displayed.
Dividers
Click and drag the blue handle at the center of the bottom edge of the selected section to resize it. Fields in a Form section can be clicked on and dragged around to change the display ordering. You can also add subtitles, horizontal separators, column dividers or spacers to the section by clicking on the Dividers icon in the Form tools. Once the subtitle is displayed in the form section you can drag it around into a suitable position.
Subtitles are horizontal captions that can be placed anywhere in the form. Column Dividers are horizontal captions at the top of a vertical column. Horizontal Separators display as a horizontal line, whereas Spacers are used to provide blank space between Fields or other controls.
Customizing Dividers
Add a Subtitle and a Column Divider and edit their captions as shown below.
Like Fields, you click on a Divider's edit icon to modify the caption or to access the delete icon and double-click the caption to display the full attributes dialog.
Webview section
Now drag the employee Notes field onto the Page. By default, the variable length (memo) Notes field is displayed in a Webview Section.
Note that Webviews allow any web content to be rendered in a section.
The URI specified may contain references to the active data records of other sections.
To reference data in the URI use curly braces e.g. {CUSTOMERS.NAME}. This allows web content to be related to database data.
Customizing sections
You can customize the appearance of sections using the Section Attributes dialog by double-clicking on the section header or clicking the cog icon. Set the caption for each of the three sections.
Relating Image Strip sections
Now relate the Image Strip section (multiple employees records) to the Form section (details for individual employees records) and the Form section to the Webview section (employee notes).
Take another look at your App in Desktop App View.
