App Bar

The app bar is a sticky header component. It can display a drawer or avatar, depending on the configuration.

Note

• Up to one app bar can be placed per UI. The drawer and avatar menus do not open on the editor. You can see them from Preview or Deploy.
• The app bar is always the foremost component. Components cannot be placed in front of the app bar.

Properties

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	app_bar	id	string	app_bar	The [id] property cannot be set by action.
2	Height	Number	64	height	number	300	Height of the component
3	Left	Number	12 12 [Tablet] 4 [Mobile]	paddingLeft	number	12 12 [Tablet] 4 [Mobile]	Left padding of the app bar
4	Right	Number	12 12 [Tablet] 4 [Mobile]	paddingRight	number	12 12 [Tablet] 4 [Mobile]	Right padding of the app bar
5	Color	String Color Picker		color	string		Color setting of the component
6	Title Color	String Color Picker		titleColor	string		Title color setting
7	Visibility	Boolean	ON	visibility	boolean	true	Component visibility state
8	Cache Disabled	Boolean	OFF	cacheDisabled	boolean	false	Cache usage state for avatar image
9	Drawer	Boolean	ON	drawer	boolean	true	Display state of the drawer
10	Drawer Width	Number		drawerWidth	number		Width setting of the drawer
11	Drawer Icon Color	String Color Picker		drawerIconColor	string		Drawer icon color setting Property added in v3.4.0
12	Drawer Items	Tabular [Detail 1]	[Detail 1]	drawerItems	array of object	[Detail 1]	Drawer items setting
13	Avatar	Boolean	OFF	avatar	boolean	true	Display state of the avatar
14	Avatar Image	String		avatarImage	string		Avatar image setting
15	Letter	String		avatarLetter	string		Character displayed on avatar
16	Avatar Color	String Color Picker		avatarColor	string		Avatar background color
17	Avatar Badge	Boolean	OFF	avatarBadge	boolean	false	Display state of avatar badge
18	Avatar Click Event	String 1. None 2. Menu	None	avatarClickEvent	string	menu	Action when avatar is clicked
19	Avatar Menu Items	Tabular [Detail 2]	[Detail 2]	avatarMenuItems	array of object	[Detail 2]	Avatar items setting
20	Additional Components	Boolean	OFF	additionalComponents	boolean	false	Display state of additional components Added in v4.1.0.
21	Additional Components Items	Tabular [Detail 3]	[]	additionalComponentsItems	array of object	[]	Additional components items setting Added in v4.1.0.
22	Title	String	App Bar	title	string	App Bar	Title display of the app bar

[Details 1] Drawer

The default status is registered as follows. Register from the "ADD" button. To delete, select the check box and click the "DELETE" button.

Select	ID	Icon	Label	Click Event	NEXT UI	Detached Action	URL	Divider
Checkbox	item1	MoveToInbox	Inbox	None				No
Checkbox	item2	Mail	Starred	None				No
Checkbox	item3	MoveToInbox	Send Email	None				No
Checkbox	item4	Mail	Drafts	None				Yes
Checkbox	item5	MoveToInbox	All Mail	None				No
Checkbox	item6	Mail	Trash	None				No
Checkbox	item7	MoveToInbox	Spam	None				No

[{"id":"item1","icon":"MoveToInbox","label":"Inbox","clickEvent":"None","nextUi":"","url":"","divider":false},{"id":"item2","icon":"Mail","label":"Starred","clickEvent":"None","nextUi":"","url":"","divider":false},{"id":"item3","icon":"MoveToInbox","label":"Send Email","clickEvent":"None","nextUi":"","url":"","divider":false},{"id":"item4","icon":"Mail","label":"Drafts","clickEvent":"None","nextUi":"","url":"","divider":true},{"id":"item5","icon":"MoveToInbox","label":"All Mail","clickEvent":"None","nextUi":"","url":"","divider":false},{"id":"item6","icon":"Mail","label":"Trash","clickEvent":"None","nextUi":"","url":"","divider":false},{"id":"item7","icon":"MoveToInbox","label":"Spam","clickEvent":"None","nextUi":"","url":"","divider":false}]

Note

• The options for the drawer click event are None | Next UI | URL | Action | Detached Action.
• If you select the click event "Action" in the drawer, you will be able to launch the action editor from the context menu of the component.
• If the separator is set to "Yes (true)", a separator will be added below the menu element.
• Do not set authentication UI to "NEXT UI". If you set authentication UI to "NEXT UI", it may cause incorrect behavior, so please be careful.

[Details 2] Menu

A menu is the choices that appear when you click on an icon button. The default status is registered as follows. Register from the "ADD" button. To delete, select the check box and click the "DELETE" button.

Select	ID	Icon	Label	Click Event	Next UI	Detached Action	URL	Divider
Checkbox	Profile	AccountCircle	Profile	None				No
Checkbox	MFA_Setting	Settings	MFA Setting	Next UI	MFA Setting Step1			No
Checkbox	Change_Password	LockReset	Change password	Next UI	Change Password			No
Checkbox	Sign_Out	Logout	Sign out	Next UI	Sign Out			No

Note

• The options for the click event of the menu are None | Next UI | URL | Action | Detached Action.
• If you select the click event "Action" in the menu, you will be able to launch the action editor from the context menu of the component.
• Next UI for the authentication UI is registered as a menu by default. For applications that do not require authentication, you must delete these menu elements yourself.
• Do not set an authentication UI that is not registered as the next UI. Please note that if you set an authentication UI that is not registered as the default, it may cause incorrect behavior.

[Details 3] Additional Components

Additional components are components that can be displayed on the app bar.
By default, no additional components are registered. Register from the "ADD" button.
To delete, select the check box and click the "DELETE" button.

Select	ID	Icon	Label	Type	Position	Color	Click Event	Badge Content	Badge Color	Next UI	URL	Search Field Width
Checkbox

The displayable components are as follows:

• Icon Button
• Text Button
• Search Field

Note

• The label of additional components serves the following roles depending on the component:
  • Icon Button: Tooltip display content
  • Text Button: Label display content
  • Search Field: Placeholder display content
• The color of additional components serves the following roles depending on the component:
  • Icon Button: Icon color
  • Text Button: Text color
  • Search Field: Icon color, placeholder text color
• The position of additional components can be selected from "Left", "Center", "Right".
• Additional components are arranged from left on the app bar in the order they were added.
• If a position conflict occurs, the position of the first added component takes priority.
• If "Menu" is selected for the click event of an additional component, a menu item property named after that additional component’s ID will be displayed in the property dialog.
• For mobile applications, the following behavior applies:
  • If the total number of avatars and icon buttons is 2 or more, they are displayed together as a menu icon.
  • If both a title and a search field exist, the search field is displayed at maximum width.

Event

None