Snapkit

This section explores how to create a custom user interface using snap-kit and DevRev.

Understanding the structure

The snap-kit JSON has a top-level structure with object, body, type, and snap_kit_body fields. The snap_kit_body field contains information regarding snap-kit’s structure.

For example:

1{
2  "object": "<source_id>",
3  "body": "Giphy",
4  "type": "timeline_comment",
5  "snap_kit_body": {}
6}

Snap-kit body

The snap_kit_body field has the following properties:

  • snap_in_id: A unique identifier for the snap-kit.
  • snap_in_action_name: The name of the action this snap-kit represents.
  • body: An object that holds the actual snap-kit content in the form of snaps.

For example:

1"snap_kit_body": {
2  "snap_in_id": "<snap_in_id>",
3  "snap_in_action_name": "giphy",
4  "body": { "snaps": [] }
5}

Body

The body field contains an array of snaps. Each snap can have a type, and depending on the type, it has different properties.

Snaps

The following snap types are supported:

Base types

User interface elements

Form elements

Layout elements

Data pickers

Action payloads

Snap-kit generates payloads when a user interacts with an actionable snap. The payload is sent to the backend and can be used to perform actions. The following snaps generate payloads:

Base Payload

All actionable snaps share the same base payload structure. The base payload has the following structure:

1{
2  "type": "<type of Snap that generated the payload>",
3  "action_id": "<the action identifier of the Snap that generated the payload>",
4  "action_type": "<the type of the action as defined in the Snap>",
5  "timestamp": "<timestamp as a string in ISO 8601 format>"
6}

Base Types

Many elements share the same base properties. The base types these elements inherit from are described below.

User interface elements

Table

A table element used to present JSON structured data.

Properties

  • rows (required): The values to be displayed in the table. The data should be provided as a JSON object, where each cell is a plaintext SnapKit component.
  • columns (required): Columns are defined as an array of objects, where each object has two parameters: an optional header and a required field key, which defines which field from rows is shown in the defined column. If a key is not used, it means that the associated data from rows will not be displayed in the table. The order of keys also defines the order in which values from rows are shown in the table.

Inherited properties

Inherited from Snap:

  • type (required): The type of the element, should be set to "table".
  • block_id (optional): A unique identifier for the snap. If not provided, a random ID is generated.

Example

table

1{
2	"elements": [
3		{
4			"columns": [
5				{
6					"header": {
7						"text": "Date",
8						"type": "plain_text"
9					},
10					"key": "date"
11				},
12				{
13					"header": {
14						"text": "Status",
15						"type": "plain_text"
16					},
17					"key": "status"
18				},
19				{
20					"header": {
21						"text": "Project Title",
22						"type": "plain_text"
23					},
24					"key": "title"
25				}
26			],
27			"rows": [
28				{
29					"date": {
30						"text": "2024-03-04",
31						"type": "plain_text"
32					},
33					"hiddenField": {
34						"text": "Hidden value",
35						"type": "plain_text"
36					},
37					"status": {
38						"text": "Completed",
39						"type": "plain_text"
40					},
41					"title": {
42						"text": "Project A",
43						"type": "plain_text"
44					}
45				},
46				{
47					"date": {
48						"text": "2024-03-05",
49						"type": "plain_text"
50					},
51					"hiddenField": {
52						"text": "hidden",
53						"type": "plain_text"
54					},
55					"status": {
56						"text": "In Progress",
57						"type": "plain_text"
58					},
59					"title": {
60						"text": "Project B",
61						"type": "plain_text"
62					}
63				},
64				{
65					"date": {
66						"text": "2024-03-06",
67						"type": "plain_text"
68					},
69					"hiddenField": {
70						"text": "hidden",
71						"type": "plain_text"
72					},
73					"status": {
74						"text": "Pending",
75						"type": "plain_text"
76					},
77					"title": {
78						"text": "Project C",
79						"type": "plain_text"
80					}
81				}
82			],
83			"type": "table"
84		}
85	]
86}

Table

A table element used to present JSON structured data.

Properties

  • rows (required): The values to be displayed in the table. The data should be provided as a JSON object, where each cell is a plaintext SnapKit component.
  • columns (required): Columns are defined as an array of objects, where each object has two parameters: an optional header and a required field key, which defines which field from rows is shown in the defined column. If a key is not used, it means that the associated data from rows will not be displayed in the table. The order of keys also defines the order in which values from rows are shown in the table.

Inherited properties

Inherited from Snap:

  • type (required): The type of the element, should be set to "table".
  • block_id (optional): A unique identifier for the snap. If not provided, a random ID is generated.

Example

table

1{
2	"elements": [
3		{
4			"columns": [
5				{
6					"header": {
7						"text": "Date",
8						"type": "plain_text"
9					},
10					"key": "date"
11				},
12				{
13					"header": {
14						"text": "Status",
15						"type": "plain_text"
16					},
17					"key": "status"
18				},
19				{
20					"header": {
21						"text": "Project Title",
22						"type": "plain_text"
23					},
24					"key": "title"
25				}
26			],
27			"rows": [
28				{
29					"date": {
30						"text": "2024-03-04",
31						"type": "plain_text"
32					},
33					"hiddenField": {
34						"text": "Hidden value",
35						"type": "plain_text"
36					},
37					"status": {
38						"text": "Completed",
39						"type": "plain_text"
40					},
41					"title": {
42						"text": "Project A",
43						"type": "plain_text"
44					}
45				},
46				{
47					"date": {
48						"text": "2024-03-05",
49						"type": "plain_text"
50					},
51					"hiddenField": {
52						"text": "hidden",
53						"type": "plain_text"
54					},
55					"status": {
56						"text": "In Progress",
57						"type": "plain_text"
58					},
59					"title": {
60						"text": "Project B",
61						"type": "plain_text"
62					}
63				},
64				{
65					"date": {
66						"text": "2024-03-06",
67						"type": "plain_text"
68					},
69					"hiddenField": {
70						"text": "hidden",
71						"type": "plain_text"
72					},
73					"status": {
74						"text": "Pending",
75						"type": "plain_text"
76					},
77					"title": {
78						"text": "Project C",
79						"type": "plain_text"
80					}
81				}
82			],
83			"type": "table"
84		}
85	]
86}

Form elements

Layout Elements

Data pickers