リンク

ハイパーリンクとなるコンポーネントです。

ノート

ファイルマネージャのファイルのダウンロード先に設定することもできます。

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string	自動設定	[id]プロパティはアクションで設定はできません。
2	ラベル	文字列	Link	label	string	Link	コンポーネントのラベル
3	幅	文字列	222	width	string	222	コンポーネントの幅
4	高さ	文字列	40	height	string	40	コンポーネントの高さ
5	X	文字列		x	string		X座標位置
6	Y	文字列		y	string		Y座標位置
7	Top	数値	0	paddingTop	number	0	コンポーネントの上パディング
8	Right	数値	0	paddingRight	number	0	コンポーネントの右パディング
9	Bottom	数値	0	paddingBottom	number	0	コンポーネントの下パディング
10	Left	数値	0	paddingLeft	number	0	コンポーネントの左パディング
11	色	文字列 カラーピッカー		color	string		コンポーネントの文字色
12	フォントサイズ	数値	16	fontSize	number	16	フォントサイズ(px)
13	太字	真偽	OFF	bold	boolean	false	太字設定
14	イタリック	真偽	OFF	italic	boolean	false	イタリック設定
15	訂正線	真偽	OFF	strikethrough	boolean	false	訂正線設定
16	下線	選択 1. 常に 2. ホバー時 3. なし	常に	underline	string	always	下線の表示設定
17	表示	真偽	ON	visibility	boolean	true	表示状態
18	水平位置	選択 1. 左 2. 中央 3. 右	左	horizontalAlignment	string	left	水平方向の配置
19	垂直位置	選択 1. 上 2. 中央 3. 下	上	verticalAlignment	string	top	垂直方向の配置
20	クリックイベント	文字列 1. なし 2. アクション 3. NEXT UI 4. 値 5. WINDOW 6. ダウンロード 7. ダイアログ	値				クリック時のイベント
21	NEXT UI	選択 1. None 2. [UIラベル]		nextUi	string		遷移先UI
22	URL	文字列		value	string		リンク先URL
23	ファイルパス	文字列		download	string		ダウンロードファイルパス
24	DIALOG UI	選択 1.None 2.[ダイアログUIラベル]		dialogUi	string		遷移先のダイアログUI [v3.3.0]で追加されたプロパティ

ノート

• [フォントサイズ (fontSize)] の単位は pxです。
• [NEXT UI]に認証UIを設定しないでください。[NEXT UI]に認証UIを設定した場合、不正な動作になることがありますので、ご注意ください。
• [幅]、[高さ]プロパティ値には下記を入力できます。
  px表示したい場合は数値のみ、%表示したい場合は単位に%を指定してください。
  下記以外を入力した場合の動作はサポート外になります。
  • 数値
  • 数値%
  • calc()関数
• [X] 、[Y]プロパティ値には下記を入力できます。
  px表示したい場合は数値のみを指定してください。
  下記以外を入力した場合の動作はサポート外になります。
  • 数値
  • calc()関数
• calc()関数はCSSの関数で、計算を可能にする関数です。（例：calc(100% - 30px)）
  calc()関数で使用できる単位は「%」と「px」です。それ以外の単位（例：em,remなど）はサポート外になります。
• calc()関数を用いてサイズを指定した際は、エディタ上の表示とアプリ上の見た目が異なることがあります。
  プレビューを用いてご確認ください。
• [クリックイベント] に「WINDOW」を選択した場合は、コンテキストメニューに[ウィンドウアクション]が表示され、[オープン]と[クローズ]のアクションを定義することができます。
  詳細は、後述「[詳細1] 外部サービスサイト連携」 を参照してください
• [クリックイベント] に「DIALOG」を選択した場合は、コンテキストメニューに[ダイアログアクション]が表示され、[オープン]と[クローズ]のアクションを定義することができます。
  詳細は、後述「[詳細2] ダイアログ連携」 を参照してください

[詳細1] 外部サービスサイト連携

下記の仕様を持つ外部サービスサイトであれば、WebPerformer-NXと連携することができます。

• コールバックURLが指定されていれば、外部サービスサイト処理後、そのURLに遷移する
• コールバックURLに遷移の際、クエリパラメータを使ってコールバックURLへデータを渡す

上記の仕様に適合する外部サービスサイトと連携する際の定義手順は以下の手順です。

1. [クリックイベント]に「WINDOW」を選択します。
2. 表示されたURL項目に外部サービスサイトへ遷移時のURLを設定します。

ノート

アクション内でもURLは設定できます。
動的URLの場合、URL項目は空のままで、手順3.のアクション内で設定してください。

3. ウィンドウアクション「オープン」を定義します。
   • オープン先URLを動的に作成します。
   • コールバックURLパラメータに以下を指定してください。
     カスタムドメインを利用していない場合：
     {パラメータ}=https://{envid}.webperformer.jp/callback.html カスタムドメインを利用している場合：
     {パラメータ}=https://{カスタムドメイン} /callback.html
   • 作成したURLは、valueプロパティに設定します。例） $ui.link_id.value
4. ウィンドウアクション「クローズ」を定義します。
   • $param.{クエリパラメータ名} で 遷移先URLのパラメータ受け取れます。
   • 必要に応じて取得した値をUIにバインドします。

外部サービスサイト連携時の動作は以下になります。

1. 設定コンポーネントをクリックすると、指定URLの外部サービスサイトを新規タブで開きます。
2. 外部サービスサイト処理が完了します。
3. コールバックURLへ遷移します。
4. 外部サービスサイトをコールバックページからの処理でクローズします。
5. ウィンドウアクション「クローズ」に定義したアクションを実行します。

ノート

• URLプロパティの値が空の場合、リリースデプロイしているWebPerformer-NXのアプリケーションに遷移します。
• ウィンドウアクション「オープン」のアクション実行時にエラーが発生した場合、外部サービスサイトを表示することはできません。

[詳細2] ダイアログ連携

スクリーンUIからのみダイアログUIに遷移させることが可能です。 ダイアログUIに遷移させる定義手順は以下の手順です。

1. [クリックイベント]に「DIALOG」を選択します。
2. 表示されたDIALOG UI項目に遷移時のダイアログUIを設定します。

ノート

アクションでダイアログを開きたい場合には、$fn.openDialog()をご利用ください。

3. ダイアログアクション「オープン」を定義します。
   • ダイアログUI遷移時に$param.{クエリパラメータ}などでパラメータを渡すことができます。
4. ダイアログアクション「クローズ」を定義します。
   • $param.{クエリパラメータ名} で 遷移先ダイアログUIの情報を取得できます。
   • 必要に応じて取得した値をUIにバインドします。

ダイアログ連携時の動作は以下になります。

1. 設定コンポーネントをクリックすると、ダイアログUIをポップアップ表示。
2. ダイアログUIでの処理を行います。
3. ダイアログUI側で$fn.closeDialog()を実行します。
4. ダイアログアクション「クローズ」に定義したアクションを実行します。

ノート

• ダイアログが$fn.openDialog()で表示されている場合は、ダイアログクローズ時に遷移元UIのキャンバスアクションが実行されます。
• ダイアログがクリックイベント：DIALOGで表示される場合は、ダイアログクローズ時に遷移元コンポーネントのクローズアクションが実行されます。

イベント

イベント名	説明
onclick	クリックイベント「アクション」の場合：クリックした時にアクションを実行します。 クリックイベント「WINDOW」の場合：「[詳細1]外部サービスサイト連携」に記載している動作になります。 クリックイベント「DIALOG」の場合：「[詳細2]ダイアログ連携」に記載している動作になります。