How to open a dialog modal in forge custom UI app?

Hai all, I am in a need to open a dialog modal in jira issue panel after button clicked. I developed one custom UI forge app with jira issuepanel module. App is working fine. How can i open a new dialog window(not inside app) in jira issuepanel?

Thanks in advance…

I found this documentation to create modal in custom UI app. But i really don’t know how to create modal with this code mentioned in this doc.
https://developer.atlassian.com/platform/forge/runtime-reference/custom-ui-bridge/?_ga=2.147849330.432855845.1625653375-680597112.1622810152#modal

Hi, check my issue. I wrote my example, but there are actually limitation of dialog height. Styling modal with CSS for Forge Custom UI - #3 by MateuszKorczyski. If you have any question, I will try to help you :slight_smile:

2 Likes

hai @MateuszKorczyski Thanks for your reply. I already saw your issue. You created seperate app to open a modal in UI custom app. In my requirement, how can i trigger a modal with button click in main app?

@MateuszKorczyski can you send your whole code that you used to create modaldialog app?

In main app

import {Modal} from "@forge/bridge";

const GlanceContainer = () => (
            <button onClick={() => {
                const modal = new Modal({
                    resource: [HERE PASTE DIALOG RESOURCE KEY FROM MANIFEST.YML],
                    onClose: (payload) => {
                        console.log('onClose called with', payload);
                    },
                    size: 'x-large'
                });
                modal.open();
            }} >Open modal</button>);


ReactDOM.render(<GlanceContainer />, document.getElementById('root'));

That’s all. Unfortunately I can’t share my repo.

1 Like

@MateuszKorczyski Really thanks for your help. What do you think about that modal length issue? Because it’s important for me to show some data in modal. Will it been fixed?

I’m keeping my fingers crossed for a solution to this problem. I encourage you to follow my thread. Information regarding this problem will probably appear there. :slight_smile:

2 Likes

@MateuszKorczyski We will wait for a good response from jira team…

@MateuszKorczyski did you create another custom UI app(forge create) or react app( npx create-react-app) inside static folder?

I created the second react app (by npx create-react-app) for modal dialog. Both apps work with forge tunnel as well.

@MateuszKorczyski Thanks Do you know to store chechbox data in custom UI forge app. Because i created a table with checkbox as a cell in that table. When i checked any checkbox i store the data in some dictionary. But after click a button dropdown the whole page get refreshed. So the data that i stored becomes empty at that time.

Hai @MateuszKorczyski Did you use resolver functions for dialog-modal app. If yes how can you use and in manifest.yml file how can you define the resolver for dialog-modal app.

@SuryaA Hi, have you done with modal dialog in custom ui? I have the same problem and I got confused because documentation explains nothing.

@veloti check this link

Hi, thank you for reply! I hope you can help me, because I really don’t understand how to create this modal dialog. For example I created new app (confluence-macro in my case). I want to create button in my macros that calls a dialog modal window.

My main app is placed in static/hello-world directory. Am I need to create new directory static/modaldialog and add it to manifext.yml like below?

resources:
  - key: main
    path: static/mainapp/build
    tunnel:
      port: 3000
  - key: modaldialog
    path: static/modaldialog/build
    tunnel:
      port: 3001

How I need to craete this second custom UI app? Via forge create inside static directory? Or how?
What should be inside the static/modaldialog folder? Do I need one more package.json file?

Thank you! I really hope you can help me, because documentation and community says absolutely different things.

Hai @veloti I created it in the same app like below.
manifest.yml

resources:
  - key: main
    path: static/Hello-world/build
  - key: modaldialog
    path: static/Hello-world/build

Based on the context, i use the resource that i want like below.

const [context, setContext] = useState({});
useEffect(() => {
view
.getContext()
.then(setContext);
}, );
if(context.extension.modal) {
//the file used for key modal dialog
}
else {
//the file used for key main
}

Hope you will get your answer.