Button

Buttons are primarily regular button components for performing actions.

Property

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto-generated	id	string	Auto-generated	The [id] property cannot be set by action.
2	Label L	String	Button	label	string	Button	Button label
3	Width	String	90	width	string	90	Component width
4	Height	String	40	height	string	40	Component height
5	X	String		x	string		X coordinate position
6	Y	String		y	string		Y coordinate position
7	Lock	Boolean	OFF	lock	boolean	false	When ON, the component stays fixed even when the screen is scrolled. When OFF, the component moves along with the screen scroll. Added in v4.1.0.
8	Style	Selection 1. Filled 2. Outlined 3. Text	Filled	variant	string	contained	Button style
9	Size	Selection 1. Small 2. Medium 3. Large 4. None	None	size	string	none	Button size specification Added in v3.3.0
10	Font Size	Number	14	fontSize	number	14	Button font size specification Added in v3.3.0
11	Color	String Color Picker		color	string		Button color
12	Label Color	String Color Picker		labelColor	string		Button Label color Added in v3.4.0
13	Disabled	Boolean	OFF	disabled	boolean	false	Component disabled/enabled state
14	Visibility	Boolean	ON	visibility	boolean	true	Component visibility state
15	Start Icon	Selection	None	startIcon	string		Icon displayed before the button
16	End Icon	Selection	None	endIcon	string		Icon displayed after the button
17	Alert Dialog	Selection 1. ON 2. OFF	OFF				Alert dialog visibility state
18	Alert Value L	Table [Detail 1]	[Detail 1]	alertValues	[Detail 1]		Alert dialog content
19	Tooltip	String		tooltip	string		Tooltip text
20	Click Event	Selection 1. None 2. NEXT UI 3. URL 4. WINDOW 5. UI SCRIPT 6. Action 7. Detached Action 8. Upload 9. Camera 10. DIALOG	Action				Click event setting UI SCRIPT became available for selection in v4.0.0. Detached Action became selectable in v4.1.0. Camera became selectable in v4.2.0.
21	NEXT UI	Selection 1. None 2. [UI Label]		nextUi	string		Destination UI
22	URL	String		url	string		Destination URL
23	DIALOG UI	Selection 1.None 2.[Dialog UI Label]		dialogUi	string		Destination Dialog UI Added in v3.3.0
24	Detached Action	Selection 1. [Detached Action ID]		detachedAction	string		Set a detached action Added in v4.1.0.
25	Preferred Camera	Selection 1. None 2. Rear 3. Front	None	preferredCamera	string	none	Can be configured when Camera is selected for Click Event. Sets which camera (rear or front) is preferentially launched. Since it depends on OS and browser standard behavior, the launch camera cannot be fully enforced. Added in v4.2.0.
26	Enable Resize	Boolean	OFF	enableResize	boolean	false	Can be configured when Camera is selected for Click Event. Setting to enable file size resizing. Added in v4.2.0.
27	Resize Mode	Selection 1. Fixed 2. User Selectable	User Selectable	resizeMode	string	userSelectable	Can be configured when Camera is selected for Click Event. In Fixed mode, the size selection dialog is not displayed and processing follows the fixed size. In User Selectable mode, the size selection dialog is displayed and the user selects each time. Added in v4.2.0.
28	Fixed Size	Selection 1. Small 2. Medium 3. Large 4. Actual Size	Medium	fixedSize	string	medium	Can be configured when Camera is selected for Click Event. Size setting when Fixed mode is selected. Added in v4.2.0.
29	Tab Focus	Selection 1.[Component ID]		tabFocus	string		Next focus component specification Added in v3.3.0

Note

• ^L: This is a Multilingual Property.
• The following properties do not support getting or setting multilingual values from actions:
  • Alert Value
• If "Upload" is selected for [Click Event], the following behavior will occur.
  • Clicking the button launches the OS file selection dialog.
  • Mobile/tablet 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.
• When setting the "Size" property from an action, you can choose from the following values:
  1. small
  2. medium
  3. large
  4. none
• If you select none for the "Size" property, you can configure the "Height" and "Font Size" properties.
• 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.
• The "Alert Value" property is displayed when the "Alert Dialog" is turned on.
• Alert dialog-related properties cannot be set or retrieved from actions.
• 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 2] External Service Site Integration" below.
• If "DIALOG" is selected for "Click Event", "Dialog Action" will appear in the context menu, and "Open" and "Close" actions can be defined. For details, see "[Details 3] Dialog Integration" below.
• If "Camera" is selected for "Click Event", the action defined will be executed after taking a photo. The captured photo can be obtained using await $fn.getUploadFiles() in the same way as click event "Upload".
• Camera launch is highly dependent on the browser and OS, and cannot be fully enforced. Depending on the device, a file selection dialog may be displayed instead of launching the camera.
• The expected file sizes when resizing is enabled are as follows:
  • Small: The long side becomes 1280px and the file is resized to approximately 10% of the original file size.
  • Medium: The long side becomes 1920px and the file is resized to approximately 25% of the original file size.
  • Large: The long side becomes 2560px and the file is resized to approximately 50% of the original file size.
  • Actual Size: The original image size is maintained.
• The actual file size after resizing may vary depending on image content and browser encoding processing.
• If the actual file size after resizing becomes larger than before resizing, the original image size is maintained without resizing.

[Details 1] 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 2] 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.

Note

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.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.

Note

• When sending parameters from an external site, add them as GET parameters when navigating to callback.html.

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.

Note

• 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.

[Details 3] Dialog Integration

Transition to a dialog UI is possible only from a screen UI. The procedure for defining a transition to a dialog UI is as follows.

1. Select "DIALOG" for [Click Event].
2. Set the target dialog UI in the displayed DIALOG UI field.

Note

If you want to open a dialog from an action, use $fn.openDialog().

3. Define the dialog action "Open".

• You can pass parameters such as $param.{query parameter} when transitioning to the dialog UI.

4. Define the dialog action "Close".

• You can obtain information from the destination dialog UI using $param.{query parameter name}.
• Bind the obtained values to the UI as needed.

The behavior during dialog integration is as follows.

1. Clicking the configured component displays the dialog UI as a popup.
2. Perform processing in the dialog UI.
3. Execute $fn.closeDialog() on the dialog UI side.
4. The action defined in dialog action "Close" is executed.

Note

• If the dialog is displayed by $fn.openDialog(), the canvas action of the source UI is executed when the dialog is closed.
• If the dialog is displayed by click event: DIALOG, the close action of the source component is executed when the dialog is closed.

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 "[Detail 2] External Service Site Integration". For the click event "DIALOG": The operation is described in "[Details 3] Dialog Integration". For the click event "UI SCRIPT": Executes the UI SCRIPT when clicked. For the click event "Detached Action": Executes the detached action when clicked. For the click event "Camera": The camera is launched when clicked. The action is executed after the photo is taken.