1. Manage Orders Tutorial
  2. Configure the Page Template Header

Configure the Page Template Header

In this section, you configure the search page title, which currently displays the default content.

  1. Open the manage-orders page.
  2. If it's not already selected, in the Page Designer's Structure view, select Welcome Page Template so that you can see its properties in the Properties pane.
    The manage-orders, Page Designer displays with the Welcome Page Template component selected and outlined in red in the Structure panel, also outlined in red. The Properties panel for the component is outlined in red.
  3. Set the default value for the page title. The value for the page title is held in a variable.
    1. In the Properties pane, All tab, find the Page Title field.
    2. Hover over the Page Title field and select the Make String Translatable globe icon.
      The Welcome Page Template Properties panel, Page Title field displays with the Make String Translatable text visible after hovering over the globe icon.
    3. In the Translatable String dialog box, make sure that the Use Existing option is selected.
    4. In the Search for existing string field, enter page in the search filter, and select the entry found.
      The Translatable String window displays with the Use Existing option selected and outlined in red, and the Search for existing string field outlined in red with page in the search field.
    5. Click Use.
      The Translatable String window displays with the Use Existing option selected, and in the Use exsiting string fields, appUI_bundle is in the Bundle field, MANAGE_ORDERS_PAGE_TITLE in the Key field, Manage Orders in the String field, and the Use button outlined in red.
      The Page Title field displays the string value of the referenced translation bundle entry. You should be able to see the Manage Orders page title.
      The manage-orders, Page Designer displays with Manage Orders displaying as the page title.
      Note: If you don't see the Manage Orders page title, or the Properties pane doesn't match what you see here, try to refresh the browser.
  4. Upload a new background and foreground graphic for the page header to replace the default images.
    1. Right-click and save the following image as illust-welcome-banner-bg-04.png. The image is transparent, so it looks blank, but serves as the background graphic.
      Background transparent image
    2. Right-click and save the following image as illust-welcome-banner-fg-04.png.
      Graphic image of people building with blocks
    3. In the AppUI pane, expand Resources.

      You see a list of Resource folders.

    4. Click the + icon next to images.
      The Import Resources window displays.
      Import Resources window with options to drag and drop or provide import location of resource.
    5. Drag and drop the first image that you downloaded and click Import, or you can click inside the Drag and Drop field to select the image from your files and click Import.
    6. Repeat the previous step for the second image.
  5. Make the images available as variables.
    1. On the manage-orders tab, click the Variables subtab.
    2. Click + Variable to add a variable.
    3. Enter fgImage in the ID field. Leave type as String.
    4. Click Create & New to save this one and easily add a variable for the second image.
    5. Enter bgImage in the ID field. Leave type as String.
    6. Click Create.
      The Variables tab is shown with bgImage and fgImage included in the list of Variables.
    7. Select the bgImage variable, and in the Properties pane, find Default Value.
    8. Enter oj-ux-icon/illust-welcome-banner-bg-04.png in the Default Value field.
      The bgImage variable Properties pane is shown with oj-ux-icon/illust-welcome-banner-bg-04.png entered in the Default Value field, outlined in red.
    9. Select the fgImage variable, and in the Properties pane, find Default Value.
    10. Enter oj-ux-icon/illust-welcome-banner-fg-04.png in the Default Value field.
  6. Add the image variables to the page properties.
    1. Click the Page Designer tab to view your page.
    2. Select the Welcome Page Template component in the Structure pane.
    3. Select the All tab of the Propeties pane.
    4. Enter [[ require.toUrl($variables.bgImage) ]] in the Illustration background source URL field.
    5. Enter [[ require.toUrl($variables.fgImage) ]] in the Illustration foreground source URL field.

  7. Click Live to see your app in Live mode.