Getting Started Part 3
Contents
See Also
Extending your first App
Page Wizard
Now let's add an additional page that provides information about employees.
Create a new page with a Form Section by clicking on the Page icon in the Form Tools and selecting Form Page.
The Page Wizard will start. The Layout screen allows you to configure various elements on the Page. For now, just click Next to continue.
In the Appearance screen, change the Menu caption - the caption that will be displayed in the Page selection menu - and the Page Header Caption. Click Next to continue.
In the Behavior screen, check the Stretch last section checkbox. Click Done to complete the Page Wizard.
Section Wizard
The Section Wizard will now be displayed, taking you through the creation of a new Form Section.
In the Layout screen, enter the Header Caption. Click Next to continue.
In the Appearance screen you can configure the Section colors. For now, just click Next to continue.
In the Data Source screen, select employees from the first column then click the double arrow to select all the fields. Click Done to complete the Section Wizard.
Adding an image gadget
Click and drag the blue indicator at the bottom of the Form Section to resize it to a single column.
Then scroll down to the Photograph column in the Columns explorer, select it and drag it into the Form Section.
This will automatically add an Image Gadget for the photo column.
The photo column is a blob (binary large object) previously loaded with an employee photo image file.
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.
You can remove fields you don't want to be visible by clicking the Remove icon, which is then displayed.
Dividers
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 Subtitles and edit their captions as shown.
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.
Update the Caption attribute for the Section.
Customizing the Image Gadget
In the App Inspector, set the Skills Level to Advanced. This shows all available attributes. Set the Fixed width and the Fixed height attributes for the image gadget to 400.
Customizing the Pages
For both the Customers and the Employees Pages, set the Stretch last section attribute to True.
This extends the bottom section to fill the page.
Select the Pages from the Pages menu from the hamburger in the headerbar.
Desktop App View
Click the Desktop App View and view your extended App.
