Frames provides a way for providers to embed content directly into the Agworld mobile app in certain contexts
| name | The display name of the frame, should be a string of maximum 28 characters. |
|---|---|
| icon | A base64 encoded icon in PNG format with a resolution of 108x108px that is used when displaying a marker on the map view |
| metadata (optonal) | A hash of key values pairs in string format. This is intended for storing metadata for the convenience of the provider and doesn't affect the frame at all |
| contexts | An array of contexts objects in which the frame should appear in the app |
| content | An array of content objects that describes the content of the frame |
{
"name": "An Agworld Frame",
"icon": "iVBORw0KGgoAAAANSUhEUgAAAGwAAABsCAIAAAAABMCaAAABhWlDQ1BJQ0Mg\ncHJvZmlsZQAAKJF9kT1Iw1AUhU9TtaIVBzuIOGSoThZFRRy1CkWoEGqFVh1M\nXvojNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEzc1J0UVKvC8ptIjxweV9nPfO\n4b77AKFWYprVNgZoum2mEnExk10RQ68IoYOqG6Mys4xZSUrCd33dI8D3uxjP\n8r/35+pRcxYDAiLxDDNMm3ideGrTNjjvE0dYUVaJz4lHTGqQ+JHrisdvnAsu\nCzwzYqZTc8QRYrHQwkoLs6KpEU8SR1VNp3wh47HKeYuzVqqwRp/8heGcvrzE\ndapBJLCARUgQoaCCDZRgI0a7ToqFFJ3HffwDrl8il0KuDTByzKMMDbLrB/+D\n37O18hPjXlI4DrS/OM7HEBDaBepVx/k+dpz6CRB8Bq70pr9cA6Y/Sa82tegR\n0LsNXFw3NWUPuNwB+p8M2ZRdKUgl5PPA+xl9UxbouwW6Vr25Nc5x+gCkaVbJ\nG+DgEBguUPaaz7s7W+f2753G/H4AL0pyjHg9Kd4AAAAJcEhZcwAALiMAAC4j\nAXilP3YAAAAHdElNRQflBwYHEREhMLY6AAAAGXRFWHRDb21tZW50AENyZWF0\nZWQgd2l0aCBHSU1QV4EOFwAAAJ1JREFUeNrt0DERAAAIBCC1f+c3hJsHEegk\nxc0okChRIhIlSpSIRIkSJSJRokSJSJQoUSISJUqUiESJEpEoUaJEJEqUKBGJ\nEiVKRKJEiRKRKFGiRCRKlCgRiRIlIlGiRIlIlChRIhIlSpSIRIkSJSJRokSJ\nSJQoUSISJUpEokSJEpEoUaJEJEqUKBGJEiVKRKJEiRKRKFEiEiVK/GMBLwoD\n1VRze2wAAAAASUVORK5CYII=\n",
"metadata": {
"key": "test value"
},
"contexts": [
{
"type": "location",
"lat": 31.9523,
"lng": 115.8613
},
{
"type": "field_crop",
"field_crop_id": 64738,
"scope": "agronomic_snapshot"
}
],
"content": [
{
"type": "text",
"text": "Hello World",
"align": "center",
"style": "header"
}
]
}
| Icon size | 108px x 108px |
|---|---|
| Safe region | 90px x 90px |
Each context describes the circumstances that the frame will appear within the app. At least once context is required for your frame to be accessible within Agworld.
The location context will show your frame in the maps view using a pin at a specific location. When the user touches your pin the frames content will appear.
| type | Must be set to 'location' |
|---|---|
| lat | The latitude to display a pin as a number |
| lng | The longitude to display a pin as a number |
{
"type": "location",
"lat": 31.9523,
"lng": 115.8613
}
| type | Must be set to 'field_crop' |
|---|---|
| field_crop_id | The id of the field crop to attach this frame |
| scope | 'agronomic_snapshot' or 'financial_snapshot' |
{
"type": "field_crop",
"field_crop_id": 64738,
"scope": "agronomic_snapshot"
}
Displays text content inside a frame with a specified style and alignment.
The text to display. maximum length 10,000 characters
| type | Must be set to 'text' |
|---|---|
| text | The text to display. max length 10 000 characters. Can support markdown styling. |
| align (optional, defaults to 'left') | Alignment of the text, 'left', 'center' or 'right' |
| style (optional, defaults to 'paragraph') | Style of the text, 'paragraph', 'muted', 'error', 'header', 'label' |
{
"type": "text",
"text": "Hello World",
"align": "center",
"style": "header"
}
Displays a list of data in a tabular format. Each row has a field name and value with an optional icon.
Note: Field name and value cannot support markdown styling like 'text' content
| type | Must be set to 'data_table' |
|---|---|
| table_style (optional, defaults to 'truncated') | Style of the table. Currently describes whether or not the table starts minimized or fully visible, 'truncated' or 'expanded' |
| items | An array of item objects, each item describes a single row of the table |
| field | The left hand side header of the row. Cannot support markdown styling. |
| value | The right hand side value of the row. Cannot support markdown styling |
| icon (optional, defaults to null) | The icon to display to the left of the value. 'caret_up', 'caret_down', or 'status' |
| accent (optional, defaults to null) | The colour of the icon, 'green', 'amber', 'red', 'blue', 'gray' |
{
"type": "data_table",
"table_style": "expanded",
"items": [
{
"field": "Key",
"value": "Value 1",
"accent": "green",
"icon": "caret_up"
},
{
"field": "Key",
"value": "Value 2"
},
{
"field": "Key",
"value": "Value 3 which is a very long value that will exhibit different behaviours to the other values"
}
]
}
Displays a list of data in the metrics format. Each row has a field name and value with an optional icon.
| type | Must be set to 'metric_list' |
|---|---|
| size | Size of each item in the metric list. Large has a single metric per line, small has two metrics per line, x small has three metrics per line, xx small has four metrics per line, 'lg' or 'sm' or 'x-sm' or 'xx-sm' |
| card (defaults to true) | Card determines items background. Grey when 'true', white when 'false' |
| items | An array of item objects, each item describes a single row of the table |
| field | The bottom header of the metric |
| value | The top value of the row |
| icon (optional, defaults to null) | The icon to display to the left of the value. 'caret_up', 'caret_down', or 'status' |
| accent (optional, defaults to null) | The colour of the icon, 'green', 'amber', 'red', 'blue', 'gray' |
{
"type": "metric_list",
"size": "sm",
"items": [
{
"field": "Key",
"value": "Value 1",
"accent": "green",
"icon": "caret_up"
},
{
"field": "Key",
"value": "Value 2"
},
{
"field": "Key",
"value": "Value 3 which is a very long value that will exhibit different behaviours to the other values"
}
]
}
Displays tabs of data for a specific frame. There are maximum of 3 tabs for each frame. Each tab holds content like frames content.
When using tabs other frame components must each be contained within a tab.
| type | Must be set to 'tab' |
|---|---|
| name | A string to describe current tab |
| content | Contains content for the specific tab. Can hold things similar to frame's content. Nesting tabs is not supported |
{
"content": [
{
"type": "tab",
"name": "Tab 1 Name",
"content": [
{
"type": "text",
"text": "Table 1"
},
{
"type": "data_table",
"items": [
{
"field": "Key",
"value": "Value 1",
"icon": "caret_up",
"accent": "green"
},
{
"field": "Key",
"value": "Value 2"
}
]
}
]
},
{
"type": "tab",
"name": "Tab 2",
"content": [
{
"type": "text",
"text": "Table 2 Name"
},
{
"type": "data_table",
"table_style": "truncated",
"items": [
{
"field": "Key",
"value": "Value 1"
},
{
"field": "Key",
"value": "Value 2"
}
]
}
]
},
{
"type": "tab",
"name": "Tab 3 Name",
"content": [
{
"type": "text",
"text": "Metrics"
},
{
"type": "metric_list",
"size": "sm",
"card": true,
"items": [
{
"value": "Value 1",
"field": "Key"
},
{
"value": "Value 2",
"field": "Key",
"icon": "caret_down",
"accent": "red"
}
]
}
]
}
]
}
