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:

CODE

{
  "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

CODE

$.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

CODE

$.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.

CODE

$.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:

HTML

<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:

HTML

<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.

HTML

<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 `field` producing the error
{{ 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.