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 expecting it.

Rubriques liées