Page

Page modules allow add-ons to insert new pages into Atlassian products. These can be automatically resized to the width and height of your add-on's content. The location attribute defines where links to the new page appear.

Each type of page displays differently:

• generalPages - have no extra styling and by default a link to the page is displayed in the main navigation menu. Use these pages in order to display general content.
• jiraProjectPages - (Jira only) appear in the project sidebar. Use these pages in order to provide project-specific content. The project page module has a separate documentation page here: Project Page.

You can also define a page module to be shown when a user is administering your add-on via the Universal Plugin Manager. An add-on can only define a single page of this type. It should each be defined in the descriptor as a single JSON object, not as a JSON array like other modules.

• postInstallPage - A "Get Started" button will link to this page from both the add-on's entry in Manage Add-ons and from the dialog that the user is shown when they successfully install the add-on. Use this page to provide introductory information about the add-on to the user.

The content for a page module is injected into the Atlassian application in the form of a "seamless" iframe. Seamless iframes are regular HTML iframes but with the characteristics described below.

As implied here, for most page content modules, you do not need to be concerned with iframe sizing. It's all handled for you. However, an exception exists for inline macros.

• Their size is based on the page height and width inside the iframe (i.e., no scrollbars)
• They are dynamically resized based on the inner content or relative browser window sizing
• They appear without borders, making them look like a non-iframed fragment of the page
• For general-pages, you can also opt to size your iframe to take up all of the host product's available vertical space (instead of resizing to its internal content).
• To do this, add the data-options attribute "sizeToParent:true" in the script tag for all.js. It is also possible to hide footer for such pages.

For example, using ACE:

1
2

<script src="{{hostScriptUrl}}"
       type="text/javascript"
       data-options="sizeToParent:true;hideFooter:true">
</script>

1
2
{
  "modules": {
    "generalPages": [
      {
        "url": "/my-general-page",
        "icon": {
          "width": 80,
          "height": 80,
          "url": "/maps/icon.png"
        },
        "name": {
          "value": "My General Page"
        },
        "key": "my-general-page"
      }
    ],
    "postInstallPage": {
      "url": "/my-post-install-page",
      "name": {
        "value": "My Post-Install Page",
        "i18n": "mypostinstallpage.name"
      },
      "key": "my-post-install-page"
    }
  }
}

Properties

key

Example

For example, an add-on which looks like:

1
2
{
    "key": "my-addon",
    "modules": {
        "configurePage": {
            "key": "configure-me",
        }
    }
}

Will have a configuration page module with a URL of /plugins/servlet/ac/my-addon/configure-me.

name

Example

1
2
{
  "value": "My text"
}

Properties

url

cacheable

conditions

icon

Example

1
2
{
  "icon": {
    "width": 16,
    "height": 16,
    "url": "/my-icon.png"
  }
}

Properties

location

params

Example

1
2
{
  "params": {
    "someOtherProperty": "someValue",
    "myCustomProperty": "myValue"
  }
}

weight