From wiki.ginstr.com
Jump to: navigation, search
m (app background)
Line 12: Line 12:
 
#[[SSO_common_content#login_button|<u>Login</u>]] to the [[SSO_common_content#SSO_lobby|SSO lobby]].  
 
#[[SSO_common_content#login_button|<u>Login</u>]] to the [[SSO_common_content#SSO_lobby|SSO lobby]].  
 
#Click on the [[#Accessing ginstr business app maker|<u>'''ginstr business app maker''' icon</u>]] in the [[SSO_common_content#SSO_lobby|SSO lobby]] to navigate to the '''ginstr business app maker''' page  
 
#Click on the [[#Accessing ginstr business app maker|<u>'''ginstr business app maker''' icon</u>]] in the [[SSO_common_content#SSO_lobby|SSO lobby]] to navigate to the '''ginstr business app maker''' page  
#Define the app name and general appearance in the [[#general app settings|<u>general app settings panel</u>]]
+
#In the [[#content|'''content''' section]], you can [[#widgets|<u>Add widgets</u>]] by dragging them from the [[#widgets|widgets panel]] in to the desired position on the device preview.
#[[#visible_widgets|<u>Add visible widgets</u>]] by dragging them from the [[#widgets|widgets panel]] in to the desired position on the device preview.
 
 
#Customise each widget by selecting the widget and editing its properties in the [[#properties|<u>properties panel</u>]]
 
#Customise each widget by selecting the widget and editing its properties in the [[#properties|<u>properties panel</u>]]
 
#Individual [[#widgets|widgets]] can be rearranged by dragging them in to the desired order in the device preview.
 
#Individual [[#widgets|widgets]] can be rearranged by dragging them in to the desired order in the device preview.
#Individual [[#widgets|widgets]] in the device preview can be deleted by selecting one or more widgets in the device preview and pressing the <div style="display:inline-block;width:200px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#F75757"><span style="color:white;">[[File:trashcan_icon.png|link=]] delete highlighted widget(s)</span></div> button.
+
#Individual [[#widgets|widgets]] in the device preview can be copied or deleted using the [[#Copy_/_Delete|'''copy / delete''' buttons]] that appear when hovering your mouse over any [[#widgets|widget]] in the device preview.
#[[#hidden widgets|<u>Add hidden widgets</u>]] by dragging them from the [[#widgets|widgets panel]] in to the device preview.
+
#In the [[#theme|'''theme''' section]], you can  choose a theme to style the colour and appearance of the text, buttons, input fields and dropdown elements.
#[[#enable phone view|<u>Enable phone view</u>]] to preview the layout of the app as it will appear to the end user.
+
#The [[#background|'''background''' section]] allows you to choose a background image or colour for all app screens.
#[[#publish app in ginstr launcher|<u>Publish the app</u>]] by pressing the <div style="display:inline-block;width:195px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white;">publish app in ginstr launcher</span></div> button.
+
#Choose a homescreen icon from the range of options available in the [[#app_icon|'''app icon''' section]].
 +
#The [[#login_screen_graphics|'''login screen graphics''' section]] allows you to choose an appropriate image to be shown on the login screen.
 +
#When you are happy with the content and appearance of your app, navigate to the [[#final preview|'''final preview''' section]], where the app can be saved, published or shared.
 
<br>
 
<br>
 
 
=Accessing ginstr business app maker=
 
=Accessing ginstr business app maker=
 
[[File:gbam_icon.png|left|102px|link=|'''ginstr business app maker''' icon]]
 
[[File:gbam_icon.png|left|102px|link=|'''ginstr business app maker''' icon]]
Line 32: Line 32:
 
Clicking on the '''ginstr business app maker''' icon (shown left) will open the '''ginstr business app maker''' in a new browser tab.
 
Clicking on the '''ginstr business app maker''' icon (shown left) will open the '''ginstr business app maker''' in a new browser tab.
  
 +
=Landing Screen=
 +
[[File:gbam_landing.png|The '''ginstr business app maker''' Landing Screen]]
 +
 +
The first screen that is displayed on opening the '''ginstr business app maker''' consists of two options:
 +
::'''create your own app'''
 +
:::this option allows you to create your own personal app from scratch
 +
::'''modify a template app'''
 +
:::this option allows you to use an existing app created by '''ginstr''' or by our community
  
 
=Layout of the ginstr business app maker=
 
=Layout of the ginstr business app maker=
 
The '''ginstr business app maker''' consists of a central device preview, which displays a preview of the main app screen, and various buttons and sidebars which allow the user to customize the app.
 
The '''ginstr business app maker''' consists of a central device preview, which displays a preview of the main app screen, and various buttons and sidebars which allow the user to customize the app.
  
[[File:gbam_layout.png|thumb|none|800px|Layout of the '''ginstr business app maker''']]
+
[[File:gbam_navbar.png|thumb|none|684px|The '''ginstr business app maker''' navigation bar]]
  
