1. Edit an Order Tutorial
  2. Add the Navigate Action to the Icon

Add the Navigate Action to the Icon

Now, you add the navigate action to the icon. In VB Studio, you use a visual editor to create business logic that responds to events occurring in the user interface. Each sequence of business logic is called an action chain. In this section, we're creating an action chain to dictate what happens when the user clicks the Edit Order icon. The action chain defines that the user will be navigated to the Edit Orders page.
  1. Create an event for the added action.
    1. In the Properties pane of the List Item Template, click the Events tab.
    2. Click +New Event and select On 'spSecondaryAction'.
      The List Item Template properties pane Events tab is shown with the +New Event dialog open.

      This is a page template event that's automatically triggered when users click the Edit Order icon on the Manage Orders page. You're navigated automatically to the Actions subtab for configuring the added secondary action.

  2. Add the navigate action.
    1. In the Actions subtab, Properties pane, ID field, replace the default value with EditOrderSpSecondaryActionChain.
      The manage-orders window, Actions tab and editor display, with the Action Chain pane open and the ID field outlined in red with the value EditOrderSpSecondaryActionChain entered
    2. In the Actions palette, search for navigate.
    3. Drag the Navigate to Page action and drop it on the + icon in the editor.
      The manage-orders window, Actions tab and editor display,with the Navigate to Page action in the editor.

      If you don't see the navigate action on the editor, refresh the browser page.

  3. Create the Edit Order page.
    1. In the Properties pane, Page field, click Create.
      The Navigate properties pane displays with the Create button in the Page field outlined in red
    2. On the Create Page dialog box, Page ID field, enter edit-order.
      The Create Page is shown with edit-order in the Page ID field and Simple Create and Edit Page Template selected.
    3. Select Simple Create and Edit Page Template and click Create.
    4. In the Properties pane, Page field, click Go to Page.

      The Edit Order page opens in a new tab.

  4. Preview your work.
    1. Go to the manage-orders tab and click the Page Designer tab to see your Manage Orders page.
    2. Select the Live view.

    3. Click an Edit Order icon.

      You should navigate to the new page you just created.
      The edit-order Page Designer is shown with a new page.