Modal dialog in jira:projectPage not across whole page

Forge Forge UI Kit and Custom UI
1

I am using Modal dialog in Forge Custom UI jira:projectPage, but the modal window is not across the whole Jira webpage, but just modal related to the page container. See screenshot. Is there a way to enlarge this?

image
image2584×960 184 KB

2

Are you using Modal from the Custom UI Bridge? If so that’s a weird bug, I wasn’t able to recreate it.

3

I am using Modal from Atlaskit. Was not aware of a Custom UI specific Modal. Thank you very much for the hint. Will try it the next day. :slight_smile:

1 Like
4

No worries, I think we need to improve our documentation on this :+1:

5

Can you provide some additional guidance on what needs to go where?

I have static/hello-world/src/App.js with function App() { ... return (<div><Button>Open Modal</Button></div>); }. I guess inside this function App I define the const modal = new Modal({...});?

But where to put the modal-resource.js? Is it required to put that in a separate folder under static? And that requires its own npm build process?

Or can I define the modal dialog also inside the new Modal({})?

And could you give an example on where and how to create a form in this modal?

I am sorry, beginners questions.

6

@AdamMoore Could you provide some hints on how to use Modal for Custom UI? See questions above.

7

Hey,

Sorry for the slow response on this but maybe this will still help.

You declare the modal resource in your manifest like this:

modules:
  jira:globalPage:
    - key: modal-tester-hello-world
      resource: main
      title: modal-tester
      route: hello-world
resources:
  - key: main
    path: static/hello-world/build
  - key: my-modal
    path: static/my-modal/build

Then open the modal in your app with something like this:

import React from 'react';
import { Modal } from '@forge/bridge';

const App = () => {
    const modal = new Modal({
        resource: 'my-modal',
        size: 'max'
    });
    const handleClick = e => {
        modal.open();
        console.log('Clicked.');
      }
    return (
        <div>
            <button onClick={handleClick}>Modal!</button>
        </div>
    );
};

export default App;

And some code for the my-modal App.js like this

import React from 'react';

const App = () => {
  return (
    <div>
        I'm a modal
    </div>
  );
}

export default App;

The part that can trip folks up is not using relative paths when accessing the Custom UI assets. See more here: https://developer.atlassian.com/platform/forge/custom-ui/#accessing-static-assets

8

Thank you very much for helping me with some sample code.

(As a React newbie) I had to learn that I have to create a second React app in static/my-modal. Not just put a my-modal-resource.js in another folder how I misunderstood from the documentation.

I created this second React app for the modal by copying my static/hello-world originally created by forge create as part of jira:projectPage. Is there a better way to create a blank new React app inside a forge project?

The modal should actually be a form with some input fields. Should I use ModalBody, ModalFooter, ModalHeader, ModalTitle etc from Atlaskit?

And I guess the submit would be handled inside the modal React app and you viewport.close when done?