Controls in the palette
- Megan Ellis
Previous Section | Next Section
frevvo has a rich palette of controls (top left panel in the Forms Designer). Most of them are easy and intuitive to use. Simply drag and drop the desired control onto the canvas. We'll take a look at a few controls and their commonly used properties.
Radio/Checkbox/Dropdown Options
These are all selection controls. Radio and Dropdown allow a single selection while Checkbox allows for multiple selections. Drag and drop any of these into the Form Designer. See that the Properties panel shows the Options. You can set these options as desired. Options follow the format value=label. If you do not provide a value, frevvo will infer one from the label. For example:
1=Choose Red
2=Choose Blue
3=Choose Green
will result in the labels at the right being displayed. Labels can contain spaces, long text, arbitrary characters, etc. When the form is submitted, it's the value at the left that is actually submitted. So, if the user clicks on the "Choose Red" option, the value that is submitted will be "1". In this way, you can display whatever descriptive options you want while still submitting meaningful values to the system. This is particularly useful for dynamic options e.g. Product Codes and Names that are populated from a database. The Dynamic Options feature makes it possible for the designer to populate dynamic options from a web service without requiring a business rule. Learn more about dynamic options here.
Radio/Checkbox/Dropdown Comment (Other choice)
Each of these controls also has a Comment property. Check the Comment checkbox in the Properties panel and provide a # of rows for the comment area. If you do so, the last option behaves like an "Other - please specify" choice. If the user selects this option, a comment box will appear below asking the user to provide details. It's a commonly used pattern seen in many business forms.
Radio/Checkbox Option Layout
You may have radios and checkboxes with many choices. Sometimes you want to lay them out horizontally rather than one below the other. To do this, simply click on the Style tab in the Properties panel and set the Item Width in %. For example, if you set 25%, you'll notice that 4 (four) choices fit side by side. frevvo will automatically lay them out intelligently e.g. if one of the labels is much longer than the other, it will be arranged in a sensible way. Be careful when you lay out many such choices side by side if you want your form to be usable on a smartphone.
Attachments (Upload Control)
Drag and drop an Upload control from the palette onto the form. This control allows the user to upload 1 or more files as attachments. You can specify the min # of files, the max # of files, the max size of any file that may be uploaded and the types of files that this Upload control will accept. If the min # is > 0, then the control becomes required and the form cannot be submitted unless the min # of files have been uploaded. If you do not specify min or max, the user may upload any # of files. If a max size is not specified, the user can upload as large a file as desired up to the max size restriction imposed by the server. If a file exceeds the max size, the user will see an error message. You can also change the filename of the attachment that is stored in the form submission.
Message Control Types
Drag and drop a Message control from the palette onto the form. Notice that this control has a Message Type property. Experiment with the various types of messages to see what they look like. If you choose one of these standard types for your messages, frevvo will automatically format them, display a decorator, and lay out a nice-looking message on all devices. Of course, you can customize these using the properties available to you in the Style tab. Formatting text in the message body, for example, bold text, lists of instructions, text in different colors, etc. is very easy to do. Simply side the 
toggle to turn on the Rich Text Editor and then click the Edit with rich text editor link to display a pop-up text editor. Knowledge of standard HTML tags is not required.
Repeating Controls
Drag and drop a Repeat control from the palette onto the form. You can drop any other control into the Repeat e.g. a simple control like a Phone or a complex Section containing many other controls. Whatever you drop into the Repeat becomes repeating i.e. the user can add as many instances as he/she desires subject to the limits imposed by you in the properties. When you drop a control into a Repeat, the Properties panel for that control (the top most control in the Repeat) displays Min # and Max # properties. If Min is > 0, the control becomes required and the form cannot be submitted unless the minimum number of repeat items exists on the form and each is valid. A repeating control automatically displays + and - icons so the user can add or remove items as desired. If the min # of repeat items is being displayed, the - icon will be hidden. If the max # is reached, the + icon will be hidden and the user cannot add more items than the max.
Remember that a repeating item can itself be a complex control. For example, drag and drop a Section onto the form (outside the Repeat) and name it Personal. Drag in a First and Last Name and Email Address and make only the Last Name and Email required. Now, drag the Section into the Repeat and set min to 1 and max to 10. Test the form. Since min is 1, the first repeating item (section) is required. You will have to enter a Last Name and Email. Click + to add a second and a third. Notice that these are optional so the Submit is enabled and there is no visual indication that any controls are required. Now, enter something into Last Name in the second Section. Notice that the Email now becomes required. If you provide a Last Name you must provide an Email Address or the containing Section is invalid.
As you might imagine, this can get very complex. You can even have multiple levels of repeats i.e. a repeating Section can itself contain another repeating Section and so on. The validation requirements that this creates are incredibly complicated but you don't have to worry about them. frevvo takes care of the details for you and you can be certain that when the form is submitted, it is valid with respect to the criteria defined by the designer.
Try dragging and dropping some/all the other palette controls onto the form to see what they do. They're quite intuitive and you can read more details in the Palette Controls section of the documentation.