リンク

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

ノート

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

ダイアログプロパティ

項目	入力値	オプション	デフォルト値
ID	文字列		自動設定
ラベル	文字列		Link
幅	文字列		222
高さ	文字列		40
X	文字列
Y	文字列
色	文字列 カラーピッカー
フォントサイズ	数値		16
太字	真偽	• オン • オフ	オフ
イタリック	真偽	• オン • オフ	オフ
訂正線	真偽	• オン • オフ	オフ
下線	選択	• 常に • ホバー時 • なし	常に
表示	真偽	• オン • オフ	オン
水平位置	選択	• 左 • 中央 • 右	左
垂直位置	選択	• 上 • 中央 • 下	上
クリックイベント	文字列	• なし • アクション • NEXT UI • 値 • WINDOW • ダウンロード	値
NEXT UI	選択	• None • [UIラベル]
URL	文字列
ファイルパス	文字列

アクションプロパティ

項目	プロパティ	データ型	オプション	デフォルト値
ID	id	string		自動設定
ラベル	label	string		Link
幅	width	string		222
高さ	height	string		40
X	x	string
Y	y	string
色	color	string
フォントサイズ	fontSize	number		16
太字	bold	boolean	• true • false	false
イタリック	italic	boolean	• true • false	false
訂正線	strikethrough	boolean	• true • false	false
下線	underline	string	• always • hover • none	always
表示	visibility	boolean	• true • false	true
水平位置	horizontalAlignment	string	• left • center • right	left
垂直位置	verticalAlignment	string	• top • middle • bottom	top
NEXT UI	nextUi	string
URL	value	string
ファイルパス	download	string

ノート

• [id]プロパティはアクションで設定はできません。
• [フォントサイズ (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] 外部サービスサイト連携」 を参照してください

[詳細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のアプリケーションに遷移します。
• ウィンドウアクション「オープン」のアクション実行時にエラーが発生した場合、外部サービスサイトを表示することはできません。

イベント

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