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

Note

• The "id" property cannot be set by an action.
• The unit for font size (fontSize) is px.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 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.

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

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.

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"