Widget Section Element: Fields

The fields element can be used to display information in a key-value format. There are two types of field elements:

Single columned field
Multi columned field

Defining the style attribute as true will display 2 pairs of key-value pairs in each row, making it multi-columned.

Syntax:


type : "fields",
data : {{

}},
button_references : {},
style : {
	short :  //boolean
}

Attributes:

Attribute Name	Value	Description
type	fields	Specifies the type of widget element. Value for the type key is 'fields'.
data	Array list (max: 10 elements)	Array list of key-value field pairs.
button_references	JSON Object	The instant button object. To know more about button references, refer here
style	Boolean	Specifies the style of the field. If field is passed as true, 2 pairs of fields will fit in each row, making it multi columned.

Example for single columned field element:


elements = list();
elements.add(
    {
        "type":"title",
        "text":"Widget Title"
    }
);
elements.add(
    {
        "type":"fields",
        "data":[
            {
                "Key 1":"Value 1"
            },
            {
                "Key 2":"Value 2"
            },
            {
                "Key 3":"Value 3"
            }],
        "style":
        {
             "short": false
        }
    }
);
sections = list();
sections.add(
    {
        "id":1,
        "elements":elements
    }
);
return {
    "type":"applet",
    "tabs":[
        {
            "label":"Home",
            "id":"homeTab"
        }
    ],
    "active_tab":"homeTab",
    "sections":sections
};

Example for multi columned field element:



elements = list();
elements.add(
    {
        "type":"title",
        "text":"Widget Title"
    }
);
elements.add(
    {
        "type":"fields",
        "data":[
            {
                "Key 1":"Value 1"
            },
            {
                "Key 2":"Value 2"
            },
            {
                "Key 3":"Value 3"
            }],
        "style":
        {
             "short": true
        }
    }
);
sections = list();
sections.add(
    {
        "id":1,
        "elements":elements
    }
);
return {
    "type":"applet",
    "tabs":[
        {
            "label":"Home",
            "id":"homeTab"
        }
    ],
    "active_tab":"homeTab",
    "sections":sections
};