1,214
edits
Form: Difference between revisions
Jump to navigation
Jump to search
no edit summary
Marek Rodak (talk | contribs) |
Marek Rodak (talk | contribs) No edit summary |
||
| Line 160: | Line 160: | ||
Form tabs are the main building blocks of forms. The detail tab is primarily used for record fields. Other tab types have a different purpose, for example, a map tab can display the record location on a map. Drag tabs from the '''Tabs''' pane to the '''Designer''' pane to add them to your form. | Form tabs are the main building blocks of forms. The detail tab is primarily used for record fields. Other tab types have a different purpose, for example, a map tab can display the record location on a map. Drag tabs from the '''Tabs''' pane to the '''Designer''' pane to add them to your form. | ||
[[File:Add form tabs to form.png|600px]] | [[File:Add form tabs to form.png|alt=add form tabs to form|600px]] | ||
=== Detail tab === | === Detail tab === | ||
| Line 178: | Line 178: | ||
Depending on the [[App_projects#formatting|Formatting]] of the field configured in entity properties, the appearance of the field on the form can change. For example, if you set '''Formatting''' to "PhoneNumber", the form displays a phone icon next to phone number field that allows users to quickly initiate a call. | Depending on the [[App_projects#formatting|Formatting]] of the field configured in entity properties, the appearance of the field on the form can change. For example, if you set '''Formatting''' to "PhoneNumber", the form displays a phone icon next to phone number field that allows users to quickly initiate a call. | ||
[[File:Field actions showcase.png]] [[File:Single line of text formatting options.png|130px]] | [[File:Field actions showcase.png|alt=field formating:field action showcase]] [[File:Single line of text formatting options.png|alt=single line of text formatting options|130px]] | ||
Formatting can also be used in [[barcode scanning]] scenarios and to define [[dropdown]] lists. | Formatting can also be used in [[barcode scanning]] scenarios and to define [[dropdown]] lists. | ||
| Line 328: | Line 328: | ||
=== Associated tab properties === | === Associated tab properties === | ||
[[File:Associated tab properties on a form.png|thumb|right|Properties of an associated list]] | [[File:Associated tab properties on a form.png|alt=associated tab properties on a form|thumb|right|Properties of an associated list]] | ||
When you select any list and click '''Properties''' (or double-click on the list), you can define additional properties: | When you select any list and click '''Properties''' (or double-click on the list), you can define additional properties: | ||
| Line 427: | Line 427: | ||
Each tab on your form can have an icon. This icon is displayed in Woodford and also in the app. To display an icon, select a form tab and on the '''Properties''' pane, set '''Header''' to Icon & Title. | Each tab on your form can have an icon. This icon is displayed in Woodford and also in the app. To display an icon, select a form tab and on the '''Properties''' pane, set '''Header''' to Icon & Title. | ||
[[File:Custom icon for associated lists on forms.png|600px]] | [[File:Custom icon for associated lists on forms.png|alt=custom icon for associated lists on forms|600px]] | ||
You can then use the image picker on the '''Properties''' pane to select the icon for your tab. Alternatively, you can even upload your own custom image: click '''Remove image''' (this restores the default icon for the tab; the old icon is not deleted) and then click '''Add image''' to upload a new one. | You can then use the image picker on the '''Properties''' pane to select the icon for your tab. Alternatively, you can even upload your own custom image: click '''Remove image''' (this restores the default icon for the tab; the old icon is not deleted) and then click '''Add image''' to upload a new one. | ||
| Line 485: | Line 485: | ||
Select a form tab, and on the [[Form#Properties_pane|'''Properties''' pane]], set the maximum number of columns per row (for example 3), and the minimum width of the form (for example 400 pixels). In the app, if the available space (width) for your form tab exceeds 400, two fields are displayed in a row; when it's over 800, the maximum, three fields are displayed in a single row. | Select a form tab, and on the [[Form#Properties_pane|'''Properties''' pane]], set the maximum number of columns per row (for example 3), and the minimum width of the form (for example 400 pixels). In the app, if the available space (width) for your form tab exceeds 400, two fields are displayed in a row; when it's over 800, the maximum, three fields are displayed in a single row. | ||
[[File:Auto Grid example configuration.png|600px]] | [[File:Auto Grid example configuration.png|alt=Auto Grid configuration example|600px]] | ||
Additionally, for each field, you can force it to be always displayed as a single row, or disallow any fields after it in a single row. This behavior is controlled by the '''Grid Behavior''' property; you can configure it for each field of your tab. You can also insert a spacer to ensure that the next field starts on the left. | Additionally, for each field, you can force it to be always displayed as a single row, or disallow any fields after it in a single row. This behavior is controlled by the '''Grid Behavior''' property; you can configure it for each field of your tab. You can also insert a spacer to ensure that the next field starts on the left. | ||
[[File:Display form fields in multiple columns flexible.png|600px]] | [[File:Display form fields in multiple columns flexible.png|alt=display form fields in multiple flexible columns|600px]] | ||
For more information about automatic grids, see the [https://www.youtube.com/watch?v=7SNgmuFbOvk feature introduction] {{Badge|Webinar}} and [https://blog.resco.net/2019/03/29/whats-new-in-rescos-spring-update-2019/ blog]. {{Badge|Blog}} | For more information about automatic grids, see the [https://www.youtube.com/watch?v=7SNgmuFbOvk feature introduction] {{Badge|Webinar}} and [https://blog.resco.net/2019/03/29/whats-new-in-rescos-spring-update-2019/ blog]. {{Badge|Blog}} | ||
| Line 500: | Line 500: | ||
# Select a form tab and drag '''Table''' from the '''Fields & Components''' pane to the tab. | # Select a form tab and drag '''Table''' from the '''Fields & Components''' pane to the tab. | ||
# Select the table, and on the [[Form#Properties_pane|'''Properties''' pane]], use the + and - buttons to define the number of columns and rows.<br>[[File:Table properties.png|600px]] | # Select the table, and on the [[Form#Properties_pane|'''Properties''' pane]], use the + and - buttons to define the number of columns and rows.<br>[[File:Table properties.png|alt=table properties|600px]] | ||
#* Column width: You can specify the width of each column, either a fixed width (in pixels) or flexible width (using stars notation). To increase the width of a flexible column, add a number before the star; a 2* column is twice as wide as a 1* column.<br><small>The maximum width of the table is equal to the width of the form tab. If the table contains at least one column with a flexible width, the width of the table is set to the page width. To calculate the width of flexible columns, we subtract all fixed-width columns from the form tab width and distribute the remainder evenly.</small> | #* Column width: You can specify the width of each column, either a fixed width (in pixels) or flexible width (using stars notation). To increase the width of a flexible column, add a number before the star; a 2* column is twice as wide as a 1* column.<br><small>The maximum width of the table is equal to the width of the form tab. If the table contains at least one column with a flexible width, the width of the table is set to the page width. To calculate the width of flexible columns, we subtract all fixed-width columns from the form tab width and distribute the remainder evenly.</small> | ||
#* Row height: Use Auto for automatic height calculation or enter an exact pixel size.<br><small>The automatic calculation uses the maximal height of the blocks in the table row. That means either the height of text in a particular font or the height of an image (the image height might be scaled automatically to fit into a particular width).</small> | #* Row height: Use Auto for automatic height calculation or enter an exact pixel size.<br><small>The automatic calculation uses the maximal height of the blocks in the table row. That means either the height of text in a particular font or the height of an image (the image height might be scaled automatically to fit into a particular width).</small> | ||
# Add fields to the table (make sure they are actually inside the table element). | # Add fields to the table (make sure they are actually inside the table element). | ||
# Select each field and on the '''Properties''' pane, select the table cell(s) to define the '''Position in table'''. Note that you can click and drag across multiple cells.<br>[[File:Item position in table.png|600px]] | # Select each field and on the '''Properties''' pane, select the table cell(s) to define the '''Position in table'''. Note that you can click and drag across multiple cells.<br>[[File:Item position in table.png|alt=Item position in table|600px]] | ||
# Sample table in the app:<br>[[File:Grid item example.png]] | # Sample table in the app:<br>[[File:Grid item example.png|alt=Grid item example]] | ||
See also: [https://blog.resco.net/2020/05/11/new-form-table-designer-guide/ Form table designer guide] {{Badge|Blog}} | See also: [https://blog.resco.net/2020/05/11/new-form-table-designer-guide/ Form table designer guide] {{Badge|Blog}} | ||
[[Category:Woodford]] | [[Category:Woodford]] | ||