How to make prettier alerts for an Forge app?

Hi there!

I’m developing an app for Jira using React and Forge.

This app places some buttons (Improve Task and Add Subtasks) inside the issues on a Jira board, just like print below.When any of these buttons is clicked, an alert is displayed to inform the user about the action. However, the current alert is a basic, old-style alert:

I want to replace this with a more modern and customized alert using SweetAlert (https://sweetalert.js.org/), but I’m running into issues. The SweetAlert alert doesn’t appear, and nothing is shown in the console to indicate what’s going wrong.

Here’s a snippet of my code:

import React, { useState } from "react";
import ForgeReconciler, { Button, Text, useProductContext } from "@forge/react";
import { requestJira } from "@forge/bridge";
import { useTranslation } from "react-i18next";
import { useEffect } from "react";
import { I18nextProvider } from "react-i18next";
import i18n from "../../static/hello-world/src/i18n";
import swal from "sweetalert";

...

const getSubtasks = async (taskDesc, contextDesc) => {

    //alert(t("waitVictorSubtasks"));
    swal("Good job!", "You clicked the button!", "success");

....

Despite using swal to trigger the customized alert, nothing happens. I want to create more visually appealing alerts for my users.

Can anyone help me figure out why the SweetAlert alert isn’t working? Or other alternatives that I can take?

Thanks.

I’m not sure I can help you with SweetAlert since I’m not sure how that library really works and as you mention there are no error messages.

However, I would say that an alert is probably not the most consistent with Atlassian’s UI patterns for showing this kind of feedback to a user. The normal way we would do this for Atlassian apps is to use a flag:
https://atlassian.design/components/flag/examples

To actually use them from a forge app with custom UI (since they are rendered outside your iFrame by the base product itself. you can use the showFlag method from @forge/bridge:

https://developer.atlassian.com/platform/forge/custom-ui-bridge/showFlag/

2 Likes