Bookmarklets

Jira Power Bookmarklets

I wish Jira did a couple of more things for me, so I made bookmarklets to help out. Read about how three bookmarklets can help day to day Jira usage.

Feb 26, 2022 • 3 min read

Bookmarklets are great and I'd like to share with you some of mine that I use for Jira. All examples here are using my personal Jira instance and are designed to easily put in your own CSS selectors as your Jira instance may vary.

🤔

Not sure what bookmarklets are? I've got you covered in my What are Bookmarklets? post.

Copy full ticket name as link

This is my most used Jira bookmarklet. It takes the current ticket and copies the ticket number and title as a link to your clipboard. For example, the below ticket highlights what gets used:

Uses the ticket number and title from the full ticket view as highlighted.

The link that is copied on to your clipboard looks like:

SD-1 Add vectorisation to project

The code for this is:

javascript: (function () {
	const titleSelector = '[data-test-id$="summary.heading"]';
	const ticketNumberSelector = '[data-test-id$="breadcrumb-current-issue-container"] a';

	const titleElement = document.querySelectorAll(titleSelector)[0];
	const ticketNumberElement = document.querySelectorAll(ticketNumberSelector)[0];

	const getLinkText = `${ticketNumberElement.innerText} ${titleElement.innerText}`;

	const copyJiraTicketToClipboard = () => {
		const copiedLinkElement = ticketNumberElement.cloneNode(true);
		copiedLinkElement.textContent = getLinkText;

		const clipboardItem = new ClipboardItem({
			"text/plain": new Blob(
				[copiedLinkElement.innerText],
				{ type: "text/plain" }
			),
			"text/html": new Blob(
				[copiedLinkElement.outerHTML],
				{ type: "text/html" }
			),
		});

		navigator.clipboard.write([clipboardItem]);
	};

	copyJiraTicketToClipboard();
})();

If you want to look into how I wrote the above with the Clipboard API check out:

Widen Jira issue

On older versions of Jira, long comments, tables, or images could be cut off the side of the main ticket body. Newer versions don't suffer as badly from this, but sometimes widening the main ticket is helpful. See the before and after below:

Before and after widening the main ticket body.

The code is:

javascript: (function () {
	const ticketBodySelector = "[data-test-id$='issue.views.issue-details.issue-layout.left-most-column']";
	const ticketBody = document.querySelectorAll(ticketBodySelector)[0].parentElement;

	ticketBody.style.width = '150%';
})();

Add up selected backlog tickets

Sometimes you're in your backlog view and need to add up a few tickets. Maybe to estimate your next sprint during planning maybe during refinement. This bookmarklet is a quick way to add up the selected values.

Adding up selected backlog point values.

The values are put into a simple alert() and non-number values are skipped in the calculation.

The code:

javascript: (function () {
	const selectedRowSelector = ".lfgNgI";
	const storyPointCircleSelector = "div[class^='ReadViewContentWrapper']";
	const fullSelctor = `${selectedRowSelector} ${storyPointCircleSelector}`;

	const storyPointArray = Array.from(document.querySelectorAll(fullSelctor))
		.map(x => Number(x.innerText));

	const totalStoryPoints = storyPointArray.reduce((previousValue, currentValue) => {
		if (!isNaN(currentValue)) {
			return previousValue + currentValue;
		}
		return previousValue;
	});

	alert(totalStoryPoints);
})();