Dynamic Form Component
Design your own Forms to collect information, such as customer contact details, product interest or survey questions.
With Umajin App Creator’s Cloud Services/Dashboard, you can design Forms for processes such as bookings, back orders, contacts, feedback. Forms submit data back to the database so that the app owner can view the information at any time. Forms can be set to trigger emails to provide you with client details as well as triggering other more complex actions such as API calls to Cloud Services.
Tutorial on how to customize a Dynamic Form
How to create a Dynamic Form for submission
Please Note: The video below was created using Umajin version 18.104.22.168. There have been changes to the UI and some naming conventions but the basic functionality of making a form remains the same.
- The Content Management System (CMS) is now called the Umajin Cloud Services/Dashboard
- The Hamburger Menu has been replaced with a top File menu
- The Dynamic Form Component is located under category Forms in the Component Selector
Create a Dynamic Form in this Tutorial
- Go to the Component selector, select the Forms category and add a Dynamic Form component. Note how it displays in the scene tree on the left hand side of your workspace and displays a related Properties Inspector panel.
- On the workspace re-size the form. In the video example we snap it to the full screen size over top of the image.
- In the Properties Inspector, under Form ID, browsing the folder icon indicates we have no data in our Dashboard yet. If we had forms already created, they would display in the Feed Picker.
- To create a form you need to go out to the Cloud Services/Dashboard. In the Properties panel under Form ID click the upward facing arrow. This will link you to the Dashboard for this project.
- The Form will say no data to view as we have no forms created yet.
- Click the plus button to add a new Form.
- Name your Form and click save. Saving regularly will ensure your form is kept updated.
- When you click save note that your new form is created and given a numerical ID.
- Beside ‘Fields’ is a +Add button. This will add fields to your form.
- In the video you are shown how to create a simple form. You have already named your form.
- Click the +Add button to add a new field and type in ‘Name’. By default the Type is ‘Single Line ‘ which is fine for Name. Save.
- Click the +Add button to add another field ‘Date’ and change Type dropdown to ‘DatePicker’ Save.
- Click the +Add button to add a new multi choice/dropdown field to the form. Name it ‘Color’ and in the Options box type, “red|blue|green and from Type select ‘dropdown’. Save.
- Open up the app again in Umajin App Creator and click the refresh arrows to bind the fields entered in the Dashboard to your form.
- In the Property Inspector under Form ID browse the folder and now the Feed Picker will display the name of your form.
- Click that named form and your newly created form will display in the workspace and an ID number is automatically created in the Form ID panel.
- Now as the video suggests you can use the properties in the Properties Inspector panel to change the properties in your form.
- You can alter the appearance of your fields by adjusting spacing, the look of your field headings by adjusting font properties, the look within your form fields by adjusting background image and font properties and the look and states for your submit button by adjusting font properties, text and background image.
Fill in the Form and View data
- Once the form displays we can fill it in, submit it and then view the submitted information.
- Go back out to Cloud Services/Dashboard and click on Dynamic Form.
- The data can be downloaded as a CSV file or go to the Dashboard App Summary page and view the most ‘Recent Form Feedback’.
- Once a Form is created in the Cloud Services/Dashboard you can easily edit both it and the individual fields.
- Use the upward facing arrow to go to the Cloud Services/Dashboard.
- Select the App that you want.
- In the Cloud services/Dashboard click Dynamic Forms and it will display all the forms you have created. These can be edited and you can also click on the individual fields to edit them.
Properties for Dynamic Form Component
|Name||When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.|
|Position and Size||Sets position and size of the form. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height in order to create a group that will be well positioned across devices.|
|Editing||Editing the different states that can be added to your form. These are designed in separate subscreens. The dropdown menu offers links to Form and then Location finder, Barcode scanner, Photo capture, Check box and Signature subscreens. These different states need to be selected from the ‘Type’ dropdown when entering a new field in the Dashboard. Save and then refresh the Cloud Services/Dashboard link.|
|Appearance||Sets the spacing of how fields will display content within the form.|
|Horizontal spacing||Sliding scale 0 to 15. Decreases width from center to page edges.|
|Vertical spacing||Sliding scale 0 to 15. Increases the line spacing or vertical spacing.|
|Heading Style||Set properties of text in Headings you add to a Form and any text in a Checkbox subscreen you add to a form.
A Heading field is added to a form as a ‘Heading’ using the Type dropdown list and a Checkbox field is added to a form as a ‘Checkbox’ from the Type dropdown list.
|Base style||The dropdown will display all the styles you have set in the Styles Inspector. Whichever style you have selected will populate the properties below. If you alter any of the properties below for a specific use on a page, then clicking the Refresh arrow will revert the style back to its original state.
Create Style – opens the Styles Inspector so you can create a new style. The new style will be added to the dropdown.
Organize Style – opens the Styles Inspector.
|Font size||Plus and minus buttons increase or decrease the font size.|
|Font color||Font color can be selected from the color picker and the RGB number will display – or type in the number.|
|Opacity||Set translucency of text.|
|Font||Pick font for Headings from a drop down of fonts available.|
|Alignment||Set alignment of text to Left, Center, Right, Full justify.|
|Tracking||Set spacing between letters.|
|Item Heading||Set the properties of text that display the Name/Title of a Field you add to a form.|
|Item Heading properties||The properties for Item Headings are to be set using exactly the same properties as for Heading Style.|
|Paragraph Style||Set the properties for the text that will display in the Paragraph field.
A Paragraph field is added to the form as a ‘Paragraph’ type from the ‘Type’ dropdown. Content is added in the ‘Default value’ panel on the Form Field you create.
|Paragraph Style properties||The properties for a Paragraph Style are set using exactly the same properties as for Heading Style.|
|Form Field Style||Set the properties of text that will display when the user enters details into the fields on the form.|
|Form Field Style properties||The properties for Form Field Style are set using exactly the same properties as for Heading Style.|
|Item Background||Set the look of the background for all your Form’s fields.|
|Background image||Select an image from the App’s Resources Folder that will sit as a background for all your Form’s fields.|
|Nine slice values||Click the Edit Values button to view the popup where you can apply real time adjustments to all the images used as backgrounds in the form fields. You can adjust top, bottom, left and right.|
|Border scale||Adjust the border edges.|
|Item Width Padding||Adjust the center to edge/edges width.|
|Item Height Padding||Adjust the center to edges height.|
|Combo Box icon image||Select a combo box/dropdown icon from the App’s Resources Folder to indicate that this field has a second action to perform, eg. a checkbox has options to select from. It will display on the right hand side of the field. You are able to design your own icons and store them in your App’s Resources folder.|
|Button Style||Set the style of font that will display as text on buttons and the button labels.|
|Button Style properties||The properties for Button Style text are set using exactly the same properties as for Heading Style.|
|Submit text||The text for your Submit button can be customized here.|
|OK text||The text for the OK button can be customized here.|
|Back Text||The text for the Back button can be customized here.|
|Enable back button||Checking the box will display and enable a back button.|
|Default image||Browse Resources Folder to select an image for the ‘default’ or normal unused state of buttons.|
|Down image||Browse Resources Folder to select an image for the ‘down’ state of buttons when pressed.|
|Disabled image||Browse Resources Folder to select an image for the ‘disabled’ state of buttons.|
|Nine slice values||Click the Edit Values button to view the popup where you can apply real time adjustments to the image used as a button state. Works well where all images are the same size.|
|Width||Plus and minus buttons control the width of the buttons. The buttons work in .25 increments. The width works to push out the left side of the buttons.|
|Height||Plus and minus buttons control the height of the buttons. The buttons work in .25 increments. The height works to push down the bottom of the buttons.|
|Check box||Set the look of the checkboxes when you are in the Editing state for Checkbox.
Content for choices goes in the Options field in the Dashboard.
|Background||Select the image for the background of each checkbox.|
|Tick||Select the image for the tick in the checkbox.|
|Number Line Style||Set the style of font that will display as well as the graphic setup of the number line.|
|Number Line Style properties||The properties for Number Line Style text that will display on the numberline are set using exactly the same properties as for Heading Style.|
|Left & Right Margins||Set the width of the left and right margins of the items on the number line and the text/captions.|
|Item Y offset||Set the vertical alignment (in percentages) of the items on the number line.|
|Caption Y offset||Set the vertical alignment of the number line captions/text.|
|Number Line Background||Browse the App’s Resources Folder to select the image for the background line that will display as the number line.|
|Number Line Unselected||Select the graphic to display when the items on the number line are not selected|
|Number Line Selected||Select the graphic to display when the item on the number line is selected.|
|Photo Capture||Set the button designs for capturing a photo with the device.|
|Default image||Remain in the Editing ‘Form’ state to browse the App’s Resources folder and select the image that displays a button/image indicating readiness for photo capture and takes you to the photo capture view.|
|Capture button image||Change to the Editing ‘Photo capture’ state to edit the following 8 buttons.
Browse the App’s Resources Folder to select the image/button you have designed that indicates the photo can be taken.
|Capture button down image||Select the image that displays when the photo capture button is activated.|
|The colored panel on the Photo capture screen allows you to select a color and draw/write on the photo.|
|Clear button image||Select the image for the button that indicates all drawing/writing on the photo can be cleared completely.|
|Clear button down image||Select the image for the button that indicates activation of the button so that all drawing/writing on the photo will be cleared completely.|
|Undo button image||Select the image for the button that indicates the drawing/writing on the photo can be undone, one stroke at a time.|
|Undo button down image||Select the image for the button that indicates activation of the button so that the drawing/writing on the photo will be undone, one stroke at a time.|
|Select camera button image||Select the image for choosing the camera location on the device. (front or rear facing camera)|
|Select camera button down image||Select the image for when the camera location is activated.|
|Popup Messages||Set the messages that will pop up when submission of form is successful or has problems.|
|Success||There is a default success message available but you can also click the ‘A’ panel to bring up the Text Editor and customize your message.|
|Fail||There is a default fail message available but you can also click the ‘A’ panel to bring up the Text Editor and customize your message.|
|Incomplete||There is a default incomplete field name message available but you can also click the ‘A’ panel to bring up the Text Editor and customize your message. Use the Dashboard to set required field to true to activate this message if the field is not completed.|
|Invalid||There is a default invalid field name message available but you can also click the ‘A’ panel to bring up the Text Editor and customize your message.|
|Signature editor||Set the button text, the signing instructions, the pen stroke color and the button states for deleting the signature.|
|The background image for the signature fields is set the same as all form fields under the heading ‘Item Background’ and then ‘Background image’.|
|Button text||Remain in the Editing ‘Form’ state and customize the text on the button.|
|Title||Change to the Editing ‘Signature’ state to make all the following changes.
Customize the signing instruction.
|Stroke||Select the color for the pen stroke to sign with.|
|Clear button image||Select the image for the unused state of the clear/delete signature button.|
|Clear button down image||Select the image for the activated state of the clear/delete signature button.|
|Subscreen Title Style||Set the style of font that will display on all the Subscreen/sub-state titles/headings – so for Location finder, Barcode Scanner, Photo Capture, Checkbox, Signature.|
|Subscreen Title Style properties||The properties for Subscreen Title Styles that displays on sub-states are set using exactly the same properties as for Heading Style.|
|User Location||Set the look of the refresh button.|
|Refresh button image||To edit this image change to the Editing ‘Location finder’ state. Browse the App’s Resources folder to set the image for the resting state of the refresh button.|
|Refresh button down image||To edit this image remain in the Editing ‘Location finder’ state. Browse the App’s Resources folder to set the image for the activated state of the refresh button.|
|Preset||A Preset is a pre-determined set of properties and files for a component. This component does not have a default preset but you can create your own Preset by building your assets, putting them in your Image folder and then selecting them in the Properties panel. The ’SAVE’ button will enable you to name and save your preset under the Custom tab.
The ‘LOAD’ button opens the Preset Selector, which has tabs for Predefined and Custom, so you can choose your custom preset to load for your Dynamic Form component.