Adding navigation to application

UI Bakery supports both in-app and external navigation. Let's explore these options in more details.

There are several ways of using navigation inside the application:

Using Link component
Using Button component
Using Navigation action step
Using Menu component

You can configure navigation both to an internal application page as well as to an external website. To create a link, simply add a component and configure it to lead to an internal or external page:

When using Link or Button components, you can pass dynamic parameters to a detail page configuring the Query params property of the component.

For example, to display a selected object on a child page with a button click you will need to do the following:

Switch to JS mode of the Query params property and configure the primary key of the object:

{
  id: {{ui.customersTable.selectedRow.data.customer_id}}
}

In this example, the currently selected customer id will be sent as an id query parameter to the Customer page.

Receive the URL query parameter on a child page using the {{ activeRoute.queryParams.id }} variable:

That's it! Now, if you select a row in the master page table and then click the Show Customer button, you will navigate to a child page with a selected customer displayed in the detail component:

You can also configure navigation as a result of other events like Table row select or Form submit. This can be done using the Navigation action step:

Create a new action.
Select the Navigate operation and set the destination page as {{ routes.customer.url }} .
Next, configure the id query param as described below:

{{ui.customersTable.selectedRow.data.customer_id}}

Now, when selecting a row in the master page table, you'll immediately navigate to the child page with the selected customer displayed.

This option can also be useful when creating a redirect after a form submit.

You can also configure navigation using the Menu component. To do so, simply drag the Menu component from the Components panel and drop it to the working area. The existing pages in your app will be displayed in the menu automatically.

If you want to add an item to your menu that will redirect to an external link, follow the next steps:

Clear the Update menu automatically checkbox to modify the Items property.
Add a new menu item in the following format:

{
    title: 'Documents',
    link: '/docs'
  }

Next, navigate to the Triggers section of the component and create a new action for On Item Click.
Select JavaScript Code and add the following code:

if (data.link === '/docs') {
	window.open('https://docs.uibakery.io/');
}
return {{data}}

In the code above, we used UI Bakery Docs as an example. Replace URL with the one you want to open on clicking the new menu item.

Now, when clicking the new menu item, the external link will open in a new tab.

(Optional) If you want the external link to open in the same tab, you need to add another parameter to the function:

window.open('https://docs.uibakery.io/', '_parent')

If you need to configure redirect to an external page following a certain trigger, follow these steps:

Add an additional Code step to your action and specify the following code:

const a = document.createElement('a');
a.href = 'https://google.com';
a.target = '_top';
a.click();

If you want the external link to open in a new tab, use this code:

window.open('https://google.com');
return 1;

Please be aware that when running this code on certain browsers, it may trigger a Blocked popup warning message. This is especially likely to occur when the code is executed using the Execute action button. However, if the code is executed as a result of user interaction (e.g. button click), it should function correctly.