Info Panel
An info panel lets you display any kind of information to your users based on other fields of an issue. An info panel is a good way to show detailed information from a data source and can be combined with the search field
or native custom fields to build complex use cases.
Panel Placement
There are two options to place an info panel within the issue view
Context (right side)
Content View (left side)
When choosing context (right side) you can find the created search fields in any issue view within a context panel at the right side. In addition to this you can enable Jira Service Management Create Request
support to display this field to your customers at creation time.
The Context (right side) placement is also supported in the Jira mobile app.
Setup
In the following we use a data source with the following JSON:
{
"userlist": [
{
"id": 1,
"name": "Mario Speedwagon",
"username": "mario"
},
{
"id": 2,
"name": "Anna Sthesia",
"username": "anna"
}
]
}
Let's assume there is already a custom field (customfield_10010) of type select list
which is populated with the usernames of the data source. After selecting a value in an issue we want to show the details of that user in an info panel.
Create an info panel with Add Configuration
and Create Info Panel
and select the data source with the details.
Context Filter
First we need to select a value based on the username
$.userlist[?(@.username=='mario')]
This expression selects an entry from the list with the username
equal to mario
Now we need to select the entry base on the selection value
$.userlist[?(@.username=='{$.issue.fields.customfield_10010.value}')]
if the customfield is not a select list but a normal text field the .value
must be removed.
$.userlist[?(@.username=='{$.issue.fields.customfield_10010}')]
More examples and details about context filter can be found in the corresponding section of the documentation
Template
Here you can use HTML to display the result the way you want with maximal flexibility. The selected entry from the context filter can be used with the mustache syntax. All CSS classes from AUI can be used inside the template to fit well into JIRA.
To show all values from the example we use the following template:
<table class="aui aui-table-list">
<tr><td>User ID</td><td>{{ id }}<td></tr>
<tr><td>Full Name</td><td>{{ name }}<td></tr>
<tr><td>Username</td><td>{{ username }}<td></tr>
</table>
See the Template Syntax section for more details on creating more complex templates and the Advanced Tables section for creating rich tables.
No Result Template
This optional template is shown when a panel cannot render due to an empty result or a missing dependency.
Use HTML and CSS as in the template field. There are some reserved keywords like error
and field
that you can use with the mustache syntax. An example template could look like this:
<div class="aui-message aui-message-info">
<p>No details found for <strong>{{ field }}</strong></p>
<small>Reason: {{ error }}</small>
</div>
See the Template Syntax section for more details on how to build more complex templates
Data Source Error Template
This optional template is shown when a panel cannot render due to an data source related error.
<div class="aui-message aui-message-warning">
<p>Error for <strong>{{ field }}</strong>
{{#code}}Code <strong>{{ code }}</strong></p>{{/code}}
<small>Reason: {{ error }}</small>
</div>
See the Template Syntax section for more details on how to build more complex templates
Variable | Description |
---|---|
{{ field }} | The name of the |
{{ code }} | The HTML status code of the error. This value is only present in web based data sources. |
{{ error }} | The original readable error message |
Enable JSM Create Request
This option enables this field on the create request screen of Jira Service Management customer portal.
Positioning
When using multiple info panels in combination with search fields you might need to order them. By default fields are ordered by name in ascending order. To overwrite this behaviour use the Position
field by setting a value bigger than 1
. The field with the lowest number will appear at the top.