Add navigation to application

Learn how to add in-app and external navigation with pages, menu and query params

Both in-app and external navigation is supported by UI Bakery. UI Bakery application can contain multiple pages. To create a page, open a menu in the left sidebar and click the Plus button:

Create a page

Navigation

There are several options how to perform navigation inside of the application:

• Using Link component

• Using Button component

• Using Navigation action step

• Using Menu component

Navigation can be made to an internal application page as well as to an external website. To create a link, simply add a component and configure it to point to an internal or external page:

Configure link

Passing dynamic parameters - button and link case

In the case of a button or a link, you can use a Query params property of a component to pass dynamic parameters to a detail page.

Make sure that the Selected row index of your table is set to -1

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

• On the Query params section, switch to JS mode and configure a primary key of the object:

Passing query params

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

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

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

Receiving query params

That's it, now if you select a row in a master page table and then click the Show Customer button - you will be navigated to a child page with a preloaded customer displayed in the detail component:

Complete navigation flow

Passing dynamic parameters - Navigation action step

You can also make navigation as a result to other events like table row select or form submit with the help Navigation action step:

• create a new Action

• choose the Navigation step, set the destination page {{ routes.customer.url }} and configure query params:

Navigation step

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

Navigation to an external page

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

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

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

If you need to open the external link 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 "Run Action" button. However, if the code is executed as a result of user interaction (e.g. button click), it should function correctly.