About the JSON code for a portal-type form

The value of the persistent variable PortalSetup that is used to control the contents and layout of a portal-type shell form must be in JSON code. Here is a representative example of this type of code:

"colWidth":"170",
  "rowHeight":"130",
  "gutter":"10",
  "onLayoutChanged":"OnLayout",
    "forms":[ 
       {
	          "form":"FormA",
           "width":"260px",
           "height":"120px"
        },
        {   
          "form":"FormB"
	         },
        { 
	          "form":"FormC",
           "width":"220px",
           "height":"420px",
           "top":"50px",
           "left":"1px"
        }
    ]
}

This table lists and describes the variable properties you can use to create the JSON code:


Variable property	Description / Comments
colWidth	This property sets the width of the layout columns, in pixels. Subforms are aligned horizontally to this in the grid. If not specified, the default value of this property is 170 pixels.
rowHeight	This property sets the height of the layout rows, in pixels. Subforms are aligned vertically to this in the grid. If not specified, the default value of this property is 130 pixels.
gutter	This property sets the minimum space allowed between subforms, in pixels. This property applies to both vertical and horizontal spacing. If not specified, the default value of this property is 10 pixels.
onLayoutChanged	This property is the name of a form script method that takes a single parameter (string): OnLayout This property is invoked whenever forms are moved around in the user control and the order is changed.
id name	These properties are used only when the onLayoutChanged method is invoked. This is because the form script is passed a parameter that contains a JSON string indicating the ID and name of each form in order, using this format: `[{"id":"bob","name":"PanelTest1"},` `{"id":"sue","name":"PanelTest2"},` `{"id":"joe","name":"PanelTest1"}]`
backColor	This property sets the background color for the user control component. Use RGB color settings in hexadecimal format; for example, #FFFFFF.
forms	This section of the code specifies what forms are to be displayed and in what order. Note that all forms to be displayed are listed inside a set of square brackets following this key word. Inidividual form designations are enclosed with curly braces.
form	This property designates a form to be displayed. You must use the actual form name, and not the form caption.
width height	These properties designate the size of the form as it is to be displayed inside the user control. If not specified, the size is taken from the form definition.
top left	These properties specify the initial placement of the subform within the user control. These settings are normally unnecessary. When not used, forms flowwithin the user control container in the specified order. When these settings are used, the normal order and other layout anomalies can occur.

Notes

As with most programming languages, pay special attention to the use of curly braces and other punctuation marks in the JSON code.

It is not necessary to declare the coding language in this case, because the user control URL is designed to recognize only JSON.