The form designer is composed of the following sections:
Use this to access some of the designer actions. XForms Module Menu Bar
Use this to quickly access some of the designer actions. XForms Module Tool Bar
Lists a form structure with its pages and questions in a tree hierarchy. XForms Module Forms Pane
Contains widgets which can be dragged and dropped on the design surface. XForms Module Palette Pane
Shows properties for the selected widget on the design surface. XForms Module Widget Properties Pane
Shows properties for the selected item (page, question, or question option) in the Forms Pane. XForms Module Properties Tab
Contains the xforms xml that the form designer produces.
Note: By default this Tab is disabled and invisible. To enable it please navigate to: Admin -> Maintenance -> Settings -> Xforms and rename "true" on the "Show Layout Xml Tab" field.
It is on this surface that you can drop and drag widgets, resize, and more, to your desired structure. More about the design surface and short cuts can be found at XForms Module Design Surface
Put here CSS to enable you customize the look and feel of your forms. For instance, you can use the css below to give all your text boxes a yellow back ground color.
The CSS below removes the surrounding border (rectangle) when displaying a form for data entry.
For example, if you want to do some custom validations before a form can be submitted, you would write a something like this below:
submitForm() is a built in function which does the standard xforms validations and then submits the form to the server if no errors are found on the form. The above code also assumes that you have a button whose ID value on the Widget Properties panel is: submit
For developers who do not want the page to refresh after form submission, ensure that you remove the "afterSubmitUrlSuffix" div.
Another example is when you want the index of the selected location to always match with the index of the selected provider, you would have something like this below:
Accessing radio buttons and check boxes requires indexing the first child node as: document.getElementById(ID).childNodes
For instance toggling two check boxes with ids ID1 and ID2 to ensure that when one is checked, the other is disabled, and vices vasa, you would do something like below:
Contains the xml which stores the layout of widgets on the design surface. This is only useful for developers or advanced users who want to see the xml that the form designer uses to store the form layout.
Shows form behavior as it will be at runtime. From here you can test all your validations, skip logic and more to ensure they behave as expected. After selecting the preview tab, if you make any changes to the form structure or widgets on the design surface, to have them reflected in the preview tab, you need to right click in the preview window and then select the Refresh menu item. You could accomplish the same by selected the Refresh item under the view menu on top of the form designer.
Shows what the submitted xml will look like after filling the form in preview mode. This is only useful for developers or advanced users who want to see the xml that the form designer sends to the server on submission.
Download FormDesigner.zip which allows to customize the form design offline, without connecting to the server.