Brand Your App UI with a Custom Root Page

A root page brands the pages in your App UI with a common header, footer, background, or other elements, to provide a consistent look and feel.

By default, the root page for all your App UIs is the redwood root page, which is provided by the Unified Application. The redwood page contains design elements from Oracle's new Redwood design platform, and looks like this: Description of redwooddefault.png follows
Description of the illustration redwooddefault.png

The Ask Oracle components on the shell page include:

You can override the redwood root page by creating your own custom page, then specifying that page in the App UI's Settings panel. To do this:

  1. In the Apps UI pane, click +, then select Create Application Root Page:
    Description of createrootpage.png follows
    Description of the illustration createrootpage.png
  2. In the Create Page dialog, enter a name for your root page and click Create.
    The root page is added to the Application Root Pages folder.
  3. Design your page, taking care to make certain areas customizable by your users, if desired. Certain Redwood components are available for you to use directly from the Components palette; the Components Exchange also has elements you may want to use.
  4. Select the App UI node in the Navigator, then click Settings.
  5. In the Application Root Page field, use the drop-down menu to apply the custom root page you just created. Description of rootpageinsettings.png follows
    Description of the illustration rootpageinsettings.png
Alternatively, you can create a custom root page directly from the Settings page, by clicking Create next to the Application Root Page field.
Defining a custom root page adds the hostRootPage property to the App UI's JSON metadata. For example, here's what you might see in the app.json file:
{ 
  "id": "sampleappui",
  "urlId": "sampleappui",
    ...  
  "hostRootPage": "myrootpage"
}
The hostRootPage's value myrootpage identifies your custom root page's ID. This value can also be an expression. Say you wanted to switch root pages between anonymous and authenticated users; you would create two root pages: one called anonymousRoot for anonymous users and another called authenticatedRoot for authenticated users, then update hostRootPage as follows:
{ 
    ...  
  "hostRootPage": "{{ $application.user.isAuthenticated ? 'authenticatedRoot' : 'anonymousRoot' }}"
}

Remember, only $application, $global, $initParams, and existing global JavaScript variables can be evaluated at the time the expression needs to be resolved.

Note:

A custom root page is typically used by App UIs within the same extension. To use a custom root page across extensions, you must configure the App UI in the other extension to point to the extension where the custom root page is defined. To do this:
  1. Open the App UI in the other extension and select its JSON tab.
  2. Add the hostRootPage property to the JSON metadata in the format "hostRootPage": "extId:customRootPage", where:
    • extId is the ID of the extension where the custom root page is defined (look for this value in the extension's Settings), and
    • customRootPage is the name of your custom root page.
    For example:
    { 
  "id": "sampleappui",
  "urlId": "sampleappui",
    ...  
  "hostRootPage": "site_myAppUiExtension:myrootpage"
}