Link

This component is a hyperlink.

Note

It can also be set as the destination for file manager file downloads.

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 actions.
2	Label L	String	Link	label	string	Link	Component label
3	Width	String	222	width	string	222	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	Top	Number	0	paddingTop	number	0	Component top padding
9	Right	Number	0	paddingRight	number	0	Component right padding
10	Bottom	Number	0	paddingBottom	number	0	Component bottom padding
11	Left	Number	0	paddingLeft	number	0	Component left padding
12	Color	String Color Picker		color	string		Component text color
13	Font Size	Number	16	fontSize	number	16	Font size (px)
14	Bold	Boolean	OFF	bold	boolean	false	Bold setting
15	Italic	Boolean	OFF	italic	boolean	false	Italic setting
16	Strikethrough	Boolean	OFF	strikethrough	boolean	false	Strikethrough setting
17	Underline	Selection 1. Always 2. Hover 3. None	Always	underline	string	always	Underline display setting
18	Visibility	Boolean	ON	visibility	boolean	true	Display state
19	Horizontal Position	Selection 1. Left 2. Center 3. Right	Left	horizontalAlignment	string	left	Horizontal alignment
20	Vertical Position	Selection 1. Top 2. Center 3. Bottom	Top	verticalAlignment	string	top	Vertical alignment
21	Click Event	Selection 1. None 2. Action 3. NEXT UI 4. Value 5. WINDOW 6. Download 7. Dialog 8. Detached Action	Value				Click event (no action property) Detached Action became selectable in v4.1.0.
22	NEXT UI	Selection 1. None 2. [UI Label]		nextUi	string		Destination UI
23	URL	String		value	string		Link destination URL
24	Path	String		download	string		Download file path
25	DIALOG UI	Selection 1.None 2.[Dialog UI Label]		dialogUi	string		Destination Dialog UI Added in v3.3.0
26	Detached Action	Selection 1. [Detached Action ID]		detachedAction	string		Set a detached action Added in v4.1.0.

Note

• ^L: This is a Multilingual Property.
• The unit for font size (fontSize) is px.
• Do not set the authentication UI to "NEXT UI". Note that setting the authentication UI to "NEXT UI" may result in incorrect operation.
• 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 1] External Service Site Integration" below.
• When you select DIALOG for the "Click Event", the "Dialog Action" appears in the context menu, allowing you to define the "Open" and "Close" actions. For details, see the later section "[Details 2] Dialog Integration".

[Details 1] 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 value property. Example) $ui.link_id.value
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.

[Detail 2] Dialog Integration

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

1. Select “DIALOG” in the [Click Event].
2. Configure the dialog UI to be displayed upon transition in the displayed DIALOG UI item.

Note

To open a dialog via an action, use $fn.openDialog().

3. Define the dialog action “Open”.
   • Parameters can be passed during dialog UI transition using $param.{query parameter name}, etc.
4. Define the dialog action “Close”.
   • You can retrieve information about the destination dialog UI using $param.{query parameter name}.
   • Bind the retrieved values to the UI as needed.

The behavior during dialog integration is as follows:

1. Clicking the settings component pops up the dialog UI.
2. Perform processing within the dialog UI.
3. Execute $fn.closeDialog() within the dialog UI.
4. Execute the action defined for the dialog action “Close”.

Note

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

Event

Event name	Description
onclick	For the click event "Action": The action is executed when clicked. For the click event "WINDOW": The action is described in "[Details 1] External Service Site Integration" For the click event "DIALOG": The behavior described in "[Details 2] Dialog Integration" applies. For the click event "Detached Action": Executes the detached action when clicked.