Visual Designer is a tool that allows you to build your form.
It has clear, intuitive interface, drag-and-drop functionality and in-built help.
Starting the Visual Designer
You can start the Visual Designer
- either through SmartForms Administration Console by selecting the form in the SmartForms Library and then clicking "Open in Designer" button in the right panel,
- or through Form Test Display application, by clicking on the "Visual Designer" link.
This section explains what happens next.
The Visual Designer opens in a separate tab of your web browser. If the form has just been created and you are starting the Visual Designer for this form for the first time, the Visual Designer loads the form definition and opens straight away.
With the first saved modification of the form, a draft version of the form definition is created and then updated every time you click "Save" button. No matter what happens with the Visual Designer window - you close the window, internet connection is lost, etc. - the work you've done on the form is safely stored in the draft version.
To test the changes you've made to a form you need to commit them. You do it by clicking Commit button in the Controls panel of the Visual Designer. At this point the committed version of the form definition is updated and the draft version is deleted. If you close the Visual Designer and start it again, it will open with the committed version loaded.
If there are uncommitted changes - you made modifications and saved them but didn't click Commit button - then when you re-start the Visual Designer you will be presented with the choice: to start using committed version or to start with draft version. The time stamps for both versions indicate when the versions were updated last.
Starting the Visual Designer with the draft version allows you to continue your modifications and commit them later when you are ready to test.
Starting the Visual Designer with the committed version will delete the draft version and load the committed form definition. The changes saved in the draft version will be lost.
Make sure you select the right option!
You don't need to restart the Visual Designer every time you commit your changes. In the normal form development cycle you would make changes to the form in the Visual Designer, commit them, and then switch to the web page where Form Test Display is placed and configured to use your form and run the form from the start. If further changes are required, you switch back to the Visual Designer and make another round of changes, commit them and switch back to see and test them on the page. If your form doesn't use any environment data, like logged-in user details etc., you can test your changes without leaving the Visual Designer, in preview mode. You can invoke preview mode by clicking Preview Form button in the Controls panel of the Visual Designer.
Working in the Visual Designer
When you start the Visual Designer it opens in the Form mode - no pages shown in the Display panel, the Toolbox is closed and the Properties panel displays form settings. See Form-level Properties for more details on form settings.
The Display panel is where you assemble form pages and their components. Select a page you want to work on in the drop-down list labelled "Item selected" in the Controls panel. When a page is selected its components are loaded into the Display panel, the Properties panel shows the selected page properties and the Toolbox panel appears on the left. You build a page by dragging form components from the Toolbox panel and configuring their properties/settings/options in the Properties panel. You can hide the Properties panel to extend the Display panel to the left, just click on the "cross" icon in the top right corner of the Properties panel. When you are ready to test your form, click Commit button on the Controls panel.
Drag-and-drop is used extensively in the Visual Designer. For example, to add a form component onto a page you drag it from the Toolbox panel and drop it in the Display panel. Other examples are: re-arranging components on a page or adding conditional states for a component, etc.
The basic sequence involved in drag and drop is:
- Move the mouse to an object
- Press and hold down the button on the mouse to "grab" the object
- "Drag" the object to the desired location by moving the mouse to the location
- "Drop" the object by releasing the button
In the Visual Designer 'draggable' and 'droppable' elements are clearly marked.
|Hover the mouse over an object (or point the mouse to the top left corner of the object if it contains other objects, for example when you want to move a Group containing other components). If this icon appears for this object in the top left corner it means this object is draggable.|
|When you grab and start dragging the object, all valid locations where it is allowed to be dropped will be highlighted. This icon will appear in the left corner of such location while you drag the object over it, if this is the location you want, drop the object.|
If you drop the object in a location that doesn't have the second icon the drag and drop operation will be cancelled. The best way to finish the drag and drop operation correctly is to place the first icon (that moves together with the object) close or over the second icon and drop.
If you need to drag an object from one panel to another, choose the location first, scroll to the place where you are going to drop the object, and then start drag and drop. If you need to re-arrange the order of objects in the same panel and you have to scroll to the place where the draggable object needs to be dropped, you can place the object over scroll bar and hold it there till you get to the desired location.