Icon Button

Icon Button is an icon-type button component.

Tips

Tips

Compared to normal push buttons, drawer menus and normal menus can be opened.

Properties

UI Dialog

Item	Input value	Option	Default value
ID	string		automatic
Width	string		90
Height	string		40
X	string
Y	string
size	Selection	・small ・medium ・large	Medium
Color	string color picker
Disabled	boolean	on off	off
Visibility	boolean	on off	on
Icon	select		AddCircle
Badge Content	number
Badge Color	string color picker
Alert Dialog	select	on off	off
Alert Value	Table format Details 3		Details 3
Tooltip	string
Click Event	select	None NEXT UI URL WINDOW ACTION UPLOAD DRAWER MENU	ACTION
NEXT UI	select	None [UI Label]
URL	string
Drawer	table details 1		details 1
Drawer Width	number
Menu	table details 2		details 2

Action

Item	Properties	Data Type	Options	Default value
ID	id	string		automatic
Width	width	string		90
Height	height	string		40
X	x	string
Y	y	string
Size	size	string	・small ・medium ・large	medium
Color	color	string
Disabled	disabled	boolean	true false	false
Visibility	visibility	boolean	true false	true
Tooltip	tooltip	string
Badge Content	badgeContent	number
Badge Color	badgeColor	string
NEXT UI	nextUi	string
URL	url	string
Drawer	drawerItems	array of object	details 1
Drawer Width	drawerWidth	number
Menu	menuItems	array of object	details 2

Tips

Tips

• "badgeContent" must be entered as a number greater than or equal to 1. If no value is entered or the value is less than 0, no badge will be displayed.
• If "Upload" is selected for [Click Event], the following behavior will occur.
  • Clicking the button launches the OS file selection dialog.
  • Mobile devices can activate the camera when adding files and upload photographic images
    • For iOS devices, all images that are photographed are registered as "image.jpg". Therefore, please note that if a file with the same name already exists, it will be overwritten.
    • For Android devices, the photographed image will be registered as "unique-key.jpg".
    • Regardless of the OS, only jpg extension is available for image data upload from camera startup.
• If "Upload" is selected for "Click Event", unlike "NextUI" and "URL", an action can be defined. The built-in function "$fn.getUploadFiles" can be used in an action to obtain uploaded files as an object array. Note that the built-in function "$fn.getUploadFiles" cannot be used when "Action" is selected for "Click Event".
• Do not set the authentication UI to "NEXT UI". Note that setting the authentication UI to "NEXT UI" may result in incorrect operation.
• The "Alert Value" property is displayed when the"Alert Dialog" is turned on.
• Alert dialog-related properties cannot be set or retrieved from actions.
• The following can be entered for the "Width" and "Height" property values. If you want to display in px, specify only numerical values; if you want to display in %, specify % as the unit. Operation will not be supported if you enter anything other than the following.
  • number
  • number%
  • calc() function
• The following can be entered for the [X] and [Y] property values. If you want to display in px, specify only numerical values. Operation will not be supported if you enter anything other than the following.
  • number
  • calc() function
• The calc() function is a CSS function that enables calculations. (e.g. calc(100% - 30px)) The units that can be used with the calc() function are "%" and "px". Other units (e.g., em, rem, etc.) are not supported.
• When the calc() function is used to specify the size, the appearance in the editor may differ from the appearance in the application. Please confirm using the preview.
• If "WINDOW" is selected for "Click Event", "Window Action" will appear in the context menu, and "Open" and "Close" actions can be defined. For details, see "[Details 4] External Service Site Integration" below.

[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	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}]

Tips

Tips

• The options for the click event of the drawer are None | Next UI | URL | 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 under the menu element.
• Do not set the authentication UI in "NEXT UI". Please note that setting the authentication UI in "NEXT UI" may result in incorrect behavior.

[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	URL	DIVIDER
Checkbox	Profile	AccountCircle	Profile	None			No
Checkbox	MFA_Setting	Settings	MFA Setting	NextUi	MFA Setting Step1		No
Checkbox	Change_Password	LockReset	Change password	NextUi	Change Password		No
Checkbox	Sign_Out	Logout	Sign out	NextUi	Sign Out		No

Tips

Tips

• The options for the menu click event are None | Next UI | URL | 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.
• If the separator is set to "Yes (true)", a separator will be added below the menu element.
• Do not set the authentication UI in "NEXT UI". Please note that setting the authentication UI in "NEXT UI" may result in incorrect operation.

[Details 3] Alert Value

The default status is registered as follows Edit the value columns for the items "Title","Contents" , "Cancel", and "Submit".

Item	Value
Title	Are You Sure?
Contents	Once you execute, all the previous changes will be lost and existing users will not be able to view the last changes. This cannot be reverted.
Cancel	Cancel
Submit	Submit

[Details 4] External Service Site Integration

External Service Site Integration with WebPerformer-NX is possible with the following specifications

• If a callback URL is specified, the user will be redirected to that URL after processing the external service site.
• When migrating to a callback URL, pass data to the callback URL using query parameters

The definition procedure for External Service Site Integration that conforms to the above specifications is as follows

1. Select "WINDOW" in "Click Event"
2. Set the URL for the transition to the external service site in the URL field displayed.

Tips

Tips

URLs can also be set within an action. For dynamic URLs, leave the URL field empty and set it in the action described in step 3.

3. Define window action "Open".
   • Dynamically create the URL to open the window.
   • Specify the following for the callback URL parameter.
     If you are not using a custom domain:
     {Parameter}=https://{envid}.webperformer.jp/callback.html
     If you are using a custom domain:
     {Parameter}=https://{customdomain}/callback.html
   • The created URL is set in the url property. Example) $ui.icon_button_id.url
4. Define the window action "Close".
   • Receive a parameter of the transition destination URL with $param.{query parameter name}.
   • Bind the obtained value to the UI if necessary.

External Service Site Integration works as follows.

1. Click on the settings component to open the external service site with the specified URL in a new tab.
2. Complete the external service site processing.
3. Navigate to the callback URL.
4. Close the external service site with the process from the callback page.
5. The action defined in the window action “Close” is executed.

Tips

Tips

• If the value of the URL property is empty, the user will be directed to the WebPerformer-NX application being release deployed.
• If an error occurs when executing the action of window action "Open", the external service site cannot be displayed.

Event

Event name	Description
onclick	For the click event "Action": Execute an action when clicked. For the click event "Upload": The action is executed when the "Open (O)" button is clicked after the file is selected. For the click event "WINDOW": The operation is described in "[Details 4] External Service Site Integration".