The Forms Designer is only available to Account Administrators under the Admin>Forms Designer drop-down.
In this section I will walk you through setting up a simple report that will show how to place and manipulate the tools that the Forms Designer offers.
As soon as you open the Forms Designer a new window will open with only the Surety® logo in the middle panel.
Lets start by just saving our blank Form.
Hover over File in the Menu Bar.
Click on
Save As...
Type in the name you would like to give the form. and click
OK
The first thing you may want to do after the opening the designer is to place a map in the report.
Click on Map in the left hand column.
 Map |
Single left click in the design frame to drop the default size map. Where you click your mouse will be the top left corner of the placed map.
Now single left click on the map to highlight it in yellow if it is not already.
Adjust the size of the map by clicking on the width field in the right hand Properties column.
Delete the number 200 and input the new size. For this demonstration type in 450 and hit enter on the keyboard and it will update the map to the desired size. The map's height and width are constrained and will always scale the height and width together.
Notice in my example the map is not quite as centered as I would like it to be so I am going to move it to the right a little bit. There are two ways to do this.
1. We can adjust the "Left" Property field by clicking on it and inputting a larger number to move the map to the right or a smaller number to move the map to the left. You can also move the map up and down by clicking changing the "Top" property field. Making the number smaller will move the map up and increasing the number will move the map down.
2.The other way to move the map around the form design area is to click the select tool
 Select |
Then left click, hold, and drag on the map to move it around the design area.
Once you have it positioned, release the left click on the mouse and it will be placed at that spot.
Now lets add a compass to the form for reference. Single click on Compass in the left column.
Now click the area where you want to place the compass
You can move the compass around the design area in the same way as the map was moved by eith clicking and dragging or changing the height and width property fields.
I like the size and position where I placed the compass so I am going to leave it be for now.
The next thing that I want to place is a label that will tell us the Lat/Long of the center of the mapped area.
Click on Label
 Label |
Left click once on the area where you want to place the Lat/Long label.
I want the label to be larger than the default size so now I would make sure that the placed label is still highlighted yellow and then click in the Font Size Properties field to change the value to 14.
Now that we have the size and placement set, we need to change the label so that the lat/log appears when the report is generated. First click the select tool again, click on the label so that it is highlighted yellow again.
Now click in the text box in the Properties column.
Backspace out the existing label name and type in an equals sign(=) into the box.
With the text cursor still behind the equals sign, hover your mouse over the Insert Variable button on the toolbar.
Click "mapCenter" See Also:
Insert Variable
This will place the text "@mapCenter" into the label's textbox. Now when the form is generated, the Lat/long of the center of the map will appear here.
Lets change the position that the mapCenter label is placed at. I want to line it up with the left hand side of the Map.
use the select tool and select the map. We are checking the left position of the placement. In my example, the Left properties field has a value of 113. We can either highlight that value and copy it to the computer's clipboard or just remember what it is.
Still using the select tool, click on the =@mapcenter that we just placed.
Now go up to the left properties field and either paste the value in from your clipboard or type in the remembered value of the Map's left property value. In my example I will type in the value of 113.
The label will now be aligned with the left hand side of the map.
When the form is generated in Surety, only the latitude/longitude numbers will populate in the @mapCenter label. Because of this we may want another label to describe what the lat/long numbers point to.
Click on Label
Click on the design area to place the new label.
We can change the text of the label by clicking on text box and typing our desired text. In this case I am going to use "Map Center:"
Lets also change the Font Size to 12.
Again we are going to align the label to the map but this time we will use the align quick command. See Also:
FormsDesigner - Shortcut Keys
Click the select tool again, deselect the Map Center label by left clicking on a white area.
Now left click on the Map and then the Map Center: label while holding down the Ctrl key on the keyboard. This will allow us to select multiple items. The map will be highlighted in yellow while the Map Center: label will be highlighted in blue.
Now we are going to use the Align Left quick command.
hover your mouse over the Edit button in the Menu Bar
Click on Align Left(Ctrl + left arrow)
Now everything that was highlighted in Blue has the same left property value(113) as what is highlighted in yellow. In other words, they are now both aligned.
Lets now add a text field that can be typed into when the report is generated.
Click on the Text Box tool
Click the in the design panel to place a text box.
Lets change the width of the text box by clicking on the value in the Width Property field to 125.
We also want to put a label in beside the text box.
Select Label and place it to the left of the text box.
>
Rename it Crop Condition:
Now we are going to place a premade Crop list next to the label we just made.
Select the Crop List in the left hand panel under lists.
Now left click to place the list in the Design panel.
This will pull from an already made list and place a label and textbox on the page. (For more information on Lists, See:
Forms Designer - List )
Lets change the Properties of both to match the existing textbox and label below it. Select the text box and change the width to 125 and the Height to 13.
Add a label that says Date Ordered:
Lets add another textbox and label above the last two sets that we created.
Add the text box and re-size the width to 125.
For this text box I would like configure it to be a date that you can select. With the text box still highlighted, click the down arrow next to type for the drop-down and click Date In the Properties panel.
Now change the text in the text box to be an equals sign(=).
With the cursor still behind the (=), hover your mouse over insert variable and click nowDate.
This will put @nowDate in the text box. This will make the textbox automatically show the current date but allows the date to be changed by clicking on it and selecting the desired value.
Select all 3 of the text boxes by using the select tool and left clicking and dragging over all three items.
now hover over Edit in the menu bar and select Align Stack (Ctrl + down arrow).
This automatically stacks the items on top of each other evenly.
Now you can also hover over edit and select Align Left to line them to the left with each other as well.
Finally lets add A way to Title the Page and insert a spot for the Company Logo to appear. Start by selecting the Text Box button Click above the map to place the textbox (or wherever you would like the title to be)
Increase the width and font size of the text box. and change the text to "Enter Title Here"
Click on Logo and place it on the page.
Change the height and the width will scale with it. Nothing will show up in the Forms Designer but the company logo will appear in the designated space once the form is generated.
You can also change the placement of the Surety® Logo. By design, it is not able to be re-sized, deleted or covered up.
Now make sure to save your report so you don't lose your work.
File>Save As
Enter a name for the Form and select which access level it has. See Also:
Save As
Once it is saved, you can release it by checking the release box. Now you are able to generate that form.
For more information on how to use these tools and features as well as the tools not covered in this tutorial See:
Forms Designer Main Page
See Also: