React SPA Framework - HtmlApplication - Methods
back()
The navigation history is built in different ways in mobile and web applications. To learn the difference, read the Navigation History in Mobile Apps and Navigation in Web Apps topics.
canBack()
When the navigation system operates in 'website' mode, this method always returns true. In 'mobileApp' mode, this method returns false if the current view is a root view in the navigation history; otherwise, it returns true.
createNavigation(navigationConfig)
Use this method to create navigation commands dynamically. The created commands are mapped to the "global-navigation" command container. You can access them via the application's navigation field. To display these navigation commands within the navigation controls used in the application's layouts, call the renderNavigation method.
getViewTemplate(viewName)
Use this method to get an HTML template of a view. The name passed as the method's parameter should be the value of the name option specified for the dxView component representing the searched view.
getViewTemplateInfo(viewName)
Returns a configuration object used to create a dxView component for a specified view.
The name passed as the method's parameter should be the value of the name option specified for the requested dxView configuration object.
loadTemplates(source)
A Promise that is resolved after the template is loaded or rejected after loading failed. It is a native Promise or a jQuery.Promise when you use jQuery.
Use this method to provide an HTML template for a view or layout dynamically. When a template for this view/layout is required, the loaded template will be found in the collection of view/layout templates.
The markup that is passed as the method's parameter should be defined using the dxView/dxLayout markup components in the same manner as a view/layout that is defined statically.
<div data-options="dxView : { name: 'MyView', title: 'My view' } "> <div data-options="dxContent : { targetPlaceholder: 'content' } "> ... </div> </div>
<div data-options="dxLayout: { name:'default', platform:'ios' }"> ... </div>
See Also
navigate(uri, options)
Name | Type | Description |
---|---|---|
root |
Indicates whether to create a new navigation stack based on the navigated view. |
|
target |
Specifies whether to add the navigated view to the navigation stack or replace the current view. The following values are accepted: 'blank' and 'current'. |
|
direction |
The direction in which the layout controller will animate the transition to show the view. The following values are accepted: 'backward', 'forward' or 'none'. |
|
modal |
Specifies whether the navigated view should be shown in modal mode. |
The following values can be passed as the uri parameter.
string
The string must confirm the routing rule that is registered in the application's router. For details on how to declare a routing rule, refer to the Declare a Routing topic.JavaScriptapp.router.register(":view/:id", { view: "home", name: "World" });
JavaScriptapp.navigate('contacts/1');
object
This object must expose the fields that correspond to the routing rule parameters.JavaScriptapp.router.register(":view/:id", { view: "home", name: "World" });
JavaScriptapp.navigate({ view: 'contacts', id: 1 });
Using the second parameter of this function, you can specify the following parameters.
root
This field can be set in a mobile application only. 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 the navigation history based on this root view.JavaScriptapp.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.
'back' - replaces the previous view in the navigation history with the invoked view.
JavaScriptapp.navigate('OrderItems/' + orderId, { target: 'current' });
direction
This field can be set in a mobile application only. 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.modal
Set this field to true to display the navigated view in a modal popup window. For this purpose, add the Popup Layout to your application. This layout uses the Popup widget to display a view in a popup window. By default, the SimpleLayoutController controller is used to manage popup window content. So, when defining a modal view, find out which content placeholders and command containers are available in the Simple Layout. If the navigated view should always be displayed in a popup modal window, specify its modal option. In this instance, you will not have to specify this parameter each time you navigate to this view.
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).
As an alternative to the navigate method, you can introduce a command and set its onExecute option to a string or an object representing a URL to navigate to. In this instance, the root, target and direction options can be set for the command as well to define the navigation details.
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 with the onExecute option set to the '#_back' method. For details, refer to the Navigate Back in Mobile Apps and Navigation in Web Apps topics.
renderNavigation()
Renders navigation commands to the navigation command containers that are located in the layouts used in the application.
If you specify a set of navigation commands dynamically, call the renderNavigation method. This method clears the navigation command container and renders the navigation control representing this command container so that the commands created dynamically are displayed. This is performed in each layout that is included in the application's layout set if the layout includes a control representing a global navigation command container.
restoreState()
Calls the restoreState() method of the application's StateManager object.
Currently, only information about the current navigation stack is saved by the saveState() method. So, when calling the restoreState() method, the saved navigation stack becomes the current navigation stack in the application, and the view that was displayed the moment the state was saved is displayed again.
saveState()
Calls the saveState method of the application's StateManager object.
By default, the application's state manager has only the navigation manager in the collection of state sources. So when calling this method, the navigation manager saves the current navigation history. Note that when the navigation system works in the website mode, the navigation manager does nothing to save the state. In the mobileApp mode, the current navigation stack is saved to a state storage. In particular, the following information on the navigation stack is saved.
- Items in the current navigation stack
- The position of the displayed view in the current navigation stack
templateContext()
Provides access to the object that defines the current context to be considered when choosing an appropriate template for a view.
Currently, the object returned by this method specifies the current device orientation only. But you can add a custom context to this object so that it is also considered when choosing an appropriate template for a view. For this purpose, use the option(optionName, optionValue) method of TemplateContext object. For details, refer to the Context Specific Markup topic.
If you have technical questions, please create a support ticket in the DevExpress Support Center.