HtmlApplication Methods

This section describes the methods used to manipulate the application flow.

back()

Navigates to the URI preceding the current one in the navigation history.

canBack()

Returns a Boolean value indicating whether or not the navigation history contains items except for the root item.

Return Value: Boolean
If the navigation history contains items, the value is true. Otherwise, the value is false.

clearState()

Removes the information on the navigation stack saved to the state storage using the saveState method.

navigate(uri, options)

Navigates to the specified URI.

Parameters:
A string containing the URI to which the application should navigate.
options: Object
Takes on an object containing additional navigation parameters.

The following values can be passed as the uri parameter.

  • string
    The string must confirm the routing rule (one of the routing rules) that is registered in the application's router. For details on how to declare a routing rule, refer to the Declare a Routing topic.

    JavaScript
    app.router.register(":view/:id", { view: "home", name: "World" });
    JavaScript
    app.navigate('contacts/1');
  • object
    This object must expose the fields that correspond to the routing rule parameters.

    JavaScript
    app.router.register(":view/:id", { view: "home", name: "World" });
    JavaScript
    app.navigate({
        view: 'contacts',
        id: 1
    });

Using the second parameter of this function, you can specify the following parameters.

  • root
    If you pass an object with the root field set to true as the second parameter of the navigate method, the specified view will be invoked as a root view. This means that a new navigation stack will be created as if you used the application's global navigation to navigate to this view. The view that will be invoked from the root view with an unspecified root parameter will be saved to navigation history based on this root view.

    JavaScript
    app.navigate('OrderItems/' + orderId, { root: true });
  • target
    You can pass an object with the target field set to the following values:

    • 'blank' - adds the invoked view to the navigation history (the default value);
    • 'current' - replaces the current view in the navigation history with the invoked view.

      JavaScript
      app.navigate('OrderItems/' + orderId, { target: 'current' });
  • direction
    Specify the direction in which the layout will animate the transition to the view. This option can be set to the "backward", "forward" or "none" value.

To learn more about root views and navigation history, refer to the Navigation History topic.

If none of the parameters are specified, the navigate method will display the view that is set as a default view in the routing rule (see the Declare a Routing topic).

To learn more about the navigate method and other methods used to navigate to a view, refer to the Navigate to a View topic.

To navigate back to a previous view, use the back method, or define a command. The command will be visualized in the required place of the view and navigate to the previous view if you set the '#_back' method for the action option. For details, refer to the Navigate Back topic.

restoreState()

Restores the navigation stack saved by the saveState() method to the state store, and applies it to the application.

When calling this method, the saved navigation stack becomes the current navigation stack in the application, and the view that was displayed at the moment the state was saved is displayed again.

saveState()

Saves the current navigation stack to the state storage.

Use this method to save the current navigation stack to a state storage when required, e.g., when the application is closed. By default, the session storage is used as a state storage. You can use another storage specifying it via the stateStorage option of the HtmlApplication object.

The state stored by this method is the following:

  • items in the current navigation stack;
  • the position of the displayed view in the current navigation stack.

You can restore the state saved by this method. To do this, use the restoreState() method. In addition, you can remove the saved state by using the clearState() method.