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:

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 NameValueDescription
typefieldsSpecifies 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
};