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
3
4
5
    <script src="{{hostScriptUrl}}"
       type="text/javascript"
       data-options="sizeToParent:true;hideFooter:true">
</script>

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "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

Type
string
Required
Yes
Pattern
^[a-zA-Z0-9-]+$
Description

A key to identify this module.

This key must be unique relative to the add on, with the exception of Confluence macros: Their keys need to be globally unique.

Keys must only contain alphanumeric characters and dashes.

The key is used to generate the url to your add-on's module. The url is generated as a combination of your add-on key and module key. For example, an add-on which looks like:

1
2
3
4
5
6
7
8
{
    "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

Type
i18n Property
Required
Yes
Description

A human readable name.

Represents a string that can be resolved via a localization properties file. You can use the same i18n Property key and value in multiple places if you like, but identical keys must have identical values.

Example

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

Properties

value
Type
string
Required
Yes
Description

The human-readable default value. This will be used if no translation exists.

i18n
Type
string
Description

The localization key for the human-readable value. Translations for the keys are defined at the top level of the add-on descriptor.

url

Type
string
Format
uri-template
Required
Yes
Description

The url to retrieve the content from. This must be relative to the add-on's baseUrl.

cacheable

Type
boolean
Defaults to
false
Description

Returns whether the URL should be cacheable. Cacheable URLs are taken directly from the add-on descriptor, and lack all additional query parameters:

  • standard iframe query parameters
  • product context parameters
  • JWT token

conditions

Type
[Single Condition,Composite Condition, ... ]
Description

Conditions can be added to display only when all the given conditions are true.

The supported conditions for pages are:

Common conditions

  • addon_property_exists
  • addon_property_equal_to
  • addon_property_equal_to_context
  • addon_property_contains_any
  • addon_property_contains_all
  • addon_property_contains_context
  • addon_property_contains_any_user_group
  • user_is_admin
  • user_is_logged_in
  • user_is_sysadmin
  • addon_is_licensed
  • feature_flag

Jira conditions

  • entity_property_exists
  • entity_property_equal_to
  • entity_property_equal_to_context
  • entity_property_contains_any
  • entity_property_contains_all
  • entity_property_contains_context
  • entity_property_contains_any_user_group
  • can_use_application
  • project_type
  • has_global_permission

Confluence conditions

  • content_property_exists
  • content_property_equal_to
  • content_property_equal_to_context
  • content_property_contains_any
  • content_property_contains_all
  • content_property_contains_context
  • content_property_contains_any_user_group
  • space_property_exists
  • space_property_equal_to
  • space_property_equal_to_context
  • space_property_contains_any
  • space_property_contains_all
  • space_property_contains_context
  • space_property_contains_any_user_group

icon

Type
Icon
Description

An optional icon to display with the link text or as the link, specified by URL to its hosted location. You can specify a particular width and height for the icon. Most link icons in Atlassian applications are 16 by 16 pixels.

Defines an icon to display.

Example

1
2
3
4
5
6
7
{
  "icon": {
    "width": 16,
    "height": 16,
    "url": "/my-icon.png"
  }
}

Properties

url
Type
string
Required
Yes
Description

The URL of the icon. Your icon needs to be hosted remotely at a web-accessible location. You can specify the URL as an absolute URL or relative to the add-on's base URL.

height
Type
integer
Description

The height in pixels of the icon image.

width
Type
integer
Description

The width in pixels of the icon image.

location

Type
string
Description

The location in the application interface where the page's link should appear. For the Atlassian application interface, a location is something like the coordinates on a map. It points to a particular drop-down menu or navigation list in the UI.

Places in the Atlassian UI are identified by what are known as "well-known locations." For example, the "system.admin/globalsettings" location is in the administrative menu link on the left side of the Administration Console.

Find product locations with the web fragment finder:

If the location property is not specified, a default location is used:

Jira:

  • generalPage: system.top.navigation.bar
  • adminPage: advanced_menu_section/advanced_section

Confluence:

  • generalPage: system.help/pages
  • adminPage: system.admin/marketplace_confluence

You may wish to have no link to the page shown anywhere - for example, if you are using the page as the target of a JavaScript API dialog. In this case, set the value of location to "none".

params

Type
Object
Description

This object represents a map of key/value pairs, where each property name and value corresponds to the parameter name and value respectively.

Example

1
2
3
4
5
6
{
  "params": {
    "someOtherProperty": "someValue",
    "myCustomProperty": "myValue"
  }
}

weight

Type
integer
Defaults to
100
Description

Determines the order in which the page's link appears in the menu or list.

The "lightest" weight (i.e., lowest number) appears first, rising relative to other items, while the "heaviest" weights sink to the bottom of the menu or list.

Built-in web items have weights that are incremented by numbers that leave room for additional items, such as by 10 or 100. Be mindful of the weight you choose for your item, so that it appears in a sensible order given existing items.