ScriptRunner’s Script Fragments feature allows you to customize your Jira UI by adding buttons or displaying web content on a page.

Web Panels

You can use the Script Fragments feature to add web panels to the Jira issue UI, allowing you to display external content from within your Jira. This is very useful if you have content relevant to your Jira issues in an external system and you want to bring this content straight into your Jira issues. You can use Web Panels to display additional information on the current wiki page, or Jira issue, or to add HTML snippets to parts of a page.

For example, you can display your systems status page so your JSD users don’t have to leave Jira. You can also use Script Fragments to show scripted content, such as buttons, which users can interact with. An example of this might include using a Script Fragment to display a scripted button that searches Confluence for the title of the Jira issue. 

For more information on web panels, you can refer to Atlassian's documentation.

Due to certain limitations, no more than two fragments can be displayed in a single location.

Create a Script Fragment

  1. Navigate to ScriptRunner-Script Fragments.

  2. Click on Add fragment.

  3. Select the relevant project from the Projects drop down list.

  4. Select the type of fragment you would like to add from the Fragment type drop down list.
  5. Select the location where the script fragment will appear.

  6. Select the Source drop down list and choose from:

    • The Single URL option to link a webpage to your web item, displaying it in a pop-up box where the web panel is located.

    • The Separate HTML, CSS, JS URLs option to inject a HTML URL, CSS and JavaScript into your button.

  7. If you’ve selected the Single URL option, add your target URL

  8. If you’ve selected the Separate HTML, CSS, JS URLs option, add your HTML URL, CSS URL and JavaScript URL to the web panel.

  9. Click Save changes.

The HTML, CSS and Javascript has to be hosted somewhere that Jira can access. We recommend CodePen for the hosting. It’s also important to note that the hosting must serve up the matching content-type header for each file.

Web Panel Display with External Resource

Web Panel Display with External Resource example.

Web Panel Display with Specified HtmlCssJs Resources

Web Panel Display with Specified HtmlCssJs Resources example.