1. Edit an Order Tutorial
  2. Create a Translatable Template String

Create a Translatable Template String

The Edit Order page requires a translatable title. To set up the page to use a translation bundle, you need to import the bundle to the page. Typically, you can do this directly from the property inspector, but there's an open Enhancement Request on the Simple Create and Edit Page Template Pattern component. So you need to do this manually for now.

  1. Edit the JSON file.
    1. In the edit-order page, click the JSON subtab.
    2. In the file, scroll to the end and find the line for components as shown here.
      The edit-order window, JSON tab displays with the code lines 135 to 145.
    3. In the components line, which is line 135, click the opening bracket to locate the end of the components section. This should be line 145.
      The edit-order window, JSON tab code displays, with row 135 selected and highlighted, along with the close bracket on line 145.
    4. Enter a comma after the closing bracket at line 145 and press Enter to create a line.
    5. Paste this configuration: 
      "translations": {
"self": [
"appUI_bundle"
]
}

      The edit-order, JSON tab is open with the added code displaying in rows 135 through 150.
  2. Create a translatable string.
    1. In the Navigator, click the Translations icon.
    2. In the Translations Bundle pane, click appUI_bundle to open the appUI_bundle tab.
    3. In the appUI_bundle tab, click +String.
      The Translation Bundle icon and appUI_bundle are outlined in red, and the appUI_bundle tab is open. The + String button is outlined in red.
    4. In the dialog box, Key field, enter EDIT_ORDER_PAGE_TITLE.
    5. In the String field, enter Edit Order.
    6. Click Create.
      The +String window displays with EDIT_ORDER_PAGE_TITLE entered in the Key field and 1 Edit Order highlighted in the String field
  3. Add the translatable string as the page title.
    1. Go the edit-order tab and click the Page Designer subtab.
    2. In the Structure view, select the Simple Create and Edit Page Template component.
    3. In the Properties pane, Page Title field, enter [[$translations.appUI_bundle.EDIT_ORDER_PAGE_TITLE()]].
    4. In the Page Subtitle field, delete the default value.

      The design view displays placeholder text for the subtitle but it's not displayed at runtime.

  4. Click Live to check what you've built so far.