Difference between revisions of "Getting Started Part 3"
From Lianjapedia
Redirect page
Yvonne.milne (Talk | contribs) |
Yvonne.milne (Talk | contribs) (Redirected page to Lianja 5 Getting Started 3) |
||
(5 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | #REDIRECT [[Lianja 5 Getting Started 3]] | ||
+ | |||
+ | ==See Also== | ||
+ | [[Getting Started (Video)]] | ||
+ | |||
+ | [[Introducción Parte 3|Lea ésto en español]] | ||
+ | |||
+ | [[Getting Started Part 1]] | ||
+ | |||
+ | [[Getting Started Part 2]] | ||
+ | |||
+ | [[Getting Started Part 4]] | ||
+ | |||
==Extending your first App== | ==Extending your first App== | ||
===Adding a new page=== | ===Adding a new page=== | ||
+ | [[{{ns:file}}:getstart3_1.png|450px|thumb|left|link={{filepath:getstart3_1.png}}|New Page]] | ||
− | |||
Now let's spice up the app by building an additional page that provides information about employees. | 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 | + | Create a new blank page by clicking on the Page icon in the [[Form Tools]] and selecting '''Blank'''. |
+ | |||
+ | It will be given the default '''Name''', '''Title''' and '''Caption''' of page''N'' where ''N'' is the next page number. | ||
<br clear=all> | <br clear=all> | ||
− | === | + | ===Adding a new form section=== |
+ | [[{{ns:file}}:getstart3_2.png|450px|thumb|left|link={{filepath:getstart3_2.png}}|Add Employees Form Section]] | ||
− | |||
− | + | Click on the employees table in the Tables explorer and drag it onto the new Page to create a new Form Section. | |
<br clear=all> | <br clear=all> | ||
− | === | + | ===Adding an image gadget=== |
+ | [[{{ns:file}}:getstart3_4.png|450px|thumb|left|link={{filepath:getstart3_4.png}}|Add Image Gadget for Employee Photo]] | ||
− | |||
− | + | 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. | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<br clear=all> | <br clear=all> | ||
===Customizing form section fields=== | ===Customizing form section fields=== | ||
+ | [[{{ns:file}}:getstart3_5.png|450px|thumb|left|link={{filepath:getstart3_5.png}}|Formitem Edit Icon]] | ||
− | |||
− | The caption for the fields in the form section can be customized by moving the mouse cursor over the caption and clicking the | + | |
+ | 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. | ||
<br clear=all> | <br clear=all> | ||
− | [[{{ns:file}}: | + | [[{{ns:file}}:getstart3_6.png|450px|thumb|left|link={{filepath:getstart3_6.png}}|Formitem Remove Icon]] |
+ | |||
− | You can remove fields you don't want to be visible by clicking the | + | You can remove fields you don't want to be visible by clicking the Remove icon, which is then displayed. |
<br clear=all> | <br clear=all> | ||
Line 59: | Line 71: | ||
===Dividers=== | ===Dividers=== | ||
− | [[{{ns:file}}: | + | [[{{ns:file}}:getstart3_7.png|450px|thumb|left|link={{filepath:getstart3_7.png}}|Add Subtitle Divider]] |
− | + | ||
+ | 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. | ||
<br clear=all> | <br clear=all> | ||
Line 69: | Line 86: | ||
===Customizing Dividers=== | ===Customizing Dividers=== | ||
+ | [[{{ns:file}}:getstart3_8.png|450px|thumb|left|link={{filepath:getstart3_8.png}}|Updated Subtitle Caption]] | ||
− | |||
− | |||
− | + | Add Subtitles and edit their captions as shown. | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<br clear=all> | <br clear=all> | ||
===Webview section=== | ===Webview section=== | ||
− | + | [[{{ns:file}}:getstart3_9.png|450px|thumb|left|link={{filepath:getstart3_9.png}}|Add Webview Section for Employee Notes]] | |
− | [[{{ns:file}}: | + | |
Line 99: | Line 109: | ||
<br clear=all> | <br clear=all> | ||
− | ===Customizing | + | ===Customizing the page=== |
+ | [[{{ns:file}}:getstart3_10.png|450px|thumb|left|link={{filepath:getstart3_10.png}}|Updated Page Title and Caption]] | ||
− | |||
− | + | Make sure the Page Attributes are selected in the App Inspector and update the '''Title''' - the text shown in the Pages menu (click the hamburger icon to display the Pages menu) and the '''Caption''' - the text shown in the Page header. | |
+ | |||
+ | And update the '''Caption''' attribute for the Sections. | ||
<br clear=all> | <br clear=all> | ||
− | = | + | [[{{ns:file}}:getstart3_11.png|450px|thumb|left|link={{filepath:getstart3_11.png}}|Page Attribute: Stretch last section]] |
− | |||
− | + | 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. | ||
+ | |||
+ | Note that in Development view the Pages menu can be accessed from the hamburger in the headerbar. | ||
<br clear=all> | <br clear=all> | ||
− | [[{{ns:file}}: | + | ===Customizing the image gadget=== |
+ | [[{{ns:file}}:getstart3_12.png|450px|thumb|left|link={{filepath:getstart3_12.png}}|Image Gadget Attributes: Fixed width and Fixed height]] | ||
− | |||
+ | Set the '''Fixed width''' and the '''Fixed height''' attributes for the image gadget (400). | ||
+ | |||
+ | <br clear=all> | ||
+ | |||
+ | ===Desktop App View=== | ||
+ | [[{{ns:file}}:getstart3_13.png|450px|thumb|left|link={{filepath:getstart3_13.png}}|Desktop App View]] | ||
+ | |||
+ | |||
+ | |||
+ | Click the Desktop App View and view your extended App. | ||
+ | <br clear=all> | ||
+ | |||
+ | [[Getting Started Part 4]] | ||
[[Category:Getting Started]] | [[Category:Getting Started]] |