/
Step-by-step guide to create Widgets

Step-by-step guide to create Widgets

 

Overview

Widget is a brand new way to communicate release notes directly with your customers. It lets you embed the release notes in the form of a widget, directly in your web or mobile app. Once configured, you get a JavaScript snippet that can be added to any HTML page for the widget to appear.

Navigation

Widgets feature is available only on the In-project screen. Navigate to the relevant Jira project >> Click on Automated Release Notes & Reports >> Click on Release Pages & Widgets tab >> Click on Create under the Widgets section.

 

widgetts.png

When you click on create, the configuration page opens. Below are configurations you need to do to set up a widget.

Step 1

Click on Create & you’ll be brought to the following screen. Pay close attention to the information provided

Widget details

  • Name - This is the widget name but unlike release page, it is not visible to the end users

  • Description - Same as the name, not visible to the end users. And you can keep it empty too

  • Enabled - Keep it on

Widget content layout

Step 2

Final set of fields

Issue details

In this section, one can choose an existing Jira issue or custom field. If one wants to use the Jira issue properties where the AI-generated release notes content is stored, one can use those Jira issues properties too. Read Save release notes without Jira fields using issue properties for more details.

  • Field 1 - In image we have selected a Jira issue property field to publish AI-generated release notes.

  • Field 2 - We have picked up Issue type from the selector.

  • Field 3 - Here you can select Status category

Step 3

Choose look & feel related configurations.

In the right section, manager the look and feel related configuration. Here one can configure the Widget mode and designs.

Widget mode

Read more about widget modes here - Release page & Widget templates & widget modes | Widget modes

Design tab

  • Show default launcher - This toggle identifies whether the widget launcher is available on-screen by default. If disabled, the launcher won’t be displayed until made visible by another action.

  • Widget launcher label - e.g. Release notes. This is what the button text will be, to open/close the widget.

  • Widget launcher button size - Small, Medium, Large

  • Rest of the configurations deal with the look & feel of the widget

Widget content

In the Widget content a JQL is defined that determines what data is populated within the widgets. Every time the widget action is triggered, it will look at the JQL & pull out the relevant issues. Similar to how the JQL section is configured, you can use variables in this text box.

Once the JQL is added, click anywhere outside of the box & or will be displayed to convey the correctness of the JQL.

A sample JQL that can be used -

Project = ARNR AND issueType = “New Feature” AND fixVersion = “[versionName]”

Embed code

Once all the mandatory information is filled in & Save button is clicked - the Embed code becomes available.

Step 4

Widget content

This is the JQL similar to what you use within ARNR templates' JQL section. Just use the default one for now.

Step 5

Click on Save, let the page reload

Now click on the Embed tab. This is what it will look like.

Step 6

Let us test whether the embed code works

Copy the code. And then head over to https://codepen.io/pen/. In there, paste the copied code into HTML section. In a few seconds, the widget should appear in the preview section. Although it appears, it doesn’t have any release-related data yet.

Step 7

Now create a manual rule & insert widget action inside of it

Step 8

Now run the manual rule by providing it with the relevant version name

Step 9

Let us see the final output!

After running the rule, wait for about 30 seconds & go back to the codepen tab. Refresh the page, and paste the code again into the HTML area. Release notes will now be available within the widget.