Basic Dynamic Content

Up to this point, all the Apps you've built have been static. They've displayed the same content every time you load them, depending on what you've hard-coded into the JSON used to define your app.

Now, obviously, this isn't what you expect from an "App", Apps are meant to be dynamic, showing you information that's relevant to the context you're in.

In App Maker, we have a few different ways to make your Apps dynamic, these range from:

• Simple options like templating data from existing Jira Issue/Project fields.
• To more advanced options like using automations to inject Custom Data into your apps, or receiving Webhooks to pull in data from external services.

Templating Data From Jira Issue

• App Maker components support templating data from the Jira issue that the App is being displayed in using Handlebars Syntax.
• This dynamic content will be updated every time the App loads, so will always be in sync with the latest data available in your Jira instance.
  • This type of dynamic content is particularly useful for creating your own custom UI widgets that group together sets of fields or inject the values from certain fields into templated blocks of content.
  • When combined with Jira Custom Fields, this functionality becomes even more powerful, allowing you to create custom UI widgets that display the values of your custom fields in a way that makes sense to your users.
• Using the "jira:issueContext" module from earlier, lets create a sidebar widget that displays the issue key and summary of the issue that the App is being displayed in.
• To do that, we'll use the same JSON structure as before, but this time we'll template some Jira issue data into the componentData object.

{
  "resourceType": "site",
  "module": "jira:issueContext",
  "title": "my-first-app",
  "action": "set",
  "componentData": {
    "type": "StackedInformationGroup",
    "title": "Dynamic Field Data",
    "children": [
      {
        "type": "FieldValue",
        "key": "Issue Key",
        "value": "{{jiraIssue.key}}"
      },
      {
        "type": "FieldValue",
        "key": "Issue Summary",
        "value": "The summary of this issue is: {{jiraIssue.fields.summary}}"
      }
    ]
  }
}

• The "jiraIssue.key" and "jiraIssue.fields.summary" are Handlebars expressions that will be replaced with the actual issue key and summary of the issue that the App is being displayed within.
• If you head back to Jira and refresh the page, you should see your new App, now displaying with the dynamic content from the Jira issue.
  • Notice how with the Issue Key, we just display the value of the field by itself, but with the Summary, we inject that content into a sentence.
  • This second technique is particularly useful when you want to display the value of a field in a larger block of template content.

• Combining this technique with things like Jira Automation (which can be used to automatically set & update the values of certain fields on your Jira issues) can be a powerful way to create fully dynamic apps that display always up-to-date information to your users.

TIP

You can also template fields from the Project that the App is being displayed within by using jiraProject as the root for your Handlebars expression instead of jiraIssue.