1. Manage Orders Tutorial
  2. Configure the List Item Template Columns

Configure the List Item Template Columns

Add a List View to list the orders and configure the data columns that show the customer name, order number, and order date.
  1. Click the manage-orders tab.
  2. In the Structure view, click Welcome Page Template if it's not already selected so that its properties are displayed in the Properties pane.
  3. In the General tab of the Welcome Page Template properties, click the + next to the Default slot.

    Clicking the + exposes a window where you can select a component.


    The Welcome Page Template properties pane General tab is shown, and the Default slot field outlined in red.
  4. Filter the component selection list and select the List View component.
    Your page should now display an unconfigured list view component.
    The Manage Order page displays with an unconfigured list.
  5. Select the List View node in the Structure pane to open its properties.
  6. Click the Quick Start tab in the List View Properties pane.
    The List View Properties pane displays with the Quick Start tab selected.
  7. Click Add Data.

    The Add Data window opens at the Locate Data stop.

  8. Expand fcsmRest to expose a list of available endpoints from this service.
  9. Select rraOrders and click Next to progress to the Select Template stop.
    The Add Data data source selection window displays with edit the fcsmRest list expanded and rraOrders selected.
  10. Select the List Item Template that contains three columns of text and a badge as shown in the following image.
    The Select List Item Template window displays with the template that contains three columns of text and a badge outlined in red.
  11. Click Next.
    The Bind Data stop of the Add Data window opens.
    The Bind Data stop of the Add Data window displays with a list of data and blank item template fields.
  12. Select or drag CustomerFirstName and CustomerLastName for the Primary Text field of the First Column tab.
  13. Click the Second Column tab.
  14. Select or drag OrderId for the Overline Text field.
  15. Select or drag OrderDate for the Primary Text field.
  16. Click the Third Column tab.
  17. Select or drag TotalAmount for the Meta Text field.
  18. Click the Badge tab.
  19. Select or drag OrderStatus for the Text field.
  20. Leave the Primary Key set to OrderId.
  21. Click Next.
  22. The final window needs no changes, so click Finish.
    You should see an order list on your Manage Orders page.
    The Manage Orders page displays with a list of orders in rows and three columns plus a badge, starting with customer first and last name, order ID and date, order amount, and a status badge.