INTRODUCTION TO SYSTEM ACTIONS AND PROTOTYPING

Prototyping with Navigation actions

The Navigation category contains actions with different functionalities that allow navigation within the app.

To add an action, we use the Properties panel of the relevant element or screen.

  1. Select the element you want to add an action to. Within the scope of this application, let's select the Menu icon on the Dashboard screen we have prepared before.
  2. Properties ⟶ Add Actions ⟶ Navigation and examine the action list. Under the Navigate heading, there are actions such as Generate Link, Get All Menu Items, Get Authorized Menu Items, Go Back and Navigate.

Let's proceed by selecting the Navigate action.While the Navigate action allows you to switch between screens, it leaves the screen opening method of the screen to be opened to your preference.

Current Screen allows a new screen to be opened on the open screen.

New Tab allows the screen to be opened in a new tab in the browser.If you want to open another screen on the current open screen, you can use Drawer.

Drawers appear in the screen by sliding on the right, left, top and bottom edges of the open screen.

Modal / Pop-up is an auxiliary window that opens in the center of the open screen and in the size you specify.

Select the Left Menu screen as the screen to be opened from the screen that appears under the Navigate action. Select the screen opening method as Drawer. Select the screen opening direction as Left and complete the action addition process via the Close button.Here is your prototype example ready!

The Navigation category contains actions with different functionalities that allow navigation within the app.

To add an action, we use the Properties panel of the relevant element or screen.

  1. Select the element you want to add an action to. Within the scope of this application, let's select the Menu icon on the Dashboard screen we have prepared before.
  2. Properties ⟶ Add Actions ⟶ Navigation and examine the action list. Under the Navigate heading, there are actions such as Generate Link, Get All Menu Items, Get Authorized Menu Items, Go Back and Navigate.

Let's proceed by selecting the Navigate action.While the Navigate action allows you to switch between screens, it leaves the screen opening method of the screen to be opened to your preference.

Current Screen allows a new screen to be opened on the open screen.

New Tab allows the screen to be opened in a new tab in the browser.If you want to open another screen on the current open screen, you can use Drawer.

Drawers appear in the screen by sliding on the right, left, top and bottom edges of the open screen.

Modal / Pop-up is an auxiliary window that opens in the center of the open screen and in the size you specify.

Select the Left Menu screen as the screen to be opened from the screen that appears under the Navigate action. Select the screen opening method as Drawer. Select the screen opening direction as Left and complete the action addition process via the Close button.Here is your prototype example ready!

Yardımcı kaynaklar

Glossary