ボタン

ボタンは主にアクションを実行するための通常のボタンコンポーネントです。

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string	自動設定	[id]プロパティはアクションで設定はできません。
2	ラベル	文字列	Button	label	string	Button	ボタンのラベル
3	幅	文字列	90	width	string	90	コンポーネントの幅
4	高さ	文字列	40	height	string	40	コンポーネントの高さ
5	X	文字列		x	string		X座標位置
6	Y	文字列		y	string		Y座標位置
7	スタイル	選択 1.塗りつぶし 2.アウトライン 3.テキスト	塗りつぶし	variant	string	contained	ボタンのスタイル
8	サイズ	選択 1.小 2.中 3.大 4.指定なし	指定なし	size	string	none	ボタンのサイズ指定 [v3.3.0]で追加されたプロパティ
9	フォントサイズ	数値	14	fontSize	number	14	ボタンのフォントサイズ指定 [v3.3.0]で追加されたプロパティ
10	色	文字列 カラーピッカー		color	string		ボタンの色
11	非アクティブ	真偽	OFF	disabled	boolean	false	コンポーネントの無効/有効状態
12	表示	真偽	ON	visibility	boolean	true	コンポーネントの表示/非表示
13	前アイコン	選択	なし	startIcon	string		ボタンの前に表示するアイコン
14	後アイコン	選択	なし	endIcon	string		ボタンの後に表示するアイコン
15	アラートダイアログ	選択 1.オン 2.オフ	OFF				アラートダイアログの表示/非表示
16	アラート値	表形式 [詳細1]	[詳細1]	alertValues	[詳細1]		アラートダイアログの内容
17	ツールチップ	文字列		tooltip	string		ツールチップテキスト
18	クリックイベント	選択 1.なし 2.NEXT UI 3.URL 4.WINDOW 5.アクション 6.アップロード 7. ダイアログ	アクション				クリック時のイベント設定
19	NEXT UI	選択 1.None 2.[UIラベル]		nextUi	string		遷移先のUI
20	URL	文字列		url	string		遷移先のURL
21	DIALOG UI	選択 1.None 2.[ダイアログUIラベル]		dialogUi	string		遷移先のダイアログUI [v3.3.0]で追加されたプロパティ
22	タブによるフォーカス	選択 1.[UIのID]		tabFocus	string		次フォーカスのコンポーネント指定 [v3.3.0]で追加されたプロパティ

ノート

• [クリックイベント]に「アップロード」を選択した場合、下記の動作になります。
  • ボタンをクリックするとOSのファイル選択ダイアログが起動します。
  • モバイルデバイスでは、ファイル追加時にカメラを起動し、写真撮影した画像をアップロードすることができます。
    • iOSのデバイスの場合は、写真撮影した画像は全て「image.jpg」として登録されてしまいます。 そのため、すでに同名のファイルが存在する場合は上書きされますので、ご注意ください。
    • Androidのデバイスの場合は、写真撮影した画像は「ユニークキー.jpg」として登録されます。
    • OSに関わらず、カメラ起動からの画像データアップロードについては拡張子jpgのみとなります。
• [クリックイベント] に「アップロード」を選択した場合は、「NextUI」「URL」とは異なり、アクションを定義することができます。 アクション内でビルトイン関数「$fn.getUploadFiles」を使用すると、アップロードファイルをオブジェクト配列として取得できます。 なお、ビルトイン関数「$fn.getUploadFiles」は[クリックイベント] に「アクション」を選択した場合では使用できません。
• [NEXT UI] に認証UIを設定しないでください。[NEXT UI]に認証UIを設定した場合、不正な動作になることがありますので、ご注意ください。
• [サイズ]プロパティをアクションから設定する場合、以下の値を設定することが出来ます。
  1. small
  2. medium
  3. large
  4. none
• [サイズ]プロパティで「なし」を選択した場合、[高さ]、[フォントサイズ]プロパティ値の設定が可能となります。
• [幅]、[高さ]プロパティ値には下記を入力できます。 px表示したい場合は数値のみ、%表示したい場合は単位に%を指定してください。 下記以外を入力した場合の動作はサポート外になります。
  • 数値
  • 数値%
  • calc()関数
• [X]、[Y]プロパティ値には下記を入力できます。 px表示したい場合は数値のみを指定してください。 下記以外を入力した場合の動作はサポート外になります。
  • 数値
  • calc()関数
• calc()関数はCSSの関数で、計算を可能にする関数です。（例：calc(100% - 30px)） calc()関数で使用できる単位は 「%」と 「px」です。それ以外の単位（例：em,remなど）はサポート外になります。
• calc()関数を用いてサイズを指定した際は、エディタ上の表示とアプリ上の見た目が異なることがあります。 プレビューを用いてご確認ください。
• [アラート値]プロパティは、[アラートダイアログ]をONにした場合に表示されます。
• アラートダイアログ関連のプロパティは、アクションから設定・取得することはできません。
• [クリックイベント] に「WINDOW」を選択した場合は、コンテキストメニューに[ウィンドウアクション]が表示され、[オープン]と[クローズ]のアクションを定義することができます。 詳細は、後述「[詳細2] 外部サービスサイト連携」を参照してください。
• [クリックイベント] に「DIALOG」を選択した場合は、コンテキストメニューに[ダイアログアクション]が表示され、[オープン]と[クローズ]のアクションを定義することができます。
  詳細は、後述「[詳細3] ダイアログ連携」 を参照してください

[詳細1] アラート値

デフォルトの状態は以下のように登録されています。 項目「タイトル」「コンテンツ」「キャンセル」「実行」の値の欄を編集してください。

項目	値
タイトル	Are You Sure?
コンテンツ	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
実行	Submit

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

下記の仕様を持つ外部サービスサイトであれば、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は、urlプロパティに設定します。例） $ui.button_id.url
4. ウィンドウアクション「クローズ」を定義します。
   • $param.{クエリパラメータ名} で 遷移先URLのパラメータ受け取れます。
   • 必要に応じて取得した値をUIにバインドします。

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

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

ノート

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

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

スクリーン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	クリックイベント「アクション」の場合：クリックした時にアクションを実行します。 クリックイベント「アップロード」の場合：ファイル選択後、[開く (O)」ボタンをクリックした時にアクションを実行します。 クリックイベント「WINDOW」の場合：「[詳細2]外部サービスサイト連携」に記載している動作になります。 クリックイベント「DIALOG」の場合：「[詳細3]ダイアログ連携」に記載している動作になります。