The left sidebar consists of two panels which contain collapsible menus.
+
At the bottom of the device preview in the centre of the page there is a navigation bar which can be used to navigate between the following sections:
:*[[#general app settings|general app settings]]
+
:*[[#content|content]]
:*[[#widgets|widgets]]
+
:*[[#theme|theme]]
 +
:*[[#background|background]]
 +
:*[[#app icon|app icon]]
 +
:*[[#login screen graphics|login screen graphics]]
 +
:*[[#final preview|final preview]]
  
The right sidebar contains the [[#properties|properties]] panel, which shows options to customise whichever widget is selected in the device preview.
+
The <div style="display:inline-block;width:90px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:silver"><span style="color:black;">[[File:gbam_back.png|13px|link=]]&nbsp;&nbsp; back</span></div> and <div style="display:inline-block;width:90px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:silver"><span style="color:black;">next &nbsp;&nbsp;[[File:gbam_next.png|13px|link=]]</span></div> buttons can be used to move to the previous or next section in the sequence. Alternatively, individual sections can be selected by clicking on their title.
 +
:Pressing the <div style="display:inline-block;width:90px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:silver"><span style="color:black;">[[File:gbam_back.png|13px|link=]]&nbsp;&nbsp; back</span></div> button while on the [[#content|content]] section will return to the [[#Landing_Screen|landing screen]].
 +
:Pressing the <div style="display:inline-block;width:90px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:silver"><span style="color:black;">next &nbsp;&nbsp;[[File:gbam_next.png|13px|link=]]</span></div> button while on the [[#login screen graphics|login screen graphics]] section will navigate to the [[#final preview|final preview]] section, where the app can be saved, published or shared.
  
The following buttons are displayed above the device preview in the centre of the page.
+
The screen layout and sidebar content will vary depending on which of the above sections of the '''ginstr business app maker''' is active.
:*[[#publish app in ginstr launcher|publish app in ginstr launcher]]
 
:*[[#save for later use|save for later use]]
 
:*[[#load from exists|load from exists]]
 
:*[[#enable phone view|enable phone view]] [[File:checkbox0.png|link=]]
 
:*[[#delete highlighted widget(s)|delete highlighted widget(s)]]
 
  
[[File:gbam_general_app_settings.png|thumb|right|350px|1. '''general app settings''' panel]]
+
==content==
==general app settings==
+
[[File:gbam_content.png|thumb|right|none|800px|1. Layout of the '''content''' section]]
 +
The content section consists of a central device preview, with a sidebar on the left containing the [[#widgets|widgets]] panel, and a sidebar on the right containing the [[#properties|properties]] panel.
  
===basic information===
+
On this page, you can drag and drop [[#widgets|widgets]] from the [[#widgets|widgets panel]] to the central device preview and arrange them as desired. The [[#properties|properties panel]] on the right shows options to customise whichever widget is selected in the device preview.
These are the basic settings of the app. Changes made to these settings may affect the appearance of all of the app's screens.
 
====language====
 
:This dropdown list allows the user to select a default language for the app.
 
  
:If the '''language''' is changed here, the text resources and widget titles referred to in this manual will change.
+
The following options appear at the top of the screen:
 +
:*'''zoom slider'''
 +
:::this can be used to increase ([[File:gbam_zoom+.png|link=]]) or decrease ([[File:gbam_zoom-.png|link=]]) the size of the device preview as required
 +
:*'''preview type dropdown'''
 +
:::this dropdown box can be used to switch between '''mockup''' view (showing a generic device bezel around the device preview), and '''artboard''' view (showing a single line border around the device preview).
 +
:*'''display language dropdown'''
 +
:::this dropdown box can be used to select a default language for the app, where '''en''' is English & '''de''' is German
 +
:::If the '''language''' is changed here, the text resources and widget titles referred to in this manual will change.
 +
:::This manual is based on the features which appear on the '''ginstr business app maker''' when an app is being created or edited in '''English'''.
 +
:*'''project name'''
 +
:::this input box defines the name of the current app, which is required when saving or publishing
 +
:::The '''project name''' defined here
 +
::::*is used to identify the app in the list of applications in '''[[ginstr launcher]]'''
 +
::::*is used to identify the app in the list of app tables in '''[[ginstr web]]'''
 +
::::*appears on the login screen of the app
 +
::::*appears below the '''[[#app_icon|app icon]]''' on the device homescreen
 +
::<div style="display:inline-block;width:80px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:black;">save</span></div> '''button'''
 +
:::this button opens the '''save app''' dialog window and allows you to save the current status of your app without publishing
 +
::<div style="display:inline-block;width:80px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:black;">save as</span></div> '''button'''
 +
:::this button opens the '''save app''' dialog window and allows you to save the current status of your app without publishing
 +
::<div style="display:inline-block;width:100px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#FFCC00"><span style="color:black;">publish app</span></div> '''button'''
 +
:::this button opens the [[#final preview|final preview]] screen and allows you to publish your app. This button is hidden if there are no widgets added to the device preview.
 +
:*'''show hidden widgets''' [[File:checkbox1.png|link=]]
 +
:::this checkbox toggles whether or not '''hidden widgets''' are visible in the device preview. '''Hidden widgets''' automatically record data to [[ginstr web]] tables but are not visible to the user of the app.
  
:This manual is based on the features which appear on the '''ginstr business app maker''' when an app is being created or edited in '''English'''.
+
===widgets===
 +
The '''widgets''' panel contains all available [[widgets]] organised into categories. The search bar at the top left can be used to search for a specific widget.
  
====app name====
+
Widgets can be added to the app by selecting them from the '''widgets''' panel and dragging them to the device preview screen in the centre of the page.
:This text field is used to define the name of the app.
 
  
:The '''app name''' defined here
+
The order in which these widgets are shown can be rearranged on the screen by dragging and dropping individual widgets above or below each other.
::*is used to identify the app in the list of applications in '''[[ginstr launcher]]'''
 
::*is used to identify the app in the list of app tables in '''[[ginstr web]]'''
 
::*appears on the login screen of the app
 
::*appears below the '''[[#app_icon|app icon]]''' on the device homescreen
 
  
====theme====
+
If any individual widget is selected from the device preview, its properties can be edited in the '''[[#properties|properties]]''' panel at the top right of the '''ginstr business app maker''' screen.
[[File:gbam_themes.png|thumb|right|350px|2. Window displayed for '''theme''' selection]]
 
[[File:gbam_confirm_theme.png|thumb|right|350px|3. Window displayed for '''theme''' preview]]
 
:The name of the app's current theme is displayed in this field.
 
  
:The user can change this theme by clicking the pencil icon [[File:pencil_icon2.png|link=]] on the right hand side of the field.
+
If one or more widgets has been selected in the device preview, the selected widget(s) can be deleted using the <div style="display:inline-block;width:180px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#F75757"><span style="color:black;">delete highlighted widget(s)</span></div> button.
::This opens a '''theme''' window (Screenshot 2, shown right) which allows another theme to be selected.
 
  
:Previews of the graphical elements associated with each theme are shown in this window.
+
You can also use the <code>Delete</code> key on your keyboard for the same purpose.
  
:The checkboxes on the left hand side of the window can be used to filter the available '''themes''' before selecting one.
+
Multiple individual widgets can be selected by holding the <code>Ctrl</code> key while clicking on different widgets.  
  
::;colorGroup:
+
Multiple consecutive widgets can be selected by selecting one widget then holding the <code>⇧&nbsp;Shift</code> key and clicking another widget in the device preview. This will select not only first selected widget and the second clicked widget, but also all widgets positioned between them in the device preview.
:::refers to the colour of elements such as title text and buttons in the app.
 
  
::;shape:
+
All selected widgets will be highlighted against the app background in the device preview.
:::refers to the shape of the buttons in the app. The button shape is displayed in the centre of each theme preview.
 
  
:When the user clicks on one of the theme previews, a '''confirm theme''' window (Screenshot 3, shown right) opens, which contains a complete display of the graphical elements which will appear in the app.
+
The [[#properties|properties]] which can be defined for each widget type are described below.
  
:Most of the icons/buttons appear in both colour and greyscale form. The greyscale items represent the graphics which appear briefly when a button is pressed in the app.
+
====[[File:gbam_audio.png|40px|link=]] audio====
 +
::This widget allows an audio recording to be made and subsequently saved to a designated column on [[ginstr web]] as part of the record.
 +
::After an audio recording is made, a counter displays the number of recordings captured.
  
:Pressing the <div style="display:inline-block;width:80px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:#grey;font-size:88%;font-weight:bold">confirm</span></div> button on the '''confirm theme''' window will confirm that the theme shown will be used for this app, and the window will close.
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''audio''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears at the top of the '''audio''' widget on the app screen.
  
:If the user presses the <div style="display:inline-block;width:80px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:#grey;font-size:88%;font-weight:bold">back</span></div> button on the '''confirm theme''' window, the previous '''theme''' window will reappear.
+
<u>validations</u>
  
:Clicking the <div style="display:inline-block;width:80px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:#grey;font-size:88%;font-weight:bold">cancel</span></div> button in the '''theme''' window will close the window and no change will be made.
+
[[File:checkbox0.png|link=]] '''required'''
 +
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to provide an audio recording before submitting the form).
 +
::'''error message in case of input error'''
 +
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
====app icon====
+
<u>database</u>
[[File:gbam_app_icon.png|thumb|right|350px|4. Window displayed for '''app icon''' selection]]
 
:The name of the app's current homescreen icon is shown in this text field with a preview of the icon shown below it.
 
  
:The user can change this icon by clicking the pencil icon [[File:pencil_icon2.png|link=]] on the right hand side of the field.
+
[[File:checkbox1.png|link=]] '''is part of database'''
::This opens an '''app icon''' window (Screenshot 4, shown right) which allows another icon to be selected.
+
:This checkbox should be checked if the input from this field is part of the database table.
 +
::(This checkbox is checked by default for each new '''audio''' widget which is added to the app).
 +
|}
  
:The checkboxes on the left hand side of the window can be used to filter the available '''app icons''' before selecting one.
+
====[[File:gbam_barcode.png|40px|link=]] barcode====
 +
::This widget allows a barcode to be scanned by the app user.
  
::;colorGroup:
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
:::refers to the main colour of each app icon.
+
! '''barcode''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears at the top of the '''barcode''' widget on the app screen.
  
::;industry:
+
'''hint'''
:::refers to the suggested industry type of each app icon.
+
:defines the text which appears within the empty code field.
  
:Clicking one of the icon previews shown in the window will select it, and a blue border will appear around it.
+
'''alignment'''
 +
:this dropdown offers the choice between two options:
 +
::;vertical:displays the "scan code" button below the code field
 +
::;horizontal:displays the "scan code" button on the same line as the code field
  
::If the user then clicks on the <div style="display:inline-block;width:80px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:#grey;font-size:88%;font-weight:bold">ok</span></div> button in the '''app icon''' window, the selected icon will replace the previous app icon.
+
<u>validations</u>
  
:Clicking the <div style="display:inline-block;width:80px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:#grey;font-size:88%;font-weight:bold">cancel</span></div> button in the '''app icon''' window will close the window and no change will be made.
+
[[File:checkbox0.png|link=]] '''required'''
 +
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to scan a barcode before submitting the form).
 +
::'''error message in case of input error'''
 +
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
====app background====
+
<u>database</u>
[[File:gbam_background.png|thumb|right|350px|5. Window displayed for '''app background''' selection]]
 
:The name of the app's current background is displayed in this field.
 
  
:The default background is plain white (<code>#FFFFFF</code>).
+
[[File:checkbox1.png|link=]] '''is part of database'''
 +
:This checkbox should be checked if the input from this field is part of the database table.
 +
::(This checkbox is checked by default for each new '''barcode''' widget which is added to the app).
 +
|}
  
:The user can change this background by clicking the pencil icon [[File:pencil_icon2.png|link=]] on the right hand side of the field.
+
====[[File:gbam_barcodeReadOnly.png|40px|link=]] barcode (read-only)====
::This opens a '''background''' window (Screenshot 5, shown right) which allows another background to be selected.
+
::This widget displays a barcode retrieved from a record saved in [[ginstr web]].
  
:The checkboxes on the left hand side of the window can be used to filter the available background images before selecting one.
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''barcode (read-only)''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears at the top of the '''barcode''' widget on the app screen.
  
::;brightness:
+
<u>validations</u>
:::refers to whether a background is dark, light or a blend between the two.
+
 
 +
[[File:checkbox0.png|link=]] '''required'''
 +
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to scan a barcode before submitting the form).
 +
::'''error message in case of input error'''
 +
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
::;colorGroup:
+
<u>database</u>
:::refers to the main colour of each app background.
 
  
:Clicking on one of the '''app background''' previews shown in the window will select it, and a blue border will appear around it.
+
[[File:checkbox1.png|link=]] '''is part of database'''
 +
:This checkbox should be checked if the input from this field is part of the database table.
 +
::(This checkbox is checked by default for each new '''barcode''' widget which is added to the app).
 +
|}
  
::If the user then clicks on the <div style="display:inline-block;width:80px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:#grey;font-size:88%;font-weight:bold">ok</span></div> button in the '''background''' window, the selected app background will replace the previous one.
+
====[[File:gbam_birthday.png|40px|link=]] birthday====
 +
::This is a widget which allows the app user to select a date which is subsequently saved in a table column.
  
:Clicking the <div style="display:inline-block;width:80px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:#grey;font-size:88%;font-weight:bold">cancel</span></div> button in the '''background''' window will close the window and no change will be made.
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''birthday''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears above the date displayed.
  
====image below login area====
+
<u>validations</u>
[[File:gbam_login_area_image.png|thumb|right|350px|6. Window displayed for '''image below login area''' selection]]
 
:The name of the app's current login screen image is displayed in this field with a preview of the image shown below it.
 
  
:The user can change this image by clicking the pencil icon [[File:pencil_icon2.png|link=]] on the right hand side of the field.
+
[[File:checkbox0.png|link=]] '''is unique'''
::This opens a '''login area image''' window (Screenshot 6, shown right) which allows another image to be selected.
+
:Checking this checkbox allows the user to ensure that the input from this field is required to be unique.
  
:The checkboxes on the left hand side of the window can be used to filter the available images before selecting one.
+
<u>database</u>
  
::;appearance:
+
::[[File:checkbox1.png|link=]] '''is part of database'''
:::refers to whether the login screen image is dark, light or a blend between the two.
+
:This checkbox should be checked if the input from this field is part of the database table.
 +
::(This checkbox is checked by default for each new '''birthday''' widget which is added to the app).
 +
|}
  
::;industryType:
+
====[[File:gbam_numberCalculation.png|40px|link=]] calculated value====
:::refers to the suggested industry type of each login screen image.
+
::The '''calculated value''' widget performs a numerical calculation upon pressing a button and displays the result.
  
:Clicking one of the images shown in the window will select it, and a blue border will appear around it.
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''calculated value''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears above the number entry field.
  
::If the user then clicks on the <div style="display:inline-block;width:80px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:#grey;font-size:88%;font-weight:bold">ok</span></div> button in the '''login area image''' window, the selected login screen image will replace the previous one.
+
'''hint'''
 +
:defines the text which appears in the empty number entry field.
  
:Clicking the <div style="display:inline-block;width:80px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:#grey;font-size:88%;font-weight:bold">cancel</span></div> button in the '''login area image''' window will close the window and no change will be made.
+
'''button label'''
 +
:defines the text which appears in the button.
  
====orientation====
+
'''initial input'''
:This dropdown contains a list of the following orientation options for the app:
+
:defines the numerical value inserted in the number entry field by default. If no '''initial input''' value is defined, the '''hint''' value will be displayed in the empty number entry field instead.
  
::;portrait:
+
<u>validations</u>
:::Selecting this option ensures that the app is locked to '''portrait''' orientation, regardless of the orientation settings of the device.
 
  
::;landscape:
+
[[File:checkbox0.png|link=]] '''required'''
:::Selecting this option ensures that the app is locked to '''landscape''' orientation, regardless of the orientation settings of the device.
+
:Checking this checkbox makes this a '''required''' input field (i.e. it will be mandatory to provide input in this field before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate the field is mandatory.
 +
::'''error message'''
 +
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
::;both:
+
[[File:checkbox0.png|link=]] '''is unique'''
:::Selecting this option allows both '''portrait''' and '''landscape''' orientation, depending on the orientation settings of the device.
+
:Checking this checkbox allows the user to ensure that the input from this field is required to be unique.
  
==widgets==
+
<u>database</u>
Widgets can be added to the app by selecting them from the '''widgets''' panel and dragging them to the device preview screen in the centre of the page.
 
  
The order in which these widgets are shown can be rearranged on the screen by dragging and dropping individual widgets above or below each other.
+
::[[File:checkbox1.png|link=]] '''is part of database'''
 +
:This checkbox should be checked if the input from this field is part of the database table.
 +
::(This checkbox is checked by default for each new '''calculated value''' widget which is added to the app).
  
If any individual widget is selected from the device preview, its properties can be edited in the '''[[#properties|properties]]''' panel at the top right of the '''ginstr business app maker''' screen.
+
<u>actions</u>
 +
:This section allows you to define the numerical calculation to be performed with the value entered in to the widget's number entry field.
  
The [[#properties|properties]] which can be defined for each widget type are described below.
+
:Each part of the formula must be added manually. First, enter the numerical value in the '''write value''' field and press the [[File:gbam_zoom+.png|link=]] button to the right. Then, select the desired operand from the dropdown list.
  
[[File:gbam_visible_widgets.png|thumb|right|350px|7. '''visible widgets''' panel]]
+
:The full formula is displayed in the '''formula''' field at the bottom.
===visible widgets===
 
:These widgets will be visible to the user of the app, and as such they are visible on the device preview whether [[#enable_phone_view|phone view]] is enabled or not.
 
  
:The titles of widgets described in this section correspond to the text which appears in or above them in the left sidebar by default.
+
:Once added, each part of the formula can be removed by pressing the [[File:gbam_zoom-.png|link=]] button to the right of the corresponding '''write value''' field.
  
:Some explanations of these titles may also appear in brackets.
+
:To clear all entered formulae, press the <div style="display:inline-block;width:80px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:silver"><span style="color:black">clear all</span></div> button.
 +
|}
  
====screen title====
+
====[[File:gbam_checkbox.png|40px|link=]] checkbox====
:The '''screen title''' widget contains title text, a settings button, and a logout button.
+
::Checkboxes can be added to the app as widgets. The responses are saved to a column on [[ginstr web]] as either true ([[File:true_status_icon.png|link=]]) or false ([[File:false_status_icon.png|link=]]) status.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''screen title''' widget options in [[#properties|properties panel]]
+
! '''checkbox''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears in the '''screen title''' widget.
+
:defines the text which appears next to the checkbox
 +
 
 +
<u>database</u>
 +
 
 +
[[File:checkbox1.png|link=]] '''is part of database'''
 +
:This checkbox should be checked if the input from this field is part of the database table.
 +
::(This checkbox is checked by default for each new '''checkbox''' widget which is added to the app).
 
|}
 
|}
  
====screen settings title====
+
====[[File:gbam_checkbox_R_O.png|40px|link=]] checkbox (read-only)====
:The '''screen settings title''' widget contains title text and a settings button.
+
::This widget is used to show a text label next to a checkbox which retrieves its '''status''' value (checked or unchecked) from a record saved in [[ginstr web]].
 +
 
 +
::The '''status''' value (checked or unchecked) can not be changed in the ginstr app on the device.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''screen settings title''' widget options in [[#properties|properties panel]]
+
! '''checkbox (read-only)''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears in the '''screen settings title''' widget.
+
:defines the text which appears next to the checkbox.
 +
 
 +
<u>database</u>
 +
 
 +
[[File:checkbox1.png|link=]] '''is part of database'''
 +
:If this checkbox is checked, the '''status''' value (checked or unchecked) shown in the widget will be stored as part of the database table record in [[ginstr web]] as <code>[[Datatypes#status|status]]</code> [[Datatypes|datatype]].
 +
::(This checkbox is checked by default for each new '''checkbox (read-only)''' widget which is added to the app).
 
|}
 
|}
  
====text label====
+
====[[File:gbam_clear.png|40px|link=]] clear====
:This is a labelled text entry field, which can contain alphanumeric characters and symbols.
+
::This is a button which, when pressed, resets or clears the contents of the form.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''text label''' widget options in [[#properties|properties panel]]
+
! '''clear''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears above the text entry field.
+
:defines the text which appears inside the reset button on the app screen.
 +
 
 +
<u>actions</u>
 +
 
 +
'''widgets to clean'''
 +
:defines which of the widgets currently on screen should be reset to default when the reset button is pressed.
 +
:All visible widgets are selected by default. Multiple widgets can be selected by holding the <code>Ctrl</code> key and clicking on their names individually.
 +
:Only the widgets selected in the '''widgets to clean''' list below this checkbox wbe cleared by this reset buttonssed.
 +
|}
 +
 
 +
====[[File:gbam_date.png|40px|link=]] date====
 +
::This is a widget which allows the app user to select a date which is subsequently saved in a table column.
  
'''hint'''
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
:defines the text which appears in the text entry field until its contents are edited by the user.
+
! '''date''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears above the date displayed.
  
[[File:checkbox0.png|link=]] '''multiline'''
+
<u>database</u>
:Checking this checkbox will allow multiple lines of text input in this field.
 
  
<u>validations</u>
+
::[[File:checkbox1.png|link=]] '''is part of database'''
 +
:This checkbox should be checked if the input from this field is part of the database table.
 +
::(This checkbox is checked by default for each new '''date''' widget which is added to the app).
 +
|}
  
[[File:checkbox0.png|link=]] '''required'''
+
====[[File:gbam_DateTime_Hidden.png|40px|link=]] date and time (hidden)====
:Checking this checkbox makes this a '''required''' input field (i.e. it will be mandatory to provide input in this field before submitting the form. When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate the field is mandatory.
+
::If this widget is added, the current date and time is recorded and saved to a designated column on [[ginstr web]].
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 
  
[[File:checkbox0.png|link=]] '''is unique'''
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
:Checking this checkbox allows the user to ensure that input from this field is required to be unique
+
! '''date and time (hidden)''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''database column headline'''
 +
:defines the column header for the column which is to hold the '''date and time''' values in [[ginstr web]].
 +
|}
  
'''min length'''
+
====[[File:gbam_DateTime_R_O.png|40px|link=]] date & time (read-only)====
:defines the minimum character length which will be accepted as input for this field.
+
::This widget displays the current date & time on screen and is not editable by the user. The date & time value is subsequently saved in a table column.
:If <code>0</code> is entered here the default minimum of 1 character will apply.
 
  
'''max length'''
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
:defines the maximum character length which will be accepted as input for this field.
+
! '''date & time (read-only)''': [[#properties|properties]]
:If <code>0</code> is entered here there will be no limit on the maximum number of characters.
+
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears above the date displayed.
  
 
<u>database</u>
 
<u>database</u>
  
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
:This checkbox should be checked if the input from this field is part of the database table.
+
:This checkbox should be checked if date value shown in the widget is part of the database table.
::(This checkbox is checked by default for each new '''text label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''date & time (read-only)''' widget which is added to the app).
 
|}
 
|}
  
====integer number label====
+
====[[File:gbam_Date_R_O.png|40px|link=]] date (read-only)====
:This is a labelled number entry field which allows an integer (whole number) to be recorded in a table column.
+
::This widget displays the current date and time on screen and is not editable by the user.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::The date value is subsequently saved in a table column (provided the option '''is part of database''' is checked).
! '''integer number label''' widget options in [[#properties|properties panel]]
+
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''date (read-only)''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears above the number entry field.
+
:defines the text which appears above the date and time displayed.
'''hint'''
 
:defines the text which appears in the number entry field until its contents are edited by the user.
 
 
 
<u>validations</u>
 
 
 
[[File:checkbox0.png|link=]] '''required'''
 
:Checking this checkbox makes this a '''required''' input field (i.e. it will be mandatory to provide input in this field before submitting the form. When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate the field is mandatory.
 
::'''error message'''
 
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 
 
 
[[File:checkbox0.png|link=]] '''is unique'''
 
:Checking this checkbox allows the user to ensure that input from this field is required to be unique.
 
  
 
<u>database</u>
 
<u>database</u>
  
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
:This checkbox should be checked if the input from this field is part of the database table.
+
:If this checkbox is checked, the date and time value shown in the widget will be saved as part of the database table.
::(This checkbox is checked by default for each new '''integer number label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''date (read-only)''' widget which is added to the app).
 
|}
 
|}
  
====decimal number label====
+
====[[File:gbam_Number_Decimal.png|40px|link=]] decimal number====
:This is a labelled number entry field which allows a number containing a decimal point to be recorded in a table column.
+
::This is a labelled number entry field which allows a number containing a decimal point to be recorded in a table column.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''decimal number label''' widget options in [[#properties|properties panel]]
+
! '''decimal number''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
Line 308: Line 405:
  
 
[[File:checkbox0.png|link=]] '''is unique'''
 
[[File:checkbox0.png|link=]] '''is unique'''
:Checking this checkbox allows the user to ensure that input from this field is required to be unique.
+
:Checking this checkbox allows the user to ensure that the input from this field is required to be unique.
  
 
'''decimal format'''
 
'''decimal format'''
Line 323: Line 420:
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
:This checkbox should be checked if the input from this field is part of the database table.
 
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''decimal number label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''decimal number''' widget which is added to the app).
 
|}
 
|}
  
====default number label====
+
====[[File:gbam_Number_Decimal_R_O.png|40px|link=]] decimal number (read-only)====
:This is a number entry field which allows a number (either integer or decimal number) to be recorded in a table column.
+
::This widget is used to load a decimal number value from [[ginstr web]] and display it on the app screen.
 +
 
 +
::The '''decimal number (read-only)''' value can not be edited in the ginstr app on the device.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''default number label''' widget options in [[#properties|properties panel]]
+
! '''decimal number (read-only)''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears as the heading.
 +
'''alignment'''
 +
:this dropdown offers the choice between two options:
 +
::;vertical:displays the '''label''' above the '''decimal number (read-only)''' value on a separate line.
 +
::;horizontal:displays the '''label''' to the left of the '''decimal number (read-only)''' value on the same line.
 +
 
 +
<u>database</u>
 +
 
 +
[[File:checkbox1.png|link=]] '''is part of database'''
 +
:If this checkbox is checked, the '''decimal number (read-only)''' value shown in the widget will be stored as part of the database table record in [[ginstr web]] as <code>[[Datatypes#number|number]]</code> [[Datatypes|datatype]].
 +
::(This checkbox is checked by default for each new '''decimal number (read-only)''' widget which is added to the app).
 +
|}
 +
 
 +
====[[File:gbam_Number_Decimal_Dropdown.png|40px|link=]] decimal number dropdown====
 +
::This is a dropdown list of numerical values.
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''decimal number dropdown''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears above the dropdown.
 +
 
 +
<u>validations</u>
 +
 
 +
[[File:checkbox0.png|link=]] '''required'''
 +
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to select a value from the dropdown before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate an option from the dropdown is mandatory.
 +
::'''error message'''
 +
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 +
 
 +
<u>database</u>
 +
 
 +
[[File:checkbox1.png|link=]] '''is part of database'''
 +
:This checkbox should be checked if the input from this field is part of the database table.
 +
::(This checkbox is checked by default for each new '''decimal number dropdown''' widget which is added to the app).
 +
 
 +
<u>actions</u>
 +
 
 +
'''dropdown menu options'''
 +
:defines the individual number options which the user will be able to select from the dropdown.
 +
:To add an option, enter the desired number in the lower input field and click the <div style="display:inline-block;width:40px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">add</span></div> button. The number option will now appear in the list above the input field.
 +
:To delete an existing option, select it from the list and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">delete</span></div> button to delete it.
 +
:To change an existing option, select it from the list, edit the number in the lower input field and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">update</span></div> button.
 +
 
 +
'''messages'''
 +
:'''no data'''
 +
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, a default error message will be shown when an app user attempts to submit the form without selecting an option from the dropdown.
 +
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 +
 
 +
:'''no selection text'''
 +
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the text "select..." will appear in the dropdown before an option is selected.
 +
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom message to be shown in the dropdown instead.
 +
|}
 +
 
 +
====[[File:gbam_Email.png|40px|link=]] email====
 +
::The '''email''' widget allows the app user to enter an email address, which is subsequently saved to a designated column on [[ginstr web]].
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''email''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears in the '''email''' widget.
 +
|}
 +
 
 +
====[[File:gbam_Fax.png|40px|link=]] fax====
 +
::The '''fax''' widget allows the app user to enter an email address, which is subsequently saved to a designated column on [[ginstr web]].
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''fax''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears in the '''fax''' widget.
 +
|}
 +
 
 +
====[[File:gbam_auditUser.png|40px|link=]] ginstr username (hidden)====
 +
::If this widget is added, the device's current user name is recorded and saved to a designated column on [[ginstr web]].
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''ginstr username (hidden)''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''database column headline'''
 +
:defines the column header for the column which is to hold the '''user''' values in [[ginstr web]].
 +
|}
 +
 
 +
====[[File:gbam_GPS_Hidden.png|40px|link=]] GPS (hidden)====
 +
::If this widget is added (provided GPS has been enabled on the device), the device's current GPS co-ordinates are recorded and saved to a designated column on [[ginstr web]].
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''get GPS''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''database column headline'''
 +
:defines the column header for the column which is to hold the '''GPS position''' values in [[ginstr web]].
 +
|}
 +
 
 +
====[[File:gbam_auditAddress.png|40px|link=]] GPS address (read-only)====
 +
::If this widget is added (provided GPS has been enabled on the device), the current address of the device is displayed on screen and subsequently saved to a designated column on [[ginstr web]].
 +
 
 +
::The address which is displayed/saved is approximate based on the current GPS co-ordinates of the device.
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''GPS address (read-only)''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears above the address field.
 +
'''hint'''
 +
:defines the text which appears in the address field if GPS is disabled on the device or otherwise unavailable.
 +
|}
 +
 
 +
====[[File:gbam_GPS_R_O.png|40px|link=]] GPS address (read-only)====
 +
::If this widget is added (provided GPS has been enabled on the device), the device's current GPS co-ordinates are shown on screen and saved to a designated column on [[ginstr web]].
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''GPS address (read-only)''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''database column headline'''
 +
:defines the column header for the column which is to hold the '''GPS position''' values in [[ginstr web]].
 +
|}
 +
 
 +
====[[File:gbam_Horizontal_Line.png|40px|link=]] horizontal line====
 +
::A horizontal divider can be added to the app screen.
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''horizontal line''': [[#properties|properties]]
 +
|-
 +
| This divider is a graphical element associated with the app theme and has no editable properties when selected.
 +
|}
 +
 
 +
====[[File:gbam_Auto_Increment.png|40px|link=]] increment number (hidden)====
 +
::The '''increment number (hidden)''' widget
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''increment''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears in the '''increment''' widget.
 +
|}
 +
 
 +
====[[File:gbam_Number.png|40px|link=]] integer number====
 +
::This is a labelled number entry field which allows an integer (whole number) to be recorded in a table column.
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''integer number''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
Line 341: Line 593:
  
 
[[File:checkbox0.png|link=]] '''required'''
 
[[File:checkbox0.png|link=]] '''required'''
:Checking this checkbox makes this a '''required''' input field (i.e. it will be mandatory to provide input in this field before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate the field is mandatory.  
+
:Checking this checkbox makes this a '''required''' input field (i.e. it will be mandatory to provide input in this field before submitting the form. When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate the field is mandatory.  
 
::'''error message'''
 
::'''error message'''
 
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
Line 347: Line 599:
  
 
[[File:checkbox0.png|link=]] '''is unique'''
 
[[File:checkbox0.png|link=]] '''is unique'''
:Checking this checkbox allows the user to ensure that input from this field is required to be unique.
+
:Checking this checkbox allows the user to ensure that the input from this field is required to be unique.
  
 
<u>database</u>
 
<u>database</u>
Line 353: Line 605:
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
:This checkbox should be checked if the input from this field is part of the database table.
 
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''default number label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''integer number''' widget which is added to the app).
 
|}
 
|}
  
====address read only====
+
====[[File:gbam_numberIntegerReadOnly.png|40px|link=]] integer number (read-only)====
:If this widget is added (provided GPS has been enabled on the device), the current address of the device is displayed on screen and subsequently saved to a designated column on [[ginstr web]].
+
::This widget is used to load an integer number value from [[ginstr web]] and display it on the app screen.
  
:The address which is displayed/saved is approximate based on the current GPS co-ordinates of the device.
+
::The '''integer number (read-only)''' value can not be edited in the ginstr app on the device.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''address read only''' widget options in [[#properties|properties panel]]
+
! '''integer number (read-only)''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears as the heading.
 +
'''alignment'''
 +
:this dropdown offers the choice between two options:
 +
::;vertical:displays the '''label''' above the '''integer number (read-only)''' value on a separate line.
 +
::;horizontal:displays the '''label''' to the left of the '''integer number (read-only)''' value on the same line.
 +
 
 +
<u>database</u>
 +
 
 +
[[File:checkbox1.png|link=]] '''is part of database'''
 +
:If this checkbox is checked, the '''integer number (read-only)''' value shown in the widget will be stored as part of the database table record in [[ginstr web]] as <code>[[Datatypes#text|text]]</code> [[Datatypes|datatype]].
 +
::(This checkbox is checked by default for each new '''integer number (read-only)''' widget which is added to the app).
 +
|}
 +
 
 +
====[[File:gbam_Load.png|40px|link=]] load number of records (hidden)====
 +
::The '''load number of records (hidden)''' widget
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''load number of records (hidden)''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears in the '''load''' widget.
 +
|}
 +
 
 +
====[[File:gbam_auditLoadRecordColumnValue.png|40px|link=]] load value from table (hidden)====
 +
::The '''load value from table (hidden)''' widget
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''load value''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears in the '''load value from table (hidden)''' widget.
 +
|}
 +
 
 +
====[[File:gbam_Male_Female.png|40px|link=]] male / female====
 +
::The '''male / female''' widget
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''male / female''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears in the '''male / female''' widget.
 +
|}
 +
 
 +
====[[File:gbam_NFC.png|40px|link=]] NFC====
 +
::The '''NFC''' widget
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''NFC''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears in the '''NFC''' widget.
 +
|}
 +
 
 +
====[[File:gbam_NFC_R_O.png|40px|link=]] NFC (read-only)====
 +
::The '''NFC (read-only)''' widget
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''NFC (read-only)''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears in the '''NFC (read-only)''' widget.
 +
|}
 +
 
 +
====[[File:gbam_nfcImageQuery.png|40px|link=]] NFC (with image)====
 +
::The '''NFC (with image)''' widget
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''NFC (with image)''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears in the '''NFC (with image)''' widget.
 +
|}
 +
 
 +
====[[File:gbam_Note.png|40px|link=]] note (read-only)====
 +
::The '''note''' widget
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''note''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears above the address field.
+
:defines the text which appears in the '''note''' widget.
'''hint'''
 
:defines the text which appears in the address field if GPS is disabled on the device or otherwise unavailable.
 
 
|}
 
|}
  
====date readonly====
+
====[[File:gbam_Telephone.png|40px|link=]] phone no.====
:This widget displays the current date on screen and is not editable by the user. The date value is subsequently saved in a table column.
+
::The '''phone no.''' widget
  
:This widget is commonly used in conjunction with [[#signature_label|signature label]] widget in order to display and save the date on which the signature is recorded.
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''phone no.''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears in the '''phone no.''' widget.
 +
|}
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
====[[File:gbam_Telephone_Serial_Number_Hidden.png|40px|link=]] phone serial no. (hidden)====
! '''date readonly''' widget options in [[#properties|properties panel]]
+
::If this widget is added, the serial number of the device being used to create a record is saved to a designated column on [[ginstr web]].
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''phone serial no. (hidden)''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''database column headline'''
 +
:defines the column header for the column which is to hold the '''phone serial no. (hidden)''' values in [[ginstr web]].
 +
|}
 +
 
 +
====[[File:gbam_Photo.png|40px|link=]] photo====
 +
::This widget allows a number of photos to be taken and subsequently saved to a designated column on [[ginstr web]] as part of the record.
 +
::After a photo is taken, a preview thumbnail is displayed and a counter displays the number of photos captured.
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''photo''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears above the date displayed.
+
:defines the text which appears at the top of the '''photo''' widget on the app screen.
 +
 
 +
'''max photos'''
 +
:defines the maximum number of photos that the app user is able to submit with the form.
 +
 
 +
<u>validations</u>
 +
 
 +
[[File:checkbox0.png|link=]] '''required'''
 +
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to provide a photograph before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate the field is mandatory.
 +
::'''error message'''
 +
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
 
<u>database</u>
 
<u>database</u>
  
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
:This checkbox should be checked if date value shown in the widget is part of the database table.
+
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''date readonly''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''photo''' widget which is added to the app).
 
|}
 
|}
  
====date editable====
+
====[[File:gbam_Photo_R_O.png|40px|link=]] photo (read-only)====
:This is a widget which allows the app user to select a date which is subsequently saved in a table column.
+
::This widget displays a photo retrieved from a record saved in a [[ginstr web]] table.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::The photo is not editable by the app user.
! '''date editable''' widget options in [[#properties|properties panel]]
+
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''photo (read-only)''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears above the date displayed.
+
:defines the text which appears at the top of the '''photo (read-only)''' widget on the app screen.
 +
 
 +
'''max photos'''
 +
:defines the maximum number of photos that the app user is able to submit with the form.
 +
 
 +
<u>validations</u>
 +
 
 +
[[File:checkbox0.png|link=]] '''required'''
 +
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to provide a photograph before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate the field is mandatory.
 +
::'''error message'''
 +
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
 
<u>database</u>
 
<u>database</u>
  
::[[File:checkbox1.png|link=]] '''is part of database'''
+
[[File:checkbox1.png|link=]] '''is part of database'''
 
:This checkbox should be checked if the input from this field is part of the database table.
 
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''date label (editable)''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''photo (read-only)''' widget which is added to the app).
 
|}
 
|}
  
====save (button)====
+
====[[File:gbam_QR_Code.png|40px|link=]] QR code====
:This is a button which, when pressed, saves the form's contents to [[ginstr web]].
+
::This widget allows a QR code to be scanned by the app user.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''save (button)''' widget options in [[#properties|properties panel]]
+
! '''QR code''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appear inside the save button on the app screen.
+
:defines the text which appears at the top of the '''QR code''' widget on the app screen.
  
<u>actions</u>
+
<u>validations</u>
  
'''messages'''
+
[[File:checkbox0.png|link=]] '''required'''
:'''on no rights'''
+
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to scan a QR code before submitting the form).
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, a default error message will be shown to a [[SSO_common_content#subaccounts|subaccount]] user without appropriate [[SSO_common_content#roles|<code>create</code> permissions]].
+
::'''error message in case of input error'''
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
+
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
:'''on save'''
+
<u>database</u>
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, a default message will be shown to confirm that the data has been successfully saved.
 
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 
  
:'''on all fields required'''
+
[[File:checkbox1.png|link=]] '''is part of database'''
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, a default error message will be shown if the screen contains '''required''' fields which have not been filled when the save button is pressed.
+
:This checkbox should be checked if the input from this field is part of the database table.
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
+
::(This checkbox is checked by default for each new '''QR code''' widget which is added to the app).
 
|}
 
|}
  
====reset (button)====
+
====[[File:gbam_QR_Code_R_O.png|40px|link=]] QR code (read-only)====
:This is a button which, when pressed, resets or clears the contents of the form.
+
::This widget displays a barcode retrieved from a record saved in [[ginstr web]].
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''reset (button)''' widget options in [[#properties|properties panel]]
+
! '''QR code (read-only)''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears inside the reset button on the app screen.
+
:defines the text which appears at the top of the '''QR code''' widget on the app screen.
 +
 
 +
<u>validations</u>
 +
 
 +
[[File:checkbox0.png|link=]] '''required'''
 +
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to scan a QR code before submitting the form).
 +
::'''error message in case of input error'''
 +
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
<u>actions</u>
+
<u>database</u>
  
'''widgets to clean'''
+
[[File:checkbox1.png|link=]] '''is part of database'''
:defines which of the widgets currently on screen should be reset to default when the reset button is pressed.
+
:This checkbox should be checked if the input from this field is part of the database table.
:All visible widgets are selected by default. Multiple widgets can be selected by holding the <code>Ctrl</code> key and clicking on their names individually.
+
::(This checkbox is checked by default for each new '''QR code (read-only)''' widget which is added to the app).
:Only the widgets selected in the '''widgets to clean''' list below this checkbox wbe cleared by this reset buttonssed.
 
 
|}
 
|}
  
====query title====
+
====[[File:gbam_Query.png|40px|link=]] query====
:This widget can load information into the form from the app's [[ginstr web]] table based on an identifying piece of information such as an ID number assigned to an existing record in the app's [[ginstr web]] table.
+
::This widget can load information into the form from the app's [[ginstr web]] table based on an identifying piece of information such as an ID number assigned to an existing record in the app's [[ginstr web]] table.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''query title''' widget options in [[#properties|properties panel]]
+
! '''query''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
Line 476: Line 864:
  
 
[[File:checkbox0.png|link=]] '''is unique'''
 
[[File:checkbox0.png|link=]] '''is unique'''
:This checkbox allows the user to ensure that input from this field is required to be unique.
+
:This checkbox allows the user to ensure that the input from this field is required to be unique.
  
 
'''min length'''
 
'''min length'''
Line 518: Line 906:
 
|}
 
|}
  
====(divider)====
+
====[[File:gbam_Questionnaire.png|40px|link=]] questionnaire====
:A horizontal divider can be added to the app screen.
+
::The '''questionnaire''' widget
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''(divider)''' widget options in [[#properties|properties panel]]
+
! '''questionnaire''': [[#properties|properties]]
 
|-
 
|-
| This divider is a graphical element associated with the app theme and has no editable properties when selected.
+
| <u>general settings</u>
|}
+
'''label'''
 +
:defines the text which appears above the text entry field of this widget.
  
====signature label====
+
'''hint'''
:This is a widget which allows the form to record a signature and subsequently displays a preview thumbnail of the signature.
+
:defines the text which is displayed within the text entry field until its contents are edited by the user.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 
! '''signature label''' widget options in [[#properties|properties panel]]
 
|-
 
| <u>general settings</u>
 
 
'''button label'''
 
'''button label'''
:defines the text which appears inside the button on the app screen.
+
:defines the text which appears inside the '''load''' button on the app screen.
  
 
<u>validations</u>
 
<u>validations</u>
  
 
[[File:checkbox0.png|link=]] '''required'''
 
[[File:checkbox0.png|link=]] '''required'''
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to provide a signature in this field before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''button label''' text to indicate that signature entry is mandatory.  
+
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to provide input in this field before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate the field is mandatory.
 +
::'''error message'''
 +
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 +
 
 +
[[File:checkbox0.png|link=]] '''is unique'''
 +
:This checkbox allows the user to ensure that the input from this field is required to be unique.
 +
 
 +
'''min length'''
 +
:defines the minimum number of characters which can be accepted as a search string.
 +
:If <code>0</code> is entered here the default minimum of 1 character will apply.
 +
::'''error message'''
 +
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "the text you have entered is too short (<code>min length</code> char min)" (where <code>min length</code> is the '''min length''' defined in the field above) will be shown if the search string entered by the app user has fewer characters than the defined '''min length'''.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 +
 
 +
'''max length'''
 +
:defines the maximum number of characters which can be accepted as a search string.
 +
:If <code>0</code> is entered here there will be no limit on the maximum number of characters.
 
::'''error message'''
 
::'''error message'''
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''button label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
+
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "the text you have entered is too long (<code>max length</code> char max)" (where <code>max length</code> is the '''max length''' defined in the field above) will be shown if the search string entered by the app user has more characters than the defined '''max length'''.
 
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
Line 549: Line 951:
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
:This checkbox should be checked if the input from this field is part of the database table.
 
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''signature label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''query title''' widget which is added to the app).
 +
 
 +
<u>actions</u>
 +
 
 +
'''widgets to load'''
 +
:defines which of the widgets currently on screen should load data from the '''ginstr web''' app table when the query button is pressed.
 +
:All visible widgets are selected by default. Multiple widgets can be selected by holding the <code>Ctrl</code> key and clicking on their names individually.
 +
:Only the widgets selected in the list below this checkbox will be cleared by this reset button.
 +
 
 +
::'''sort by'''
 +
:::The loaded information can be sorted by widget by selecting a widget name from the '''sort by''' dropdown.
 +
 
 +
'''messages'''
 +
:'''on no rights'''
 +
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, a default error message will be shown to a [[SSO_common_content#subaccounts|subaccount]] user without appropriate [[SSO_common_content#roles|<code>read</code> permissions]].
 +
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 +
 
 +
:'''on no result'''
 +
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "no record found" will be shown when no records are found in the app table matching the query entered.
 +
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 
|}
 
|}
  
====media photo label====
+
====[[File:gbam_Radio_Button.png|40px|link=]] radio group (2 options)====
:This widget allows a number of photos to be taken and subsequently saved to a designated column on [[ginstr web]] as part of the record.
+
::This widget adds a group of 2 radio buttons.
:After a photo is taken, a preview thumbnail is displayed and a counter displays the number of photos captured.
 
  
 
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''media photo label''' widget options in [[#properties|properties panel]]
+
! '''radio group (2 options)''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears at the top of the '''media photo label''' widget on the app screen.
+
:defines the text which appears above the radio button group.
 
 
'''max photos'''
 
:defines the maximum number of photos that the app user is able to submit with the form.
 
  
 
<u>validations</u>
 
<u>validations</u>
  
 
[[File:checkbox0.png|link=]] '''required'''
 
[[File:checkbox0.png|link=]] '''required'''
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to provide a photograph before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate the field is mandatory.  
+
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to select a value from the radio button group before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate that selecting an option is mandatory.  
 
::'''error message'''
 
::'''error message'''
 
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
Line 578: Line 995:
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
:This checkbox should be checked if the input from this field is part of the database table.
 
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''media photo label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''radio group (2 options)''' widget which is added to the app).
 +
 
 +
<u>actions</u>
 +
 
 +
'''radio button options'''
 +
:defines the individual options which the user will be able to select from the radio button group.
 +
:To add an option, enter the desired text in the lower input field and click the <div style="display:inline-block;width:40px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">add</span></div> button. The text option will now appear in the list above the input field.
 +
:To delete an existing option, select it from the list and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">delete</span></div> button to delete it.
 +
:To change an existing option, select it from the list, edit the text in the lower input field and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">update</span></div> button.
 
|}
 
|}
  
====media audio label====
+
====[[File:gbam_Radio_Button_3_Options.png|40px|link=]] radio group (3 options)====
:This widget allows an audio recording to be made and subsequently saved to a designated column on [[ginstr web]] as part of the record.
+
::This widget adds a group of 3 radio buttons.
:After an audio recording is made, a counter displays the number of recordings captured.
 
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''media audio label''' widget options in [[#properties|properties panel]]
+
! '''radio group (3 options)''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears at the top of the '''media audio label''' widget on the app screen.
+
:defines the text which appears above the radio button group.
  
 
<u>validations</u>
 
<u>validations</u>
  
 
[[File:checkbox0.png|link=]] '''required'''
 
[[File:checkbox0.png|link=]] '''required'''
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to provide an audio recording before submitting the form).
+
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to select a value from the radio button group before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate that selecting an option is mandatory.  
 
::'''error message'''
 
::'''error message'''
 
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
Line 604: Line 1,028:
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
:This checkbox should be checked if the input from this field is part of the database table.
 
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''media audio label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''radio group (3 options)''' widget which is added to the app).
 +
 
 +
<u>actions</u>
 +
 
 +
'''radio button options'''
 +
:defines the individual options which the user will be able to select from the radio button group.
 +
:To add an option, enter the desired text in the lower input field and click the <div style="display:inline-block;width:40px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">add</span></div> button. The text option will now appear in the list above the input field.
 +
:To delete an existing option, select it from the list and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">delete</span></div> button to delete it.
 +
:To change an existing option, select it from the list, edit the text in the lower input field and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">update</span></div> button.
 
|}
 
|}
  
====media video label====
+
====[[File:gbam_Save.png|40px|link=]] save====
:This widget allows a video recording to be made and subsequently saved to a designated column on [[ginstr web]] as part of the record.
+
::This is a button which, when pressed, saves the form's contents to [[ginstr web]].
:After a video recording is made, a counter displays the number of recordings captured.
+
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''save''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''button label'''
 +
:defines the text which appear inside the save button on the app screen.
 +
 
 +
<u>actions</u>
 +
 
 +
'''widgets to save'''
 +
:defines which of the widgets currently on screen should save data to the '''ginstr web''' app table when the save button is pressed.
 +
:All visible widgets are selected by default. Multiple widgets can be selected by holding the <code>Ctrl</code> key and clicking on their names individually.
 +
 
 +
'''clean all widgets on save'''
 +
:defines which of the widgets currently on screen should be cleared when the save button is pressed.
 +
:All visible widgets are selected by default. Multiple widgets can be selected by holding the <code>Ctrl</code> key and clicking on their names individually.
 +
:Only the widgets selected in the list below this checkbox will be cleared upon successful save.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
'''messages'''
! '''media video label''' widget options in [[#properties|properties panel]]
+
:'''on no rights'''
 +
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, a default error message will be shown to a [[SSO_common_content#subaccounts|subaccount]] user without appropriate [[SSO_common_content#roles|<code>create</code> permissions]].
 +
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 +
 
 +
:'''on save'''
 +
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, a default message will be shown to confirm that the data has been successfully saved.
 +
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 +
 
 +
:'''on all fields required'''
 +
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, a default error message will be shown if the screen contains '''required''' fields which have not been filled when the save button is pressed.
 +
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 +
 
 +
:'''on not unique'''
 +
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, a default error message will be shown if the screen contains '''required''' fields which have not been filled when the save button is pressed.
 +
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 +
|}
 +
 
 +
 
 +
====[[File:gbam_Screen_Title.png|40px|link=]] screen title level-1====
 +
::This widget adds title text in large font to be used as a screen title or heading.
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''screen title level-1''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears in the '''screen title''' widget.
 +
|}
 +
 
 +
====[[File:gbam_Screen_Title.png|40px|link=]] screen title level-2====
 +
::This widget adds title text in small font to be used as a screen title or heading.
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''screen title level-2''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears in the '''screen title''' widget.
 +
|}
 +
 
 +
====[[File:gbam_Screen_Title_Settings.png|40px|link=]] screen title with settings====
 +
::This widget contains large-font title text and a settings button.
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''screen title with settings''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''label'''
 +
:defines the text which appears in the '''screen title with settings''' widget.
 +
|}
 +
 
 +
====[[File:gbam_Screen_Title_LogOut.png|40px|link=]] screen title with settings and logout====
 +
::This widget contains large-font title text, a settings button and a logout button.
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''screen title with settings and logout''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears at the top of the '''media video label''' widget on the app screen.
+
:defines the text which appears in the '''screen title with settings and logout''' widget.
 +
|}
 +
 
 +
====[[File:gbam_Signature.png|40px|link=]] signature====
 +
::This is a widget which allows the form to record a signature and subsequently displays a preview thumbnail of the signature.
 +
 
 +
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 +
! '''signature''': [[#properties|properties]]
 +
|-
 +
| <u>general settings</u>
 +
'''button label'''
 +
:defines the text which appears inside the button on the app screen.
  
 
<u>validations</u>
 
<u>validations</u>
  
 
[[File:checkbox0.png|link=]] '''required'''
 
[[File:checkbox0.png|link=]] '''required'''
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to provide a video recording before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate the field is mandatory.  
+
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to provide a signature in this field before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''button label''' text to indicate that signature entry is mandatory.  
 
::'''error message'''
 
::'''error message'''
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
+
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''button label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
Line 630: Line 1,145:
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
:This checkbox should be checked if the input from this field is part of the database table.
 
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''media video label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''signature''' widget which is added to the app).
 
|}
 
|}
  
====text dropdown label====
+
====[[File:gbam_Text_Dropdown.png|40px|link=]] text dropdown====
:This widget is a dropdown list of text options.
+
::This widget is a dropdown list of text options.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''text dropdown label''' widget options in [[#properties|properties panel]]
+
! '''text dropdown''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
Line 655: Line 1,170:
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
:This checkbox should be checked if the input from this field is part of the database table.
 
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''text dropdown label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''text dropdown''' widget which is added to the app).
  
 
<u>actions</u>
 
<u>actions</u>
Line 675: Line 1,190:
 
|}
 
|}
  
====number dropdown label====
+
====[[File:gbam_dropdownAutoCompleteText.png|40px|link=]] text dropdown autocomplete====
:This is a dropdown list of numerical values.
+
::This widget is a dropdown list of text options with autocomplete function.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''number dropdown label''' widget options in [[#properties|properties panel]]
+
! '''text dropdown autocomplete''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
Line 688: Line 1,203:
  
 
[[File:checkbox0.png|link=]] '''required'''
 
[[File:checkbox0.png|link=]] '''required'''
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to select a value from the dropdown before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate an option from the dropdown is mandatory.  
+
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to select a value from the dropdown before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate that selecting an option from the dropdown is mandatory.  
 
::'''error message'''
 
::'''error message'''
 
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
Line 697: Line 1,212:
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
:This checkbox should be checked if the input from this field is part of the database table.
 
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''number dropdown label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''text dropdown autocomplete''' widget which is added to the app).
  
 
<u>actions</u>
 
<u>actions</u>
  
 
'''dropdown menu options'''
 
'''dropdown menu options'''
:defines the individual number options which the user will be able to select from the dropdown.
+
:defines the individual text options which the user will be able to select from the dropdown.
:To add an option, enter the desired number in the lower input field and click the <div style="display:inline-block;width:40px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">add</span></div> button. The number option will now appear in the list above the input field.
+
:To add an option, enter the desired text in the lower input field and click the <div style="display:inline-block;width:40px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">add</span></div> button. The text option will now appear in the list above the input field.
 
:To delete an existing option, select it from the list and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">delete</span></div> button to delete it.
 
:To delete an existing option, select it from the list and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">delete</span></div> button to delete it.
:To change an existing option, select it from the list, edit the number in the lower input field and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">update</span></div> button.
+
:To change an existing option, select it from the list, edit the text in the lower input field and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">update</span></div> button.
  
 
'''messages'''
 
'''messages'''
Line 717: Line 1,232:
 
|}
 
|}
  
====check box label====
+
====[[File:gbam_Text_Dropdown_Dependent.png|40px|link=]] text dropdown dependent====
:Checkboxes can be added to the app as widgets. The responses are saved to a column on [[ginstr web]] as either true ([[File:true_status_icon.png|link=]]) or false ([[File:false_status_icon.png|link=]]) status.
+
::This widget is a dropdown list of text options, dependent upon
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''check box label''' widget options in [[#properties|properties panel]]
+
! '''text dropdown dependent''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears next to the checkbox
+
:defines the text which appears above the dropdown.
 +
 
 +
<u>validations</u>
 +
 
 +
[[File:checkbox0.png|link=]] '''required'''
 +
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to select a value from the dropdown before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate that selecting an option from the dropdown is mandatory.
 +
::'''error message'''
 +
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
 
<u>database</u>
 
<u>database</u>
Line 731: Line 1,254:
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
:This checkbox should be checked if the input from this field is part of the database table.
 
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''check box label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''text dropdown dependent''' widget which is added to the app).
|}
+
 
 +
<u>actions</u>
 +
 
 +
'''dropdown menu options'''
 +
:defines the individual text options which the user will be able to select from the dropdown.
 +
:To add an option, enter the desired text in the lower input field and click the <div style="display:inline-block;width:40px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">add</span></div> button. The text option will now appear in the list above the input field.
 +
:To delete an existing option, select it from the list and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">delete</span></div> button to delete it.
 +
:To change an existing option, select it from the list, edit the text in the lower input field and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">update</span></div> button.
  
====heading one label====
+
'''messages'''
:This is a widget for headings on the app screen.
+
:'''no data'''
 +
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, a default error message will be shown when an app user attempts to submit the form without selecting an option from the dropdown.
 +
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
:'''no selection text'''
! '''heading one label''' widget options in [[#properties|properties panel]]
+
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the text "select..." will appear in the dropdown before an option is selected.
|-
+
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom message to be shown in the dropdown instead.
| <u>general settings</u>
 
'''label'''
 
:defines the text which appears as the heading.
 
 
|}
 
|}
  
====radio button group label====
+
====[[File:gbam_Text_Dropdown_Database.png|40px|link=]] text dropdown from database====
:This widget allows groups of radio buttons to be included in a form.
+
::This widget is a dropdown list of text options retrieved from the database.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''radio button group label''' widget options in [[#properties|properties panel]]
+
! '''text dropdown from database''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears above the radio button group.
+
:defines the text which appears above the dropdown.
  
 
<u>validations</u>
 
<u>validations</u>
  
 
[[File:checkbox0.png|link=]] '''required'''
 
[[File:checkbox0.png|link=]] '''required'''
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to select a value from the radio button group before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate that selecting an option is mandatory.  
+
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to select a value from the dropdown before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate that selecting an option from the dropdown is mandatory.  
 
::'''error message'''
 
::'''error message'''
 
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
Line 767: Line 1,296:
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
:This checkbox should be checked if the input from this field is part of the database table.
 
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''radio button group label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''text dropdown database''' widget which is added to the app).
  
 
<u>actions</u>
 
<u>actions</u>
  
'''radio button options'''
+
'''dropdown menu options'''
:defines the individual options which the user will be able to select from the radio button group.
+
:defines the individual text options which the user will be able to select from the dropdown.
 
:To add an option, enter the desired text in the lower input field and click the <div style="display:inline-block;width:40px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">add</span></div> button. The text option will now appear in the list above the input field.
 
:To add an option, enter the desired text in the lower input field and click the <div style="display:inline-block;width:40px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">add</span></div> button. The text option will now appear in the list above the input field.
 
:To delete an existing option, select it from the list and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">delete</span></div> button to delete it.
 
:To delete an existing option, select it from the list and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">delete</span></div> button to delete it.
 
:To change an existing option, select it from the list, edit the text in the lower input field and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">update</span></div> button.
 
:To change an existing option, select it from the list, edit the text in the lower input field and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">update</span></div> button.
 +
 +
'''messages'''
 +
:'''no data'''
 +
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, a default error message will be shown when an app user attempts to submit the form without selecting an option from the dropdown.
 +
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 +
 +
:'''no selection text'''
 +
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the text "select..." will appear in the dropdown before an option is selected.
 +
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom message to be shown in the dropdown instead.
 
|}
 
|}
  
====text read only label====
+
====[[File:gbam_Text_Dropdown_Multiselect_Database.png|40px|link=]] text dropdown multi-select from database====
:This widget is used to load text data from [[ginstr web]] and display it on the app screen.
+
::This widget is a dropdown list of text options.
 
 
:The '''read only text''' value can not be edited in the ginstr app on the device.
 
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''text read only label''' widget options in [[#properties|properties panel]]
+
! '''text dropdown multi-select from database''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears as the heading.
+
:defines the text which appears above the dropdown.
'''alignment'''
+
 
:this dropdown offers the choice between two options:
+
<u>validations</u>
::;vertical:displays the '''label''' above the '''read only text''' value on a separate line.
+
 
::;horizontal:displays the '''label''' to the left of the '''read only text''' value on the same line.
+
[[File:checkbox0.png|link=]] '''required'''
 +
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to select a value from the dropdown before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate that selecting an option from the dropdown is mandatory.
 +
::'''error message'''
 +
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
 
<u>database</u>
 
<u>database</u>
  
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
:If this checkbox is checked, the '''read only text''' value shown in the widget will be stored as part of the database table record in [[ginstr web]] as <code>[[Datatypes#text|text]]</code> [[Datatypes|datatype]].
+
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''text read only label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''text dropdown multiselect database''' widget which is added to the app).
 +
 
 +
<u>actions</u>
 +
 
 +
'''dropdown menu options'''
 +
:defines the individual text options which the user will be able to select from the dropdown.
 +
:To add an option, enter the desired text in the lower input field and click the <div style="display:inline-block;width:40px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">add</span></div> button. The text option will now appear in the list above the input field.
 +
:To delete an existing option, select it from the list and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">delete</span></div> button to delete it.
 +
:To change an existing option, select it from the list, edit the text in the lower input field and click the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white">update</span></div> button.
 +
 
 +
'''messages'''
 +
:'''no data'''
 +
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, a default error message will be shown when an app user attempts to submit the form without selecting an option from the dropdown.
 +
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
 +
 
 +
:'''no selection text'''
 +
::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the text "select..." will appear in the dropdown before an option is selected.
 +
::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom message to be shown in the dropdown instead.
 
|}
 
|}
  
====text read only multiline label====
+
====[[File:gbam_Text_Multiline_R_O.png|40px|link=]] text multi-line (read-only)====
:This widget is used to load multi-line text data from [[ginstr web]] and display it on the app screen.
+
::This widget is used to load multi-line text data from [[ginstr web]] and display it on the app screen.
  
:The '''read only text''' value can not be edited in the ginstr app on the device.
+
::The '''read only text''' value can not be edited in the ginstr app on the device.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''text read only multiline label''' widget options in [[#properties|properties panel]]
+
! '''text multiline (read-only)''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
Line 817: Line 1,374:
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
:If this checkbox is checked, the '''read only text''' value shown in the widget will be stored as part of the database table record in [[ginstr web]] as <code>[[Datatypes#text|text]]</code> [[Datatypes|datatype]].
 
:If this checkbox is checked, the '''read only text''' value shown in the widget will be stored as part of the database table record in [[ginstr web]] as <code>[[Datatypes#text|text]]</code> [[Datatypes|datatype]].
::(This checkbox is checked by default for each new '''text read only multiline label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''text multiline (read-only)''' widget which is added to the app).
 
|}
 
|}
  
====decimal read only label====
+
====[[File:gbam_Multiselect.png|40px|link=]] text multiselect====
:This widget is used to load a decimal number value from [[ginstr web]] and display it on the app screen.
+
::The '''multiselect''' widget
  
:The '''decimal read only''' value can not be edited in the ginstr app on the device.
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 
+
! '''multiselect''': [[#properties|properties]]
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 
! '''decimal read only label''' widget options in [[#properties|properties panel]]
 
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears as the heading.
+
:defines the text which appears in the '''multiselect''' widget.
'''alignment'''
 
:this dropdown offers the choice between two options:
 
::;vertical:displays the '''label''' above the '''decimal read only''' value on a separate line.
 
::;horizontal:displays the '''label''' to the left of the '''decimal read only''' value on the same line.
 
 
 
<u>database</u>
 
 
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
:If this checkbox is checked, the '''decimal read only''' value shown in the widget will be stored as part of the database table record in [[ginstr web]] as <code>[[Datatypes#number|number]]</code> [[Datatypes|datatype]].
 
::(This checkbox is checked by default for each new '''decimal read only label''' widget which is added to the app).
 
 
|}
 
|}
  
====integer number read only label====
+
====[[File:gbam_Text_Single_Line_R_O.png|40px|link=]] text single line (read-only)====
:This widget is used to load an integer number value from [[ginstr web]] and display it on the app screen.
+
::This widget is used to load text data from [[ginstr web]] and display it on the app screen.
  
:The '''integer number read only''' value can not be edited in the ginstr app on the device.
+
::The '''read only text''' value can not be edited in the ginstr app on the device.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''integer number read only label''' widget options in [[#properties|properties panel]]
+
! '''text single line (read-only)''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
Line 856: Line 1,401:
 
'''alignment'''
 
'''alignment'''
 
:this dropdown offers the choice between two options:
 
:this dropdown offers the choice between two options:
::;vertical:displays the '''label''' above the '''integer number read only''' value on a separate line.
+
::;vertical:displays the '''label''' above the '''read only text''' value on a separate line.
::;horizontal:displays the '''label''' to the left of the '''integer number read only''' value on the same line.
+
::;horizontal:displays the '''label''' to the left of the '''read only text''' value on the same line.
  
 
<u>database</u>
 
<u>database</u>
  
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
:If this checkbox is checked, the '''integer number read only''' value shown in the widget will be stored as part of the database table record in [[ginstr web]] as <code>[[Datatypes#text|text]]</code> [[Datatypes|datatype]].
+
:If this checkbox is checked, the '''read only text''' value shown in the widget will be stored as part of the database table record in [[ginstr web]] as <code>[[Datatypes#text|text]]</code> [[Datatypes|datatype]].
::(This checkbox is checked by default for each new '''integer number read only label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''text single line (read-only)''' widget which is added to the app).
 
|}
 
|}
  
====check box read only label====
+
====[[File:gbam_Video_Input.png|40px|link=]] video====
:This widget is used to show a text label next to a checkbox which retrieves its '''status''' value (checked or unchecked) from a record saved in [[ginstr web]].
+
::This widget allows a video recording to be made and subsequently saved to a designated column on [[ginstr web]] as part of the record.
 +
::After a video recording is made, a counter displays the number of recordings captured.
  
:The '''status''' value (checked or unchecked) can not be changed in the ginstr app on the device.
+
::{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 
+
! '''video''': [[#properties|properties]]
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 
! '''check box read only label''' widget options in [[#properties|properties panel]]
 
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears next to the checkbox.
+
:defines the text which appears at the top of the '''video''' widget on the app screen.
 +
 
 +
<u>validations</u>
 +
 
 +
[[File:checkbox0.png|link=]] '''required'''
 +
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to provide a video recording before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate the field is mandatory.
 +
::'''error message'''
 +
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
 
<u>database</u>
 
<u>database</u>
  
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
:If this checkbox is checked, the '''status''' value (checked or unchecked) shown in the widget will be stored as part of the database table record in [[ginstr web]] as <code>[[Datatypes#status|status]]</code> [[Datatypes|datatype]].
+
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''check box read only label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''video''' widget which is added to the app).
 
|}
 
|}
  
====date time readonly label====
+
====[[File:gbam_Yes_No.png|40px|link=]] yes / no====
:This widget displays the current date and time on screen and is not editable by the user.
+
::This widget adds a group of 2 radio buttons, labelled '''yes''' and '''no'''.
 
 
:The date value is subsequently saved in a table column (provided the option '''is part of database''' is checked).
 
  
 
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
 
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
! '''date time readonly label''' widget options in [[#properties|properties panel]]
+
! '''yes / no''': [[#properties|properties]]
 
|-
 
|-
 
| <u>general settings</u>
 
| <u>general settings</u>
 
'''label'''
 
'''label'''
:defines the text which appears above the date and time displayed.
+
:defines the text which appears above the radio button group.
 +
 
 +
<u>validations</u>
 +
 
 +
[[File:checkbox0.png|link=]] '''required'''
 +
:This checkbox allows the user to make this a '''required''' input field (i.e. it will be mandatory to select either 'yes' or 'no' before submitting the form). When checked, an asterix (*) is automatically added to the end of the '''label''' to indicate that selecting an option is mandatory.
 +
::'''error message'''
 +
:::[[File:checkbox1.png|link=]] If the '''show default message''' checkbox here is checked, the default error message "entering the <code>label</code> is required" (where <code>label</code> is the '''label''' defined in the <u>general settings</u> section) will be shown when an app user attempts to submit the form without providing an input in this field.
 +
:::[[File:checkbox0.png|link=]] If the '''show default message''' checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
  
 
<u>database</u>
 
<u>database</u>
  
 
[[File:checkbox1.png|link=]] '''is part of database'''
 
[[File:checkbox1.png|link=]] '''is part of database'''
:If this checkbox is checked, the date and time value shown in the widget will be saved as part of the database table.
+
:This checkbox should be checked if the input from this field is part of the database table.
::(This checkbox is checked by default for each new '''date time readonly label''' widget which is added to the app).
+
::(This checkbox is checked by default for each new '''yes / no''' widget which is added to the app).
 +
 
 +
<u>actions</u>
 +
 
 +
'''radio button options'''
 +
:the options '''yes / no''' cannot be modified. If different options are desired, the [[#radio_group_(2_options)|'''radio group (2 options)''' widget]] should be used instead.
 
|}
 
|}
  
[[File:gbam_hidden_widgets.png|thumb|right|350px|8. '''hidden widgets''' panel]]
+
===properties===
===hidden widgets===
+
If any individual widget is selected from the device preview, its properties can be edited in the '''properties''' panel at the top right of the '''ginstr business app maker''' screen.
:Data can be recorded to [[ginstr web]] tables using '''hidden widgets''', which are not visible to the user of the app.
 
  
:'''Hidden widgets''' automatically collect this information and save it as part of a record when the user submits the form.  
+
If no [[#widgets|widget]] has been selected, the name of the app screen is displayed and can be edited in the '''screen name''' field in the '''general settings''' dropdown section.
 +
 
 +
The properties which can be defined for each widget type are described in the [[#widgets|<u>widgets section</u>]] of this page.
 +
 
 +
===Copy / Delete===
 +
[[File:gbam_copy_delete.png|thumb|right|none|75px|Copy / Delete buttons]]
 +
Once a widget is added to the device preview, moving your mouse over the widget will result in two buttons appearing at the top-right corner of the widget.
 +
 
 +
:;copy:
 +
::pressing this button copies the selected widget, resulting in a duplicate of the widget appearing below the selected widget.
 +
::All of the [[#properties|properties]] belonging to the original widget will be reproduced in the duplicate widget, with the word 'copy' appended to the '''label''' text.
 +
 
 +
:;delete:
 +
::pressing this button deletes the selected widget.
 +
::To delete multiple widgets, select them in the device preview using the <code>Ctrl</code> and/or <code>⇧&nbsp;Shift</code> keys, and then click on the <div style="display:inline-block;width:180px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#F75757"><span style="color:black;">delete highlighted widget(s)</span></div> button at the bottom of the [[#widgets|widgets panel]] or press the <code>Delete</code> key on your keyboard.
 +
 
 +
===Undo / Redo===
 +
You can undo or redo any actions in '''ginstr business app maker''' with the following keyboard shortcuts:
 +
 
 +
:*'''Undo''' - <code>Ctrl</code> + <code>Z</code> (can be pressed multiple times to undo multiple actions)
  
:These widgets are not visible on the screen when [[#enable_phone_view|'''phone view''']] is enabled.
+
:*'''Redo''' - <code>Ctrl</code> + <code>Y</code> (can be pressed multiple times to redo multiple actions)
::While [[#enable_phone_view|phone view]] is enabled [[File:checkbox1.png|link=]] any '''hidden widgets''' which are dragged from the widgets panel to the device preview will be added to the app screen but will not be visible in the device preview until [[#enable_phone_view|phone view]] is disabled [[File:checkbox0.png|link=]]
 
  
:Each of the following '''hidden widgets''' records a specific piece of data to a designated column of the table on ginstr web.
+
==theme==
 +
[[File:gbam_theme.png|thumb|right|none|800px|2. Layout of the '''theme''' section]]
 +
This section allows you to choose a theme to style the colour and appearance of the graphical elements of your app.
  
====date and time====
+
In this section, the left sidebar contains thumbnails of screens of your app.
:If this widget is added, the current date and time is recorded and saved to a designated column on [[ginstr web]].
 
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
As with the [[#content|'''content''' section]], the device preview is shown in the centre of the screen.
! '''date and time''' widget options in [[#properties|properties panel]]
+
 
|-
+
The appearance of both the screen thumbnails and the central device preview are updated automatically when a selection is made from the right sidebar, which consists of the following options:
| <u>general settings</u>
+
 
'''database column headline'''
+
:;colour:
:defines the column header for the column which is to hold the '''date and time''' values in [[ginstr web]].
+
::the colour picker here allows you to select any custom colour for graphical elements by using the hue slider in the centre and the dragging the cursor anywhere in the upper shade box.
|}
+
 
 +
::Alternatively, you can enter a HEX colour code on the lower input box.
 +
::Pressing the [[File:gbam_scroll.png|16px|link=]] button next to the input box allows the entry of RGB (Red, Green, Blue) or HSL values (Hue, Saturation, Lightness) instead of a HEX code.
  
====gps position====
+
::;[[File:checkbox1.png|link=]] auto
:If this widget is added (provided GPS has been enabled on the device), the device's current GPS co-ordinates are recorded and saved to a designated column on [[ginstr web]].
+
:::if the auto checkbox is checked, the chosen colour will be applied automatically to text labels, input filed borders and buttons automatically.
 +
:::if the auto checkbox is un-checked, each of the following graphical elements can be selected from the dropdown list, allowing a custom colour to be defined for each element individually
 +
::::*theme colour
 +
::::*text colour
 +
::::*button text colour
 +
::::*hint colour
 +
:::The preview panel shows how the various graphical elements will look with the chosen colour(s) applied.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
:;themes:
! '''gps position''' widget options in [[#properties|properties panel]]
+
::The theme preview tiles here allow you to select between variations for the display of buttons, input fields and dropdown elements.
|-
 
| <u>general settings</u>
 
'''database column headline'''
 
:defines the column header for the column which is to hold the '''GPS position''' values in [[ginstr web]].
 
|}
 
  
====address====
+
::Clicking on one of the '''theme''' preview tiles shown in the window will select it, and a blue border will appear around it.
:If this widget is added (provided GPS has been enabled on the device), the current address of the device is recorded and saved to a designated column on [[ginstr web]].
 
  
:The address saved is approximate based on the current GPS co-ordinates of the device.
+
==background==
 +
[[File:gbam_background.png|thumb|right|none|800px|3. Layout of the '''background''' section]]
 +
This section allows you to choose a solid colour or background image for your app.
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
In this section, the left sidebar contains thumbnails of screens of your app.
! '''address''' widget options in [[#properties|properties panel]]
 
|-
 
| <u>general settings</u>
 
'''database column headline'''
 
:defines the column header for the column which is to hold the '''address''' values in [[ginstr web]].
 
|}
 
  
====phone serial number====
+
As with the previous two sections, the device preview is shown in the centre of the screen.
:If this widget is added, the serial number of the device being used to create a record is saved to a designated column on [[ginstr web]].
 
  
:{| class="wikitable mw-collapsible mw-collapsed" style="width:840px"
+
The appearance of both the screen thumbnails and the central device preview are updated automatically when a selection is made from the right sidebar, which consists of the following options:
! '''phone serial number''' widget options in [[#properties|properties panel]]
+
:;colour:
|-
+
::the colour picker here allows you to select any custom colour for use as a background by using the hue slider in the centre and the dragging the cursor anywhere in the upper shade box.
| <u>general settings</u>
 
'''database column headline'''
 
:defines the column header for the column which is to hold the '''phone serial number''' values in [[ginstr web]].
 
|}
 
  
===complex widgets===
+
::Alternatively, you can enter a HEX colour code on the lower input box.
 +
::Pressing the [[File:gbam_scroll.png|16px|link=]] button next to the input box allows the entry of RGB (Red, Green, Blue) or HSL values (Hue, Saturation, Lightness) instead of a HEX code.
  
[[File:gbam_properties.png|thumb|right|350px|9. '''properties''' panel]]
+
::The default background is plain white (<code>#FFFFFF</code>).
==properties==
 
If any individual widget is selected from the device preview, its properties can be edited in the '''properties''' panel at the top right of the '''ginstr business app maker''' screen.
 
  
If no [[#widgets|widget]] has been selected, the name of the app screen is displayed and can be edited in the '''screen name''' field in the '''general settings''' dropdown section.
+
:;backgrounds:
 +
::The background image preview tiles here allow you to select a background image to be used instead of a solid colour.
  
The properties which can be defined for each widget type are described in the [[#widgets|<u>widgets section</u>]] of this page.
+
::All of the images are shown gray scale in the preview tiles, however the colour which is selected in the colour picker will be applied to the image as a tint
  
==publish app in ginstr launcher==
+
::Clicking on one of the '''background''' image preview tiles shown in the window will select it, and a blue border will appear around it.
[[File:gbam_publish_details.png|thumb|right|350px|10. Window displayed for '''publish details''' selection]]
 
[[File:gbam_app_publishing_success.png|thumb|right|350px|11. Window displayed upon '''app publishing success''']]
 
The <div style="display:inline-block;width:195px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white;">publish app in ginstr launcher</span></div> button allows the user to publish the app to '''[[:Category:ginstr_launcher_manual|ginstr launcher]]'''.
 
  
After pressing the button, the '''publish details''' window (Screenshot 10, shown right) appears with the following fields:
+
::The available '''background''' images can be filtered by brightness & colour by pressing the <div style="display:inline-block;width:80px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:black;">filters</span></div> button at the bottom right-hand corner.
  
;developer:defines the developer name or email for the published app.
+
::Previously applied filter settings can be cleared by pressing the <div style="display:inline-block;width:100px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:black">clear filter</span></div> button.
:By default, this field will contain your ginstr ID
 
  
;timestamp:this field is automatically filled with today's date and is not editable.
+
==app icon==
 +
[[File:gbam_app_icon.png|thumb|right|none|800px|4. Layout of the '''app icon''' section]]
 +
This section allows you to choose a homescreen icon for your app.
  
;app-version:defines the version number for the published app.
+
In this section, the left sidebar contains a preview of the currently selected app icon.
:By default, the '''app-version''' number is <code>2.0</code>.
 
  
;minimum client version:this field is automatically filled with the earliest '''ginstr launcher''' client version compatible with '''ginstr business app maker''' apps and is not editable.
+
Below this is a <div style="display:inline-block;width:130px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#FFCC00"><span style="color:black;">upload your icon</span></div> button which opens a file browser window for you to select an image file from your computer.
  
;release/update comment:this field can be used to record any comments related to the app release and/or improvements & updates.
+
The right sidebar contains an array of pre-designed app icons. These can be filtered by the appropriate industry type by clicking on the checkboxes in the '''filters''' panel in the centre of the screen.
  
Pressing the <div style="display:inline-block;width:80px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#00BFFF"><span style="color:#grey">publish</span></div> button in the '''publish details''' window will publish the app to '''[[:Category:ginstr_launcher_manual|ginstr launcher]]'''.
+
::Previously applied filter settings can be cleared by pressing the <div style="display:inline-block;width:100px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:silver"><span style="color:black">clear filter</span></div> button.
  
A progress bar is shown while the app is published to the [[ginstr cloud]].
+
Each pre-designed icon can also be customised using the <div style="display:inline-block;width:100px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:silver"><span style="color:black;">background</span></div> or <div style="display:inline-block;width:60px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:silver"><span style="color:black;">edit</span></div> buttons at the top of the screen.
  
When the progress bar reaches 100%, you will be shown the '''app publishing success''' window (Screenshot 11, shown right) to confirm that the app has been published successfully.  
+
:<div style="display:inline-block;width:100px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:black;">background</span></div>
 +
::the colour picker here allows you to select any custom colour for use as a background by using the hue slider in the centre and the dragging the cursor anywhere in the upper shade box.
  
Press the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:silver"><span style="color:#grey">ok</span></div> button in the '''app publishing success''' window to return to the main '''ginstr business app maker''' screen.<br>
+
::Alternatively, you can enter a HEX colour code on the lower input box.
 +
::Pressing the [[File:gbam_scroll.png|16px|link=]] button next to the input box allows the entry of RGB (Red, Green, Blue) or HSL values (Hue, Saturation, Lightness) instead of a HEX code.
  
To install the newly published app, log in to '''[[:Category:ginstr_launcher_manual|ginstr launcher]]''' on a device with your ginstr credentials and press the <div style="display:inline-block;width:90px;height:auto;text-align:center;padding:4px 4px;vertical-align:middle;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;background-color:#12B9FF"><span style="color:white;">install</span></div> button next to the name of the newly published app in the list of available applications.
+
:<div style="display:inline-block;width:60px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:black;">edit</span></div>
:The '''app icon''' which subsequently appears in the device homescreen can now be used to launch the application on the device.<br><br>
+
::here you can add custom text to the app icon
 +
:::;text:defines the text to appear overlaid on top of the selected app icon
 +
:::;font:dropdown which allows you to select a font for the custom text
 +
:::;font size:dropdown which allows you to select a font size for the custom text, along with buttons to apply '''B'''old, ''I''talic and <u>U</u>nderline formatting
 +
:::;font colour:colour picker which allows you to select any custom colour for use as a background by using the hue slider in the centre and the dragging the cursor anywhere in the upper shade box.
 +
:::::Alternatively, you can enter a HEX colour code on the lower input box.
 +
:::::Pressing the [[File:gbam_scroll.png|16px|link=]] button next to the input box allows the entry of RGB (Red, Green, Blue) or HSL values (Hue, Saturation, Lightness) instead of a HEX code.
  
Pressing the <div style="display:inline-block;width:80px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:silver"><span style="color:#grey">back</span></div> button in the '''publish details''' window will return the user to the main '''ginstr business app maker''' screen without publishing the app.
+
==login screen graphics==
 +
[[File:gbam_app_login_screen_graphics.png|thumb|right|none|800px|5. Layout of the '''login screen graphics''' section]]
 +
This section allows you to choose an image to be displayed on the login screen of the app.
  
==save for later use==
+
In this section, the left sidebar contains a preview of the login screen.
[[File:gbam_app_saved_success.png|thumb|right|350px|12. Window displayed upon '''app saved success''']]
 
The <div style="display:inline-block;width:120px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white;">save for later use</span></div> button allows the user to save the app in its current state without publishing to ginstr launcher.<br>
 
  
A progress bar is shown while the app is saved to the [[ginstr cloud]].
+
The right sidebar contains an array of pre-designed graphics files.
  
When the progress bar reaches 100%, you will be shown the '''app saved success''' window (Screenshot 12, shown right) to confirm that the app has been saved successfully.
+
These can be filtered by the appropriate picture category by clicking on the checkboxes in the '''filters''' panel in the centre of the screen.
  
Press the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:silver"><span style="color:#grey">ok</span></div> button in the '''app saved success''' window to return to the main '''ginstr business app maker''' screen.<br><br>
+
:Previously applied filter settings can be cleared by pressing the <div style="display:inline-block;width:100px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:silver"><span style="color:black">clear filter</span></div> button.
  
To load or delete saved apps, press the <div style="display:inline-block;width:110px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white;">load from exists</span></div> button to open the '''[[#load from exists|App Manager]]''' window.
+
Clicking one of the graphics files will select it, and a blue border will appear around it. The preview in the left sidebar will be updated with the selected graphics file.
  
==load from exists==
+
:Clicking the <div style="display:inline-block;width:80px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:#grey;font-size:88%;font-weight:bold">cancel</span></div> button in the '''login area image''' window will close the window and no change will be made.
[[File:gbam_App_Manager.png|thumb|right|350px|13. '''App Manager''' window]]
 
The <div style="display:inline-block;width:110px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white;">load from exists</span></div> button allows the user to load a [[#save for later use|previously saved]] app to edit.
 
  
After pressing the button, the '''App Manager''' window (Screenshot 13, shown right) appears with a dropdown list containing all [[#save for later use|previously saved]] or [[#publish app in ginstr launcher|published]] apps.
+
You can also use the <div style="display:inline-block;width:180px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#FFCC00"><span style="color:black;">upload your graphics file</span></div> button at the bottom-right of the screen to select a graphics file from your own computer if desired.
  
:Each app name is shown in the dropdown with the date they were created on.
+
==final preview==
 +
[[File:gbam_app_final_preview.png|thumb|right|none|800px|6. Layout of the '''final preview''' section]]
 +
This section shows a final preview of your app and allows you to save and/or publish the app to '''[[:Category:ginstr_launcher_manual|ginstr launcher]]'''.
  
:If an app has been [[#publish app in ginstr launcher|published]], '''*PUB''' will appear next to the app name in the dropdown.
+
To the right of the central device preview are the following fields:
  
Pressing the <div style="display:inline-block;width:44px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white;">load</span></div> button below the dropdown will load the selected app for editing in the '''ginstr business app maker'''.<br><br>
+
:;project name:this input box defines the name of the current app, which is required when saving or publishing
 +
::The '''project name''' defined here
 +
::*is used to identify the app in the list of applications in '''[[ginstr launcher]]'''
 +
::*is used to identify the app in the list of app tables in '''[[ginstr web]]'''
 +
::*appears on the login screen of the app
 +
::*appears below the '''[[#app_icon|app icon]]''' on the device homescreen
 +
:;select category...:this dropdown is used to define which category the app will be published under.
 +
:;select industry...:this dropdown is used to define which industry the app will be published under.
 +
:;[[File:checkbox0.png|link=]] allow other ginstr users to use your app as a template:if checked, you consent to allow your published app to be used as a template for other users of the '''ginstr business app maker'''.
 +
:<div style="display:inline-block;width:80px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:black;">save</span></div> '''button'''
 +
::this button opens the '''save app''' dialog window and allows you to save the current status of your app without publishing
 +
:<div style="display:inline-block;width:80px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:black;">save as</span></div> '''button'''
 +
::this button opens the '''save app''' dialog window and allows you to save the current status of your app without publishing
 +
:<div style="display:inline-block;width:100px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#FFCC00"><span style="color:black;">publish app</span></div> '''button'''
 +
::this button will publish the app to '''[[:Category:ginstr_launcher_manual|ginstr launcher]]'''. This button is hidden if there are no widgets added to the device preview.
  
Pressing the <div style="display:inline-block;width:58px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white;">cancel</span></div> button below the dropdown will return to the '''ginstr business app maker''' screen without loading an existing app.<br><br>
+
Upon pressing the <div style="display:inline-block;width:100px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#FFCC00"><span style="color:black;">publish app</span></div> button in, a progress bar is shown while the app is published to the [[ginstr cloud]].
  
Pressing the <div style="display:inline-block;width:52px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#F75757"><span style="color:black;">delete</span></div> button below the dropdown will permanently delete the selected app. This cannot be undone.<br>
+
When the progress bar reaches 100%, you will be shown the '''app publishing success''' window to confirm that the app has been published successfully.  
  
==enable phone view  [[File:checkbox0.png|18px|link=]]==
+
Press the <div style="display:inline-block;width:60px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:silver"><span style="color:#grey">ok</span></div> button in the '''app publishing success''' window to return to the main '''ginstr business app maker''' screen.<br>
Enabling '''phone view''' [[File:checkbox1.png|link=]] allows the user to see what the app will look like on a device in its current state.
 
  
This means that all [[#hidden_widgets|'''hidden widgets''']] will no longer be visible in the device preview until '''phone view''' is disabled [[File:checkbox0.png|link=]]
+
To install the newly published app, log in to '''[[:Category:ginstr_launcher_manual|ginstr launcher]]''' on a device with your ginstr credentials and press the <div style="display:inline-block;width:90px;height:auto;text-align:center;padding:4px 4px;vertical-align:middle;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;background-color:#12B9FF"><span style="color:white;">install</span></div> button next to the name of the newly published app in the list of available applications.
:While '''phone view''' is enabled [[File:checkbox1.png|link=]] any [[#hidden_widgets|'''hidden widgets''']] which are dragged from the widgets panel to the device preview will be added to the app screen but will not be visible in the device preview until '''phone view''' is disabled [[File:checkbox0.png|link=]]
+
:The '''app icon''' which subsequently appears in the device homescreen can now be used to launch the application on the device.<br><br>
  
==[[File:delete_icon.png|18px|link=]] delete highlighted widget(s)==
+
Pressing the <div style="display:inline-block;width:80px;height:auto;text-align:center;padding:0px 4px;vertical-align:middle;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:silver"><span style="color:#grey">back</span></div> button in the '''publish details''' window will return the user to the main '''ginstr business app maker''' screen without publishing the app.
If one or more widgets has been selected in the device preview, the selected widget(s) can be deleted using the <div style="display:inline-block;width:200px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#F75757"><span style="color:white;">[[File:trashcan_icon.png|link=]] delete highlighted widget(s)</span></div> button.
 
  
You can also use the <code>Delete</code> key on your keyboard for the same purpose.
+
<!--=my apps=
 +
The <div style="display:inline-block;width:110px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white;">load from exists</span></div> button allows the user to load a previously saved app to edit.
  
Multiple individual widgets can be selected by holding the <code>Ctrl</code> key while clicking on different widgets.  
+
After pressing the button, the '''App Manager''' window (Screenshot 13, shown right) appears with a dropdown list containing all [[#save for later use|previously saved]] or [[#publish app in ginstr launcher|published]] apps.
  
Multiple consecutive widgets can be selected by selecting one widget then holding the <code>⇧&nbsp;Shift</code> key and clicking another widget in the device preview. This will select not only first selected widget and the second clicked widget, but also all widgets positioned between them in the device preview.
+
:Each app name is shown in the dropdown with the date they were created on.
  
All selected widgets will be highlighted against the app background in the device preview.
+
:If an app has been [[#publish app in ginstr launcher|published]], '''*PUB''' will appear next to the app name in the dropdown.
  
=Undo / Redo=
+
Pressing the <div style="display:inline-block;width:44px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white;">load</span></div> button below the dropdown will load the selected app for editing in the '''ginstr business app maker'''.<br><br>
You can undo or redo any actions in '''ginstr business app maker''' with the following keyboard shortcuts:
 
  
:*'''Undo''' - <code>Ctrl</code> + <code>Z</code> (can be pressed multiple times to undo multiple actions)
+
Pressing the <div style="display:inline-block;width:58px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#12B9FF"><span style="color:white;">cancel</span></div> button below the dropdown will return to the '''ginstr business app maker''' screen without loading an existing app.<br><br>
  
:*'''Redo''' - <code>Ctrl</code> + <code>Y</code> (can be pressed multiple times to redo multiple actions)
+
Pressing the <div style="display:inline-block;width:52px;height:26px;text-align:center;vertical-align:middle;padding:0px 4px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#F75757"><span style="color:black;">delete</span></div> button below the dropdown will permanently delete the selected app. This cannot be undone.<br>-->

Revision as of 19:16, 10 January 2018

Contents

gbam icon.png    User Manual
ginstr logo main.png business app maker


Using ginstr business app maker

  1. Sign up for a ginstr SSO account.
  2. Login to the SSO lobby.
  3. Click on the ginstr business app maker icon in the SSO lobby to navigate to the ginstr business app maker page
  4. In the content section, you can Add widgets by dragging them from the widgets panel in to the desired position on the device preview.
  5. Customise each widget by selecting the widget and editing its properties in the properties panel
  6. Individual widgets can be rearranged by dragging them in to the desired order in the device preview.
  7. Individual widgets in the device preview can be copied or deleted using the copy / delete buttons that appear when hovering your mouse over any widget in the device preview.
  8. In the theme section, you can choose a theme to style the colour and appearance of the text, buttons, input fields and dropdown elements.
  9. The background section allows you to choose a background image or colour for all app screens.
  10. Choose a homescreen icon from the range of options available in the app icon section.
  11. The login screen graphics section allows you to choose an appropriate image to be shown on the login screen.
  12. When you are happy with the content and appearance of your app, navigate to the final preview section, where the app can be saved, published or shared.


Accessing ginstr business app maker

ginstr business app maker icon

To access the ginstr business app maker, you must first be logged in to the SSO lobby at https://sso.ginstr.com/

If you do not have a ginstr SSO account, you can click the sign up! link to create one.

When logged in to the SSO lobby, you will be shown a list of available applications with their respective icons asked to choose an application to launch.

Clicking on the ginstr business app maker icon (shown left) will open the ginstr business app maker in a new browser tab.

Landing Screen

The ginstr business app maker Landing Screen

The first screen that is displayed on opening the ginstr business app maker consists of two options:

create your own app
this option allows you to create your own personal app from scratch
modify a template app
this option allows you to use an existing app created by ginstr or by our community

Layout of the ginstr business app maker

The ginstr business app maker consists of a central device preview, which displays a preview of the main app screen, and various buttons and sidebars which allow the user to customize the app.

The ginstr business app maker navigation bar

At the bottom of the device preview in the centre of the page there is a navigation bar which can be used to navigate between the following sections:

The
gbam back.png   back
and
next   gbam next.png
buttons can be used to move to the previous or next section in the sequence. Alternatively, individual sections can be selected by clicking on their title.
Pressing the
gbam back.png   back
button while on the content section will return to the landing screen.
Pressing the
next   gbam next.png
button while on the login screen graphics section will navigate to the final preview section, where the app can be saved, published or shared.

The screen layout and sidebar content will vary depending on which of the above sections of the ginstr business app maker is active.

content

1. Layout of the content section

The content section consists of a central device preview, with a sidebar on the left containing the widgets panel, and a sidebar on the right containing the properties panel.

On this page, you can drag and drop widgets from the widgets panel to the central device preview and arrange them as desired. The properties panel on the right shows options to customise whichever widget is selected in the device preview.

The following options appear at the top of the screen:

  • zoom slider
this can be used to increase (gbam zoom+.png) or decrease (gbam zoom-.png) the size of the device preview as required
  • preview type dropdown
this dropdown box can be used to switch between mockup view (showing a generic device bezel around the device preview), and artboard view (showing a single line border around the device preview).
  • display language dropdown
this dropdown box can be used to select a default language for the app, where en is English & de is German
If the language is changed here, the text resources and widget titles referred to in this manual will change.
This manual is based on the features which appear on the ginstr business app maker when an app is being created or edited in English.
  • project name
this input box defines the name of the current app, which is required when saving or publishing
The project name defined here
  • is used to identify the app in the list of applications in ginstr launcher
  • is used to identify the app in the list of app tables in ginstr web
  • appears on the login screen of the app
  • appears below the app icon on the device homescreen
save
button
this button opens the save app dialog window and allows you to save the current status of your app without publishing
save as
button
this button opens the save app dialog window and allows you to save the current status of your app without publishing
publish app
button
this button opens the final preview screen and allows you to publish your app. This button is hidden if there are no widgets added to the device preview.
  • show hidden widgets checkbox1.png
this checkbox toggles whether or not hidden widgets are visible in the device preview. Hidden widgets automatically record data to ginstr web tables but are not visible to the user of the app.

widgets

The widgets panel contains all available widgets organised into categories. The search bar at the top left can be used to search for a specific widget.

Widgets can be added to the app by selecting them from the widgets panel and dragging them to the device preview screen in the centre of the page.

The order in which these widgets are shown can be rearranged on the screen by dragging and dropping individual widgets above or below each other.

If any individual widget is selected from the device preview, its properties can be edited in the properties panel at the top right of the ginstr business app maker screen.

If one or more widgets has been selected in the device preview, the selected widget(s) can be deleted using the
delete highlighted widget(s)
button.

You can also use the Delete key on your keyboard for the same purpose.

Multiple individual widgets can be selected by holding the Ctrl key while clicking on different widgets.

Multiple consecutive widgets can be selected by selecting one widget then holding the ⇧ Shift key and clicking another widget in the device preview. This will select not only first selected widget and the second clicked widget, but also all widgets positioned between them in the device preview.

All selected widgets will be highlighted against the app background in the device preview.

The properties which can be defined for each widget type are described below.

gbam audio.png audio

This widget allows an audio recording to be made and subsequently saved to a designated column on ginstr web as part of the record.
After an audio recording is made, a counter displays the number of recordings captured.
audio: properties
general settings

label

defines the text which appears at the top of the audio widget on the app screen.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to provide an audio recording before submitting the form).
error message in case of input error
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new audio widget which is added to the app).

gbam barcode.png barcode

This widget allows a barcode to be scanned by the app user.
barcode: properties
general settings

label

defines the text which appears at the top of the barcode widget on the app screen.

hint

defines the text which appears within the empty code field.

alignment

this dropdown offers the choice between two options:
vertical
displays the "scan code" button below the code field
horizontal
displays the "scan code" button on the same line as the code field

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to scan a barcode before submitting the form).
error message in case of input error
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new barcode widget which is added to the app).

gbam barcodeReadOnly.png barcode (read-only)

This widget displays a barcode retrieved from a record saved in ginstr web.
barcode (read-only): properties
general settings

label

defines the text which appears at the top of the barcode widget on the app screen.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to scan a barcode before submitting the form).
error message in case of input error
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new barcode widget which is added to the app).

gbam birthday.png birthday

This is a widget which allows the app user to select a date which is subsequently saved in a table column.
birthday: properties
general settings

label

defines the text which appears above the date displayed.

validations

checkbox0.png is unique

Checking this checkbox allows the user to ensure that the input from this field is required to be unique.

database

checkbox1.png is part of database
This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new birthday widget which is added to the app).

gbam numberCalculation.png calculated value

The calculated value widget performs a numerical calculation upon pressing a button and displays the result.
calculated value: properties
general settings

label

defines the text which appears above the number entry field.

hint

defines the text which appears in the empty number entry field.

button label

defines the text which appears in the button.

initial input

defines the numerical value inserted in the number entry field by default. If no initial input value is defined, the hint value will be displayed in the empty number entry field instead.

validations

checkbox0.png required

Checking this checkbox makes this a required input field (i.e. it will be mandatory to provide input in this field before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate the field is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

checkbox0.png is unique

Checking this checkbox allows the user to ensure that the input from this field is required to be unique.

database

checkbox1.png is part of database
This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new calculated value widget which is added to the app).

actions

This section allows you to define the numerical calculation to be performed with the value entered in to the widget's number entry field.
Each part of the formula must be added manually. First, enter the numerical value in the write value field and press the gbam zoom+.png button to the right. Then, select the desired operand from the dropdown list.
The full formula is displayed in the formula field at the bottom.
Once added, each part of the formula can be removed by pressing the gbam zoom-.png button to the right of the corresponding write value field.
To clear all entered formulae, press the
clear all
button.

gbam checkbox.png checkbox

Checkboxes can be added to the app as widgets. The responses are saved to a column on ginstr web as either true (true status icon.png) or false (false status icon.png) status.
checkbox: properties
general settings

label

defines the text which appears next to the checkbox

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new checkbox widget which is added to the app).

gbam checkbox R O.png checkbox (read-only)

This widget is used to show a text label next to a checkbox which retrieves its status value (checked or unchecked) from a record saved in ginstr web.
The status value (checked or unchecked) can not be changed in the ginstr app on the device.
checkbox (read-only): properties
general settings

label

defines the text which appears next to the checkbox.

database

checkbox1.png is part of database

If this checkbox is checked, the status value (checked or unchecked) shown in the widget will be stored as part of the database table record in ginstr web as status datatype.
(This checkbox is checked by default for each new checkbox (read-only) widget which is added to the app).

gbam clear.png clear

This is a button which, when pressed, resets or clears the contents of the form.
clear: properties
general settings

label

defines the text which appears inside the reset button on the app screen.

actions

widgets to clean

defines which of the widgets currently on screen should be reset to default when the reset button is pressed.
All visible widgets are selected by default. Multiple widgets can be selected by holding the Ctrl key and clicking on their names individually.
Only the widgets selected in the widgets to clean list below this checkbox wbe cleared by this reset buttonssed.

gbam date.png date

This is a widget which allows the app user to select a date which is subsequently saved in a table column.
date: properties
general settings

label

defines the text which appears above the date displayed.

database

checkbox1.png is part of database
This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new date widget which is added to the app).

gbam DateTime Hidden.png date and time (hidden)

If this widget is added, the current date and time is recorded and saved to a designated column on ginstr web.
date and time (hidden): properties
general settings

database column headline

defines the column header for the column which is to hold the date and time values in ginstr web.

gbam DateTime R O.png date & time (read-only)

This widget displays the current date & time on screen and is not editable by the user. The date & time value is subsequently saved in a table column.
date & time (read-only): properties
general settings

label

defines the text which appears above the date displayed.

database

checkbox1.png is part of database

This checkbox should be checked if date value shown in the widget is part of the database table.
(This checkbox is checked by default for each new date & time (read-only) widget which is added to the app).

gbam Date R O.png date (read-only)

This widget displays the current date and time on screen and is not editable by the user.
The date value is subsequently saved in a table column (provided the option is part of database is checked).
date (read-only): properties
general settings

label

defines the text which appears above the date and time displayed.

database

checkbox1.png is part of database

If this checkbox is checked, the date and time value shown in the widget will be saved as part of the database table.
(This checkbox is checked by default for each new date (read-only) widget which is added to the app).

gbam Number Decimal.png decimal number

This is a labelled number entry field which allows a number containing a decimal point to be recorded in a table column.
decimal number: properties
general settings

label

defines the text which appears above the number entry field.

hint

defines the text which appears in the number entry field until its contents are edited by the user.

validations

checkbox0.png required

Checking this checkbox makes this a required input field (i.e. it will be mandatory to provide input in this field before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate the field is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

checkbox0.png is unique

Checking this checkbox allows the user to ensure that the input from this field is required to be unique.

decimal format

error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entered data is not a valid decimal number" will be shown when an invalid decimal number is entered in this field.
checkbox0.png If the show default error message checkbox is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

decimal places

defines the allowed number of decimal places.
(Default value = 2)

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new decimal number widget which is added to the app).

gbam Number Decimal R O.png decimal number (read-only)

This widget is used to load a decimal number value from ginstr web and display it on the app screen.
The decimal number (read-only) value can not be edited in the ginstr app on the device.
decimal number (read-only): properties
general settings

label

defines the text which appears as the heading.

alignment

this dropdown offers the choice between two options:
vertical
displays the label above the decimal number (read-only) value on a separate line.
horizontal
displays the label to the left of the decimal number (read-only) value on the same line.

database

checkbox1.png is part of database

If this checkbox is checked, the decimal number (read-only) value shown in the widget will be stored as part of the database table record in ginstr web as number datatype.
(This checkbox is checked by default for each new decimal number (read-only) widget which is added to the app).

gbam Number Decimal Dropdown.png decimal number dropdown

This is a dropdown list of numerical values.
decimal number dropdown: properties
general settings

label

defines the text which appears above the dropdown.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to select a value from the dropdown before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate an option from the dropdown is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new decimal number dropdown widget which is added to the app).

actions

dropdown menu options

defines the individual number options which the user will be able to select from the dropdown.
To add an option, enter the desired number in the lower input field and click the
add
button. The number option will now appear in the list above the input field.
To delete an existing option, select it from the list and click the
delete
button to delete it.
To change an existing option, select it from the list, edit the number in the lower input field and click the
update
button.

messages

no data
checkbox1.png If the show default message checkbox here is checked, a default error message will be shown when an app user attempts to submit the form without selecting an option from the dropdown.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
no selection text
checkbox1.png If the show default message checkbox here is checked, the text "select..." will appear in the dropdown before an option is selected.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom message to be shown in the dropdown instead.

gbam Email.png email

The email widget allows the app user to enter an email address, which is subsequently saved to a designated column on ginstr web.
email: properties
general settings

label

defines the text which appears in the email widget.

gbam Fax.png fax

The fax widget allows the app user to enter an email address, which is subsequently saved to a designated column on ginstr web.
fax: properties
general settings

label

defines the text which appears in the fax widget.

gbam auditUser.png ginstr username (hidden)

If this widget is added, the device's current user name is recorded and saved to a designated column on ginstr web.
ginstr username (hidden): properties
general settings

database column headline

defines the column header for the column which is to hold the user values in ginstr web.

gbam GPS Hidden.png GPS (hidden)

If this widget is added (provided GPS has been enabled on the device), the device's current GPS co-ordinates are recorded and saved to a designated column on ginstr web.
get GPS: properties
general settings

database column headline

defines the column header for the column which is to hold the GPS position values in ginstr web.

gbam auditAddress.png GPS address (read-only)

If this widget is added (provided GPS has been enabled on the device), the current address of the device is displayed on screen and subsequently saved to a designated column on ginstr web.
The address which is displayed/saved is approximate based on the current GPS co-ordinates of the device.
GPS address (read-only): properties
general settings

label

defines the text which appears above the address field.

hint

defines the text which appears in the address field if GPS is disabled on the device or otherwise unavailable.

gbam GPS R O.png GPS address (read-only)

If this widget is added (provided GPS has been enabled on the device), the device's current GPS co-ordinates are shown on screen and saved to a designated column on ginstr web.
GPS address (read-only): properties
general settings

database column headline

defines the column header for the column which is to hold the GPS position values in ginstr web.

gbam Horizontal Line.png horizontal line

A horizontal divider can be added to the app screen.
horizontal line: properties
This divider is a graphical element associated with the app theme and has no editable properties when selected.

gbam Auto Increment.png increment number (hidden)

The increment number (hidden) widget
increment: properties
general settings

label

defines the text which appears in the increment widget.

gbam Number.png integer number

This is a labelled number entry field which allows an integer (whole number) to be recorded in a table column.
integer number: properties
general settings

label

defines the text which appears above the number entry field.

hint

defines the text which appears in the number entry field until its contents are edited by the user.

validations

checkbox0.png required

Checking this checkbox makes this a required input field (i.e. it will be mandatory to provide input in this field before submitting the form. When checked, an asterix (*) is automatically added to the end of the label to indicate the field is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

checkbox0.png is unique

Checking this checkbox allows the user to ensure that the input from this field is required to be unique.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new integer number widget which is added to the app).

gbam numberIntegerReadOnly.png integer number (read-only)

This widget is used to load an integer number value from ginstr web and display it on the app screen.
The integer number (read-only) value can not be edited in the ginstr app on the device.
integer number (read-only): properties
general settings

label

defines the text which appears as the heading.

alignment

this dropdown offers the choice between two options:
vertical
displays the label above the integer number (read-only) value on a separate line.
horizontal
displays the label to the left of the integer number (read-only) value on the same line.

database

checkbox1.png is part of database

If this checkbox is checked, the integer number (read-only) value shown in the widget will be stored as part of the database table record in ginstr web as text datatype.
(This checkbox is checked by default for each new integer number (read-only) widget which is added to the app).

gbam Load.png load number of records (hidden)

The load number of records (hidden) widget
load number of records (hidden): properties
general settings

label

defines the text which appears in the load widget.

gbam auditLoadRecordColumnValue.png load value from table (hidden)

The load value from table (hidden) widget
load value: properties
general settings

label

defines the text which appears in the load value from table (hidden) widget.

gbam Male Female.png male / female

The male / female widget
male / female: properties
general settings

label

defines the text which appears in the male / female widget.

gbam NFC.png NFC

The NFC widget
NFC: properties
general settings

label

defines the text which appears in the NFC widget.

gbam NFC R O.png NFC (read-only)

The NFC (read-only) widget
NFC (read-only): properties
general settings

label

defines the text which appears in the NFC (read-only) widget.

gbam nfcImageQuery.png NFC (with image)

The NFC (with image) widget
NFC (with image): properties
general settings

label

defines the text which appears in the NFC (with image) widget.

gbam Note.png note (read-only)

The note widget
note: properties
general settings

label

defines the text which appears in the note widget.

gbam Telephone.png phone no.

The phone no. widget
phone no.: properties
general settings

label

defines the text which appears in the phone no. widget.

gbam Telephone Serial Number Hidden.png phone serial no. (hidden)

If this widget is added, the serial number of the device being used to create a record is saved to a designated column on ginstr web.
phone serial no. (hidden): properties
general settings

database column headline

defines the column header for the column which is to hold the phone serial no. (hidden) values in ginstr web.

gbam Photo.png photo

This widget allows a number of photos to be taken and subsequently saved to a designated column on ginstr web as part of the record.
After a photo is taken, a preview thumbnail is displayed and a counter displays the number of photos captured.
photo: properties
general settings

label

defines the text which appears at the top of the photo widget on the app screen.

max photos

defines the maximum number of photos that the app user is able to submit with the form.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to provide a photograph before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate the field is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new photo widget which is added to the app).

gbam Photo R O.png photo (read-only)

This widget displays a photo retrieved from a record saved in a ginstr web table.
The photo is not editable by the app user.
photo (read-only): properties
general settings

label

defines the text which appears at the top of the photo (read-only) widget on the app screen.

max photos

defines the maximum number of photos that the app user is able to submit with the form.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to provide a photograph before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate the field is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new photo (read-only) widget which is added to the app).

gbam QR Code.png QR code

This widget allows a QR code to be scanned by the app user.
QR code: properties
general settings

label

defines the text which appears at the top of the QR code widget on the app screen.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to scan a QR code before submitting the form).
error message in case of input error
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new QR code widget which is added to the app).

gbam QR Code R O.png QR code (read-only)

This widget displays a barcode retrieved from a record saved in ginstr web.
QR code (read-only): properties
general settings

label

defines the text which appears at the top of the QR code widget on the app screen.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to scan a QR code before submitting the form).
error message in case of input error
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new QR code (read-only) widget which is added to the app).

gbam Query.png query

This widget can load information into the form from the app's ginstr web table based on an identifying piece of information such as an ID number assigned to an existing record in the app's ginstr web table.
query: properties
general settings

label

defines the text which appears above the text entry field of this widget.

hint

defines the text which is displayed within the text entry field until its contents are edited by the user.

button label

defines the text which appears inside the load button on the app screen.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to provide input in this field before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate the field is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

checkbox0.png is unique

This checkbox allows the user to ensure that the input from this field is required to be unique.

min length

defines the minimum number of characters which can be accepted as a search string.
If 0 is entered here the default minimum of 1 character will apply.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "the text you have entered is too short (min length char min)" (where min length is the min length defined in the field above) will be shown if the search string entered by the app user has fewer characters than the defined min length.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

max length

defines the maximum number of characters which can be accepted as a search string.
If 0 is entered here there will be no limit on the maximum number of characters.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "the text you have entered is too long (max length char max)" (where max length is the max length defined in the field above) will be shown if the search string entered by the app user has more characters than the defined max length.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new query title widget which is added to the app).

actions

widgets to load

defines which of the widgets currently on screen should load data from the ginstr web app table when the query button is pressed.
All visible widgets are selected by default. Multiple widgets can be selected by holding the Ctrl key and clicking on their names individually.
Only the widgets selected in the list below this checkbox will be cleared by this reset button.
sort by
The loaded information can be sorted by widget by selecting a widget name from the sort by dropdown.

messages

on no rights
checkbox1.png If the show default message checkbox here is checked, a default error message will be shown to a subaccount user without appropriate read permissions.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
on no result
checkbox1.png If the show default message checkbox here is checked, the default error message "no record found" will be shown when no records are found in the app table matching the query entered.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

gbam Questionnaire.png questionnaire

The questionnaire widget
questionnaire: properties
general settings

label

defines the text which appears above the text entry field of this widget.

hint

defines the text which is displayed within the text entry field until its contents are edited by the user.

button label

defines the text which appears inside the load button on the app screen.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to provide input in this field before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate the field is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

checkbox0.png is unique

This checkbox allows the user to ensure that the input from this field is required to be unique.

min length

defines the minimum number of characters which can be accepted as a search string.
If 0 is entered here the default minimum of 1 character will apply.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "the text you have entered is too short (min length char min)" (where min length is the min length defined in the field above) will be shown if the search string entered by the app user has fewer characters than the defined min length.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

max length

defines the maximum number of characters which can be accepted as a search string.
If 0 is entered here there will be no limit on the maximum number of characters.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "the text you have entered is too long (max length char max)" (where max length is the max length defined in the field above) will be shown if the search string entered by the app user has more characters than the defined max length.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new query title widget which is added to the app).

actions

widgets to load

defines which of the widgets currently on screen should load data from the ginstr web app table when the query button is pressed.
All visible widgets are selected by default. Multiple widgets can be selected by holding the Ctrl key and clicking on their names individually.
Only the widgets selected in the list below this checkbox will be cleared by this reset button.
sort by
The loaded information can be sorted by widget by selecting a widget name from the sort by dropdown.

messages

on no rights
checkbox1.png If the show default message checkbox here is checked, a default error message will be shown to a subaccount user without appropriate read permissions.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
on no result
checkbox1.png If the show default message checkbox here is checked, the default error message "no record found" will be shown when no records are found in the app table matching the query entered.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

gbam Radio Button.png radio group (2 options)

This widget adds a group of 2 radio buttons.
radio group (2 options): properties
general settings

label

defines the text which appears above the radio button group.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to select a value from the radio button group before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate that selecting an option is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new radio group (2 options) widget which is added to the app).

actions

radio button options

defines the individual options which the user will be able to select from the radio button group.
To add an option, enter the desired text in the lower input field and click the
add
button. The text option will now appear in the list above the input field.
To delete an existing option, select it from the list and click the
delete
button to delete it.
To change an existing option, select it from the list, edit the text in the lower input field and click the
update
button.

gbam Radio Button 3 Options.png radio group (3 options)

This widget adds a group of 3 radio buttons.
radio group (3 options): properties
general settings

label

defines the text which appears above the radio button group.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to select a value from the radio button group before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate that selecting an option is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new radio group (3 options) widget which is added to the app).

actions

radio button options

defines the individual options which the user will be able to select from the radio button group.
To add an option, enter the desired text in the lower input field and click the
add
button. The text option will now appear in the list above the input field.
To delete an existing option, select it from the list and click the
delete
button to delete it.
To change an existing option, select it from the list, edit the text in the lower input field and click the
update
button.

gbam Save.png save

This is a button which, when pressed, saves the form's contents to ginstr web.
save: properties
general settings

button label

defines the text which appear inside the save button on the app screen.

actions

widgets to save

defines which of the widgets currently on screen should save data to the ginstr web app table when the save button is pressed.
All visible widgets are selected by default. Multiple widgets can be selected by holding the Ctrl key and clicking on their names individually.

clean all widgets on save

defines which of the widgets currently on screen should be cleared when the save button is pressed.
All visible widgets are selected by default. Multiple widgets can be selected by holding the Ctrl key and clicking on their names individually.
Only the widgets selected in the list below this checkbox will be cleared upon successful save.

messages

on no rights
checkbox1.png If the show default message checkbox here is checked, a default error message will be shown to a subaccount user without appropriate create permissions.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
on save
checkbox1.png If the show default message checkbox here is checked, a default message will be shown to confirm that the data has been successfully saved.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
on all fields required
checkbox1.png If the show default message checkbox here is checked, a default error message will be shown if the screen contains required fields which have not been filled when the save button is pressed.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
on not unique
checkbox1.png If the show default message checkbox here is checked, a default error message will be shown if the screen contains required fields which have not been filled when the save button is pressed.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.


gbam Screen Title.png screen title level-1

This widget adds title text in large font to be used as a screen title or heading.
screen title level-1: properties
general settings

label

defines the text which appears in the screen title widget.

gbam Screen Title.png screen title level-2

This widget adds title text in small font to be used as a screen title or heading.
screen title level-2: properties
general settings

label

defines the text which appears in the screen title widget.

gbam Screen Title Settings.png screen title with settings

This widget contains large-font title text and a settings button.
screen title with settings: properties
general settings

label

defines the text which appears in the screen title with settings widget.

gbam Screen Title LogOut.png screen title with settings and logout

This widget contains large-font title text, a settings button and a logout button.
screen title with settings and logout: properties
general settings

label

defines the text which appears in the screen title with settings and logout widget.

gbam Signature.png signature

This is a widget which allows the form to record a signature and subsequently displays a preview thumbnail of the signature.
signature: properties
general settings

button label

defines the text which appears inside the button on the app screen.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to provide a signature in this field before submitting the form). When checked, an asterix (*) is automatically added to the end of the button label text to indicate that signature entry is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the button label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new signature widget which is added to the app).

gbam Text Dropdown.png text dropdown

This widget is a dropdown list of text options.
text dropdown: properties
general settings

label

defines the text which appears above the dropdown.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to select a value from the dropdown before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate that selecting an option from the dropdown is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new text dropdown widget which is added to the app).

actions

dropdown menu options

defines the individual text options which the user will be able to select from the dropdown.
To add an option, enter the desired text in the lower input field and click the
add
button. The text option will now appear in the list above the input field.
To delete an existing option, select it from the list and click the
delete
button to delete it.
To change an existing option, select it from the list, edit the text in the lower input field and click the
update
button.

messages

no data
checkbox1.png If the show default message checkbox here is checked, a default error message will be shown when an app user attempts to submit the form without selecting an option from the dropdown.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
no selection text
checkbox1.png If the show default message checkbox here is checked, the text "select..." will appear in the dropdown before an option is selected.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom message to be shown in the dropdown instead.

gbam dropdownAutoCompleteText.png text dropdown autocomplete

This widget is a dropdown list of text options with autocomplete function.
text dropdown autocomplete: properties
general settings

label

defines the text which appears above the dropdown.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to select a value from the dropdown before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate that selecting an option from the dropdown is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new text dropdown autocomplete widget which is added to the app).

actions

dropdown menu options

defines the individual text options which the user will be able to select from the dropdown.
To add an option, enter the desired text in the lower input field and click the
add
button. The text option will now appear in the list above the input field.
To delete an existing option, select it from the list and click the
delete
button to delete it.
To change an existing option, select it from the list, edit the text in the lower input field and click the
update
button.

messages

no data
checkbox1.png If the show default message checkbox here is checked, a default error message will be shown when an app user attempts to submit the form without selecting an option from the dropdown.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
no selection text
checkbox1.png If the show default message checkbox here is checked, the text "select..." will appear in the dropdown before an option is selected.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom message to be shown in the dropdown instead.

gbam Text Dropdown Dependent.png text dropdown dependent

This widget is a dropdown list of text options, dependent upon
text dropdown dependent: properties
general settings

label

defines the text which appears above the dropdown.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to select a value from the dropdown before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate that selecting an option from the dropdown is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new text dropdown dependent widget which is added to the app).

actions

dropdown menu options

defines the individual text options which the user will be able to select from the dropdown.
To add an option, enter the desired text in the lower input field and click the
add
button. The text option will now appear in the list above the input field.
To delete an existing option, select it from the list and click the
delete
button to delete it.
To change an existing option, select it from the list, edit the text in the lower input field and click the
update
button.

messages

no data
checkbox1.png If the show default message checkbox here is checked, a default error message will be shown when an app user attempts to submit the form without selecting an option from the dropdown.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
no selection text
checkbox1.png If the show default message checkbox here is checked, the text "select..." will appear in the dropdown before an option is selected.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom message to be shown in the dropdown instead.

gbam Text Dropdown Database.png text dropdown from database

This widget is a dropdown list of text options retrieved from the database.
text dropdown from database: properties
general settings

label

defines the text which appears above the dropdown.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to select a value from the dropdown before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate that selecting an option from the dropdown is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new text dropdown database widget which is added to the app).

actions

dropdown menu options

defines the individual text options which the user will be able to select from the dropdown.
To add an option, enter the desired text in the lower input field and click the
add
button. The text option will now appear in the list above the input field.
To delete an existing option, select it from the list and click the
delete
button to delete it.
To change an existing option, select it from the list, edit the text in the lower input field and click the
update
button.

messages

no data
checkbox1.png If the show default message checkbox here is checked, a default error message will be shown when an app user attempts to submit the form without selecting an option from the dropdown.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
no selection text
checkbox1.png If the show default message checkbox here is checked, the text "select..." will appear in the dropdown before an option is selected.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom message to be shown in the dropdown instead.

gbam Text Dropdown Multiselect Database.png text dropdown multi-select from database

This widget is a dropdown list of text options.
text dropdown multi-select from database: properties
general settings

label

defines the text which appears above the dropdown.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to select a value from the dropdown before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate that selecting an option from the dropdown is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new text dropdown multiselect database widget which is added to the app).

actions

dropdown menu options

defines the individual text options which the user will be able to select from the dropdown.
To add an option, enter the desired text in the lower input field and click the
add
button. The text option will now appear in the list above the input field.
To delete an existing option, select it from the list and click the
delete
button to delete it.
To change an existing option, select it from the list, edit the text in the lower input field and click the
update
button.

messages

no data
checkbox1.png If the show default message checkbox here is checked, a default error message will be shown when an app user attempts to submit the form without selecting an option from the dropdown.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.
no selection text
checkbox1.png If the show default message checkbox here is checked, the text "select..." will appear in the dropdown before an option is selected.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom message to be shown in the dropdown instead.

gbam Text Multiline R O.png text multi-line (read-only)

This widget is used to load multi-line text data from ginstr web and display it on the app screen.
The read only text value can not be edited in the ginstr app on the device.
text multiline (read-only): properties
general settings

label

defines the text which appears as the heading.

database

checkbox1.png is part of database

If this checkbox is checked, the read only text value shown in the widget will be stored as part of the database table record in ginstr web as text datatype.
(This checkbox is checked by default for each new text multiline (read-only) widget which is added to the app).

gbam Multiselect.png text multiselect

The multiselect widget
multiselect: properties
general settings

label

defines the text which appears in the multiselect widget.

gbam Text Single Line R O.png text single line (read-only)

This widget is used to load text data from ginstr web and display it on the app screen.
The read only text value can not be edited in the ginstr app on the device.
text single line (read-only): properties
general settings

label

defines the text which appears as the heading.

alignment

this dropdown offers the choice between two options:
vertical
displays the label above the read only text value on a separate line.
horizontal
displays the label to the left of the read only text value on the same line.

database

checkbox1.png is part of database

If this checkbox is checked, the read only text value shown in the widget will be stored as part of the database table record in ginstr web as text datatype.
(This checkbox is checked by default for each new text single line (read-only) widget which is added to the app).

gbam Video Input.png video

This widget allows a video recording to be made and subsequently saved to a designated column on ginstr web as part of the record.
After a video recording is made, a counter displays the number of recordings captured.
video: properties
general settings

label

defines the text which appears at the top of the video widget on the app screen.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to provide a video recording before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate the field is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new video widget which is added to the app).

gbam Yes No.png yes / no

This widget adds a group of 2 radio buttons, labelled yes and no.
yes / no: properties
general settings

label

defines the text which appears above the radio button group.

validations

checkbox0.png required

This checkbox allows the user to make this a required input field (i.e. it will be mandatory to select either 'yes' or 'no' before submitting the form). When checked, an asterix (*) is automatically added to the end of the label to indicate that selecting an option is mandatory.
error message
checkbox1.png If the show default message checkbox here is checked, the default error message "entering the label is required" (where label is the label defined in the general settings section) will be shown when an app user attempts to submit the form without providing an input in this field.
checkbox0.png If the show default message checkbox here is unchecked, a text entry field appears below the checkbox for defining a custom error message to be shown instead.

database

checkbox1.png is part of database

This checkbox should be checked if the input from this field is part of the database table.
(This checkbox is checked by default for each new yes / no widget which is added to the app).

actions

radio button options

the options yes / no cannot be modified. If different options are desired, the radio group (2 options) widget should be used instead.

properties

If any individual widget is selected from the device preview, its properties can be edited in the properties panel at the top right of the ginstr business app maker screen.

If no widget has been selected, the name of the app screen is displayed and can be edited in the screen name field in the general settings dropdown section.

The properties which can be defined for each widget type are described in the widgets section of this page.

Copy / Delete

Copy / Delete buttons

Once a widget is added to the device preview, moving your mouse over the widget will result in two buttons appearing at the top-right corner of the widget.

copy
pressing this button copies the selected widget, resulting in a duplicate of the widget appearing below the selected widget.
All of the properties belonging to the original widget will be reproduced in the duplicate widget, with the word 'copy' appended to the label text.
delete
pressing this button deletes the selected widget.
To delete multiple widgets, select them in the device preview using the Ctrl and/or ⇧ Shift keys, and then click on the
delete highlighted widget(s)
button at the bottom of the widgets panel or press the Delete key on your keyboard.

Undo / Redo

You can undo or redo any actions in ginstr business app maker with the following keyboard shortcuts:

  • Undo - Ctrl + Z (can be pressed multiple times to undo multiple actions)
  • Redo - Ctrl + Y (can be pressed multiple times to redo multiple actions)

theme

2. Layout of the theme section

This section allows you to choose a theme to style the colour and appearance of the graphical elements of your app.

In this section, the left sidebar contains thumbnails of screens of your app.

As with the content section, the device preview is shown in the centre of the screen.

The appearance of both the screen thumbnails and the central device preview are updated automatically when a selection is made from the right sidebar, which consists of the following options:

colour
the colour picker here allows you to select any custom colour for graphical elements by using the hue slider in the centre and the dragging the cursor anywhere in the upper shade box.
Alternatively, you can enter a HEX colour code on the lower input box.
Pressing the gbam scroll.png button next to the input box allows the entry of RGB (Red, Green, Blue) or HSL values (Hue, Saturation, Lightness) instead of a HEX code.
checkbox1.png auto
if the auto checkbox is checked, the chosen colour will be applied automatically to text labels, input filed borders and buttons automatically.
if the auto checkbox is un-checked, each of the following graphical elements can be selected from the dropdown list, allowing a custom colour to be defined for each element individually
  • theme colour
  • text colour
  • button text colour
  • hint colour
The preview panel shows how the various graphical elements will look with the chosen colour(s) applied.
themes
The theme preview tiles here allow you to select between variations for the display of buttons, input fields and dropdown elements.
Clicking on one of the theme preview tiles shown in the window will select it, and a blue border will appear around it.

background

3. Layout of the background section

This section allows you to choose a solid colour or background image for your app.

In this section, the left sidebar contains thumbnails of screens of your app.

As with the previous two sections, the device preview is shown in the centre of the screen.

The appearance of both the screen thumbnails and the central device preview are updated automatically when a selection is made from the right sidebar, which consists of the following options:

colour
the colour picker here allows you to select any custom colour for use as a background by using the hue slider in the centre and the dragging the cursor anywhere in the upper shade box.
Alternatively, you can enter a HEX colour code on the lower input box.
Pressing the gbam scroll.png button next to the input box allows the entry of RGB (Red, Green, Blue) or HSL values (Hue, Saturation, Lightness) instead of a HEX code.
The default background is plain white (#FFFFFF).
backgrounds
The background image preview tiles here allow you to select a background image to be used instead of a solid colour.
All of the images are shown gray scale in the preview tiles, however the colour which is selected in the colour picker will be applied to the image as a tint
Clicking on one of the background image preview tiles shown in the window will select it, and a blue border will appear around it.
The available background images can be filtered by brightness & colour by pressing the
filters
button at the bottom right-hand corner.
Previously applied filter settings can be cleared by pressing the
clear filter
button.

app icon

4. Layout of the app icon section

This section allows you to choose a homescreen icon for your app.

In this section, the left sidebar contains a preview of the currently selected app icon.

Below this is a
upload your icon
button which opens a file browser window for you to select an image file from your computer.

The right sidebar contains an array of pre-designed app icons. These can be filtered by the appropriate industry type by clicking on the checkboxes in the filters panel in the centre of the screen.

Previously applied filter settings can be cleared by pressing the
clear filter
button.
Each pre-designed icon can also be customised using the
background
or
edit
buttons at the top of the screen.
background
the colour picker here allows you to select any custom colour for use as a background by using the hue slider in the centre and the dragging the cursor anywhere in the upper shade box.
Alternatively, you can enter a HEX colour code on the lower input box.
Pressing the gbam scroll.png button next to the input box allows the entry of RGB (Red, Green, Blue) or HSL values (Hue, Saturation, Lightness) instead of a HEX code.
edit
here you can add custom text to the app icon
text
defines the text to appear overlaid on top of the selected app icon
font
dropdown which allows you to select a font for the custom text
font size
dropdown which allows you to select a font size for the custom text, along with buttons to apply Bold, Italic and Underline formatting
font colour
colour picker which allows you to select any custom colour for use as a background by using the hue slider in the centre and the dragging the cursor anywhere in the upper shade box.
Alternatively, you can enter a HEX colour code on the lower input box.
Pressing the gbam scroll.png button next to the input box allows the entry of RGB (Red, Green, Blue) or HSL values (Hue, Saturation, Lightness) instead of a HEX code.

login screen graphics

5. Layout of the login screen graphics section

This section allows you to choose an image to be displayed on the login screen of the app.

In this section, the left sidebar contains a preview of the login screen.

The right sidebar contains an array of pre-designed graphics files.

These can be filtered by the appropriate picture category by clicking on the checkboxes in the filters panel in the centre of the screen.

Previously applied filter settings can be cleared by pressing the
clear filter
button.

Clicking one of the graphics files will select it, and a blue border will appear around it. The preview in the left sidebar will be updated with the selected graphics file.

Clicking the
cancel
button in the login area image window will close the window and no change will be made.
You can also use the
upload your graphics file
button at the bottom-right of the screen to select a graphics file from your own computer if desired.

final preview

6. Layout of the final preview section

This section shows a final preview of your app and allows you to save and/or publish the app to ginstr launcher.

To the right of the central device preview are the following fields:

project name
this input box defines the name of the current app, which is required when saving or publishing
The project name defined here
  • is used to identify the app in the list of applications in ginstr launcher
  • is used to identify the app in the list of app tables in ginstr web
  • appears on the login screen of the app
  • appears below the app icon on the device homescreen
select category...
this dropdown is used to define which category the app will be published under.
select industry...
this dropdown is used to define which industry the app will be published under.
checkbox0.png allow other ginstr users to use your app as a template
if checked, you consent to allow your published app to be used as a template for other users of the ginstr business app maker.
save
button
this button opens the save app dialog window and allows you to save the current status of your app without publishing
save as
button
this button opens the save app dialog window and allows you to save the current status of your app without publishing
publish app
button
this button will publish the app to ginstr launcher. This button is hidden if there are no widgets added to the device preview.
Upon pressing the
publish app
button in, a progress bar is shown while the app is published to the ginstr cloud.

When the progress bar reaches 100%, you will be shown the app publishing success window to confirm that the app has been published successfully.

Press the
ok
button in the app publishing success window to return to the main ginstr business app maker screen.
To install the newly published app, log in to ginstr launcher on a device with your ginstr credentials and press the
install
button next to the name of the newly published app in the list of available applications.
The app icon which subsequently appears in the device homescreen can now be used to launch the application on the device.

Pressing the
back
button in the publish details window will return the user to the main ginstr business app maker screen without publishing the app.