1. Manage Orders Tutorial
  2. Create a New App UI and Manage Orders Page

Create a New App UI and Manage Orders Page

In this section, you create a page to view orders in the fictional Orders system. You start by creating a new App UI. An App UI is simply an application that includes Visual Builder pages and flows. All App UIs are equal members of the Oracle Cloud Applications ecosystem, including App UIs that customers build. Technically, every App UI is an extension of the FA Unified App. Through the Unified app, all App UIs share the same base services (security, JS library versions, App Events, and State etc.) and the same user experience. App UIs that Oracle builds and that customers build are equal peers in the Oracle Cloud Applications ecosystem.

  1. In the App UIs pane, click + App UI.

    Tha App UIs pane displays, with the +App UI button outlined in red.
  2. Enter field values in the Create App UI dialog box.
    1. In the App UI Name field, enter <yourguid>-orders. For example, jsmith-orders.
    2. Verify that the App UI ID field is auto-populated with the name you enter in the App UI Name field.
      Note: If the App UI ID field is not auto-populated, enter the same name as you entered in the App UI Name field.
  3. Click Create.
    The Create App UI window displays with the Create button outlined in red, and akhan-orders entered in the App UI Name and App UI ID fields.

    The <yourguid>-orders tab opens in the page canvas.


    A tab displays on the canvas with the App UI name, in this image, the tab is akhan-orders.
  4. Close the <yourguid>-orders tab.
    Tip: At this point, you'll see a message on the top of the page that you made some changes to your repository. Close that dialog box for now.
  5. Create the Manage-Orders page.
    1. In the App UIs pane, next to <yourguid>-orders → main, click Create Page (+).
    2. Select Create Page.

      The Create Page window displays.

    3. Enter manage-orders in the Page ID field.
    4. Select the Welcome Page Template.
      The Create Page window is shown with four different page template cards displayed, and the Welcome Page Template option selected.
    5. Click Create.

      The Redwood Welcome Page Template, containing Redwood-approved styles and components for viewing our list of orders, is added to your page.

Tip: If the Properties pane doesn't show the Welcome Page Template component yet, click Welcome Page Template on the canvas, above the Redwood color strip, to show the Properties pane.