Output types
Discover different output types and how to configure them
Outputs are the results of an action. While designing your actions, you can add tables, key value tables, bar charts, pie charts, markdown texts and raw responses of your requests. Let's take a closer look to each component and their settings.
You can test your actions while configuring outputs. While testing, requests and functions of your app are automatically triggered.
Table
JSON data is often complex and contains a large number of arrays. Table output visually converts the JSON responses of the API requests to a paginated table for easy navigation. Each element of a JSON array is mapped to a row of a table. You can select the values to be included or excluded in your columns, style these columns and use other dynamic data sources for the cell values. You can also add action columns to your tables. When you add an action column, the actions added to that column become available for each row of the table.
Configuring a table output
Title: is the name of the table output displayed when the action is run. If your action has multiple outputs, users can select each one from the dropdown to navigate between outputs.
Table source: is generated from JSON responses of API requests. Use Actioner's smart autocomplete to access a JSON array in an API response.
Below example returns the tickets array from the body of the response to ListTickets API request and maps each element of tickets array to a new row.
{{request.ListTickets.response.body.tickets}}
You can also use markdown to style your columns.
Columns: are typically produced from the source entered for the table.
Click yellow + button to add a new column to your table. Next, click on a column to configure it.
Hide icon next to the column title removes that column from table output and adds it to Hidden columns list. If you want to unhide a column, click unhide icon on Hidden columns list.
To change the order of a column, click on it and while holding the mouse button down – drag to a new location. The column at top will be the first column on your table.
Configuring columns
Click on a column to configure it.
Column title: is the caption of the column, shown in capital letters on the table.
Column type: can be an Action column or a Markdown (text).
Markdown (text) columns: Typically, a property of an array element is added to columns. currentItem refers to the mapped element of an array. With adding a property to currentItem, you can access that property and add it to your column.
Below places the id values of each element on the selected column.
currentItem.id
You can also use markdown to style your columns.
Action columns: are configured to add actions to your table.
Once action column type is selected; you can enter a label for the button, select a button color and specify the action on ⚡️ Run field. You can select from the list of actions in your app.
Adding actions to your tables
When an action is selected on an action column; new fields open up. These are Action parameters and Run immediately.
Action parameters: are the inputs of the added actions. If you want to provide a value for an action parameter, you can generate it from your rows. Entered value will be the value of the input when that action is run through your table output. If you don't add any value to a parameter, users will need to enter that value while running the action through your table output.
Fill out each parameter with values from your rows.
currentItem.id notation maps the value in column named id.
Run immediately: When enabled, the added action can be directly executed through the table output. When disabled, action is loaded to action bar with the configured Action parameters. User running the action can update parameters and then hit ⌘ + ↵ or click Run button to execute the action.
Key value table
Add a list of unique attributes with their associated values. Each JSON element and its value are mapped to a row. Works best with single objects such as to retrieve a deal or show details of a ticket.
JSON data often contains large number of nested objects. Key value table output converts each keys and value into a friendly table format. It extracts data from JSON objects and represents it as a key value pair. You can select the key value pairs to be included or excluded in your key value table and use other dynamic data sources for the cell values. You can also add reference actions at the end of the key value table.
Configuring a key value table output
Title: is the name of the table output displayed when the action is run. If your action has multiple outputs, users can click each of their titles to navigate between outputs.
Table source: is generated from JSON responses of API requests. Use Actioner's smart autocomplete to access an object's property from an API response.
Below example returns a ticket object from the body of the response to GetTicket API request.
{{request.GetTicket.response.body.ticket}}
You can also use markdown to style your rows.
Rows: are typically produced from the source entered for the table.
Click yellow + button to add a new row to your table. Next, click on a row to configure it.
Hide icon next to the row title removes that row from table output and adds it to Hidden rows list. If you want to unhide a row, click unhide icon on Hidden rows list.
To change the order of a row, click on it and while holding the mouse button down – drag to a new location.
Configuring rows
Click on a row to configure it.
Row title: is placed as a key on the left column of the table.
Value: is placed on the right column of the table. Typically, the value inside an object is added to each row. currentItem refers to the mapped table source. With adding a property to currentItem , you can access that property and add it to each row column.
Below places the id value of the element on the selected row.
{{currentItem.id}}
You can also use markdown to style your rows.
Bar chart
Visually display comparison between different values such as volume changes or differences in total count over time. Works best with data such as daily sales volume or issue distribution by labels.
Configuring a bar chart
Title: is the name of the bar chart output displayed when the action is run. If your action has multiple outputs, users can click each of their titles to navigate between outputs.
Chart source: is generated from JSON responses of API requests. Use Actioner's smart autocomplete to access a JSON array in an API response.
Below example returns the tickets array from the body of the response to ListTickets API request.
{{request.ListTickets.response.body.tickets}}
X-axis values: Typically, it is a field of the chart source that will be used to group and display your data. {{currentItem}} refers to the chart source. With adding a field {{currentItem}}, you can group and display your data by that field.
Below shows distribution by priority when added as X-axis values.
{{currentItem.priority}}
Dataset source: is a unique attribute from the chart source typically id.
Method: is an aggregation method, allowing you to summarize values for a group. Available aggregation methods are: Sum, Count, Average, Minimum value, Maximum value, First value, Last value.
X-axis title: is the label of the X-axis.
Y-axis title: is the label of the Y-axis.
Pie chart
Divides a circle into multiple slices as proportional to their contribution towards the total sum. Useful for comparing the share or proportion of various items. Works best when you have only one data series; such as this month's total issue count distribution by issue priority.
Configuring a pie chart output
Title: is the name of the pie chart output displayed when the action is run. If your action has multiple outputs, users can click each of their titles to navigate between outputs.
Chart source: is produced from JSON responses of API requests. Use smart dot notation to access each JSON object on the API request's response.
Group by: Typically, it is a field of the chart source that will be used to group and display your data. {{currentItem}} refers to the chart source. With adding a field to {{currentItem}}, you can group and display your data by that field.
Below shows distribution by status when added as X-axis values.
{{currentItem.status}}
Dataset source: is a unique attribute from the chart source typically id.
Method: is an aggregation method, allowing you to summarize values for a group. Available aggregation methods are: Sum, Count, Average, Minimum value, Maximum value, First value, Last value. Scroll to the bottom of this page for learning the functions of each aggregation methods.
Markdown (text)
Provides formatting elements to your text outputs.
Supported markdown styles are:
- Heading
- Bold
- Italic
- Underline
- Bullet list
- Numbered list
- Link
- Image
Configuring a markdown (text) output
Title: is the name of the text output displayed when the action is run. If your action has multiple outputs, users can click each of their titles to navigate between outputs.
Value: Text outputs are typically generated from JSON responses of API requests. You can use markdown elements to style the output. To dynamically get values from your requests, use Actioner's smart autocomplete to access an object's property from an API response.
Below example returns the id of ticket object from the body of the response to GetTicket API request.
{{request.GetTicket.response.body.ticket.id}}
To style your output, you can use markdown.
Raw response
Add this output to show the raw JSON response to executed requests amd functions. Note that the responses listed in this output are the responses to requests that are added to Run steps.
Title: is the name of the raw response output displayed when the action is run. If your action has multiple outputs, users can click each of their titles to navigate between outputs.
Once you add a raw response, responses to all requests and function executions mapped to run steps are listed on the output.
Aggregation methods in charts
Sum method
Returns the summation of all numeric values.
Count method
Creates an object composed of keys generated from the results of running each element of collection through iteratee. The corresponding value of each key is the number of times the key was returned by iteratee.
Average method
Returns the average of all numeric values.
Minimum value method
Returns the minimum numeric value for each group.
Maximum value method
Returns the maximum numeric value for each group.
First value method
Returns the first numeric value for each group.
Last value method
Returns the last numeric value for each group.