Using the 10×10 grid layout to create page

Decisions allows an administrator user to create a page using a 10 x 10 grid layout.
This example demonstrates adding several columns and rows. This example will also demonstrate how to resize depending on the row/column selection.

How to create a page using the grid layout.

1. On the Folders panel on the left, select the folder to contain the page with the grid layout.

2. Click the Create Page/Dashboard button at the bottom of the window.

3. On the New Page window, enter the page name and click on Template.
4. Next expand: All Folders > System > Designers > Catalog > System Defaults.
5. Then select your Grid type, for this example we will be using the 10 x 10 Grid. 
6. Click OK. 

To save build time Decisions provides a standard 10 x 10 grid. From here you can modify the grids to fit your layout.

Adding columns and rows:

This example demonstrates adding several columns and rows.

1. On the Folders panel on the left, select the folder to contain the page with the grid layout.

2. Click the Create Page/Dashboard button at the bottom of the window.

3. On the New Page window, enter the page name and click on OK.

This will show a page with 2 columns.

• On the Page: Page with grids window, expand the Explorer pane in the lower right 

• Expand the Surface item, and select Root Container.

• The default container is a grid. To add columns and rows:

• In the Properties panel on the right, in the Layout section, add a column. Add each column by clicking the Add button to the right of the Columns box.
  

   

   

• Enter your desired pixel size in the requested width. Within the Resize Type you may choose from Fixed, Resize or Grow. Click Ok.

Re-sizing depending on the row/column selection:

This example shows the multiple re-sizing options.

We will start by deleting the existing Columns and Rows. 

• In the Edit Object window, set the Re-size Type and Size for each column and click Save.
  For each column, in the Size section, enter 10 in the Requested Width box.

• In the Resize Type dropdown box, make the following selections:

  Column one, select Resize.
  Column two, select Resize.
  Column three, select Fixed.
  Column four, select Resize.
  Column five, select Grow.
  Column six, select Resize.
  Column seven, select Resize.
  Column eight, select Resize.

• Each column appears in the list with the size and an indicator of the resize type. A resize column displays as 10*. A grow column displays as 10+. A fixed column displays the size of the column only, as in 10.

• In the Properties panel on the right, in the Layout section, the user add rows. Add each row by clicking the Add button to the right of the Rows box.

   

• In the Edit Object window, set the Resize Type and Size for each row and click Save.
  For each column, in the Size section, enter 10 in the Requested Height box.

   

  In the Resize Type dropdown box, make the following selections:
  Row one, select Resize.
  Row two, select Grow.
  Row three, select Fixed.
  Row four, select Resize.
  Row five, select Resize.
  Row six, select Resize.
  Row seven, select Resize.
  Row eight, select Resize.
  Row nine, select Resize.

  Each row appears in the list with the size and an indicator of the resize type. A resize row displays as 10*. A grow row displays as 10+. A fixed row displays the size of the column only, as in 10.
  When complete, the page layout looks like this.

   

Related Videos

• Page – Overview
• Creating your First Dashboard
• Changing the Style and Behavior of Content and Components
• Putting stack panel in grid

Additional Resources

• Building a Form's Layout
• Creating Your First Form