プッシュボタン

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

プロパティ

UIダイアログ

項目	入力値	オプション	デフォルト値
ID	文字列		自動設定
ラベル	文字列		Button
幅	文字列		90
高さ	文字列		40
X	文字列
Y	文字列
スタイル	選択	塗りつぶし アウトライン テキスト	塗りつぶし
色	文字列 カラーピッカー
非アクティブ	真偽	オン オフ	オフ
表示	真偽	オン オフ	オン
前アイコン	選択		なし
後アイコン	選択		なし
アラートダイアログ	選択	オン オフ	オフ
ツールチップ	文字列
アラート値	表形式 詳細1		詳細1
クリックイベント	選択	なし NEXT UI URL WINDOW アクション アップロード	アクション
NEXT UI	選択	None [UIラベル]
URL	文字列

アクション

項目	プロパティ	データ型	オプション	デフォルト値
ID	id	string		自動設定
ラベル	label	string		Button
幅	width	string		90
高さ	height	string		40
X	x	string
Y	y	string
スタイル	variant	string	contained outlined text	contained
色	color	string
非アクティブ	disabled	boolean	true false	false
表示	visibility	boolean	true false	true
前アイコン	startIcon	string
後アイコン	endIcon	string
ツールチップ	tooltip	string
NEXT UI	nextUi	string
URL	url	string

Tips

Tips

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

[詳細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を設定します。

Tips

Tips

アクション内でも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. ウィンドウアクション「クローズ」に定義したアクションを実行します。

Tips

Tips

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

イベント

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