Layout Grid


Layout Grid

The Layout Grid is a container meaning you place other tools inside of it to create compound structures such as the one below.


The image above demonstrates several of the key features described in more detail below. These are actually two different grids. The first is using the caption row based grid type with equally spaced columns and in the second grid the column sizes have been adjusted to give me space to the address field over the suite/apartment. Space has been removed on both grids forcing them together giving the appearance of a single grid.


Number of Columns - Grids are a collection of columns and rows. In a grid the number of rows are determined by the elements placed into the grid. The number of columns is established using this setting

Grid Type - There are three different grid layouts. Picking the best grid type is easy once you understand how they differ from one another:

  • Free Form - This is the most powerful of all the grids as each cell is defined by you. There is no structure beyond setting the number of columns. As you add tools into a grid they start to fill the grid. If you set the grid to two columns, the first two tools you add will be in row one. The third tool you add will automatically be placed into the first column of row two and the number of rows your grid will contain will simply be based on the number of tools you add divided by the number of columns you set.
    In free form grids, the caption of the tools you add has no value. If you add a text box and want a caption above it you need to add a label in the cell directly above that tool. This gives you the ability to create custom tables with embedded calculations and perform many other spreadsheet type functions using the various tools that are supported in by the grid.
  • Caption row based – Unlike the free form grid a caption row based grid is used primarily for creating forms where each element requires a label above it. When you add an element into this grid the caption of the element automatically places the caption in the row immediately above it. The gird in the opening image is a caption row based grid. If you set the grid to two columns and place two text boxes in the grid. The grid will be two columns wide by two rows deep. The first row will contain the captions and the second row will contain the data entry fields.
  • Caption Column based – This grid type basically places the caption to the left of the data entry field. You need to define two columns for each element you want on a single line.

To establish the effect below you place each tool in its own caption column based grid. You use custom appearance setting to make the caption shading color white and you turn off caption borders. Then you use the adjust column size option. By giving more or less weight to the caption versus the data entry field, you can basically make the data entry field any size you want. This allows you make them look more suitable for the data they collect. If you were asking someone age, you would never be entering more than 3 digits so why give the field 50 % of the screen width. In the case of these two grids the first was set a 70|30 and the second at 80|20.

Layout Grid Example 2

Fit To Screen - This feature provides a level of device responsiveness as it tries to force your container elements to fit within the available width of your devices screen. We say tries because certain tools have minimum widths and if you had let’s say two tools with minimum widths that together were larger than your screen width then this parameter would be over written. Otherwise it will recalibrate the amount of screen real-estate each element gets based on the rules below. If fit to screen is not selected then the container is allowed to go beyond the right border. This may be the better way to go if your container has many elements.

  • Equally Space Columns - Attempts to dived the screen width of your device by the number of columns in your container. If you have two images and they do not fit then each will be set to the minimum width automatically.

  • Use caption length - This setting will attempt to use your tools caption to set the width of the column. So Total would be given more of the screen then Qty.

  • Adjust column width - This option gives you the most control over how columns widths are set. You must select fit to screen to use this option. You must have a value for each column in the container and the values must equal 100%. So a three column container would be configured as follows depending on your requirements. 50|30|20

  • Ignore grid if screen is smaller than Ignore grid if screen is smaller than This is another option provided to make your form responsive to the device it is being viewed on. You can set a minimum screen size. If the screen is too small the elements in the grid will be exploded and presented one underneath the other. This allows you to optimally support both tablets and small phones with the same form. This option is not available for free form grids.

Remove Space - This parameter is used to remove the space just before and just after the tool. By removing space two elements can be made to appear linked or as a single element.



Have more questions? Submit a request


Powered by Zendesk