1. Manage Orders Tutorial
  2. Format the Badge and List Fields

Format the Badge and List Fields

In these steps, you format the order status badge position, and format the data for the Date and Total Amount fields.
  1. Select List Item Template in the Structure view to view its properties.
  2. In the List Item Template properties, General tab, click Badge.
  3. Change the Position attribute from Trailing to Leading to move the badge to the left position of each list row.
  4. In the Status field, enter [[$current.data.OrderStatus === "PROCESSING" ? "info" : "default"]].
    The Badge window displays with the Status field reflecting the text you entered and the Position field Leading selected.
  5. Return to the List Item Template properties, and click to open the Data tab.
    The List Item Template properties Data tab is shown.
  6. Click the More Properties (>) chevron of the [[{"overlineText"$current.data.OrderDate]] row.
  7. Replace the value in the Primary Text field with [[$application.functions.formatDate($current.data.OrderDate)]].
  8. Return to the Data tab.
  9. Click the More Properties (>) chevron of the [[{"metsText"$current.data.TotalAmount]] row.
  10. Replace the value in the Meta Text field with [[$application.functions.formatCurrency($current.data.CurrencyCode, $current.data.TotalAmount)]].
    The image shows the List Item Template, Data Tab, attributes of the third column with the value you entered in the Meta Text field.
  11. Click Live to view your application in Live mode. You should see a list with leading order status badges and formatted data.

    The Manage Orders Live view is shown with leading order status badges and formatted data.
Tip: Here, you configured columns of the list item template component according to specific instructions, but in real development scenarios, you learn about how to configure components by reading uptake steps provided in component readme documentation and UX design specifications. You find information about configuring Redwood components in the Components tab.
  1. In the Navigator, click the Components icon.
  2. Click the Installed tab for Redwood components installed in the base Fusion Applications app.
    The Components, Installed tab is shown with the Components icon and Installed tab outlined in red.
  3. Click a component name to open the component readme and uptake instructions in a new tab.

Congratulations! You built and configured your first Redwood page. Proceed to the Hands-on: Edit an Order tutorial.