Filter by keyword

Page

On This Page

    Want to quickly build your UI?

    Pages (for Confluence, Jira) in Forge let you quickly build user interfaces consistent to Atlassian Design using pre-built components.

    Already have a Connect app? Start adding Forge features in less than an hour.

    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
6
    
<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
27
    {
  "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
    Max length
    100
    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
9
    {
    "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
4
    {
  "value": "My text"
}

    Properties

    value
    Type
    string
    Max length
    1500
    Required
    		Yes
    Description

    The human-readable default value. This will be used if no translation exists. Only the following HTML tags are supported: b, i, strong, em, and code.

    i18n
    Type
    string
    Max length
    300
    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
    		[Composite Condition, Single 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
8
    {
  "icon": {
    "width": 16,
    "height": 16,
    "url": "/my-icon.png"
  }
}

    Properties

    url
    Type
    string
    Format
    uri
    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
    Max length
    100
    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 Extension Point Finder:

    You can also find all Confluence locations on this page.

    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
7
    {
  "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.

    Rate this page: