アイコンボタン

アイコンボタンはアイコン型のボタンコンポーネントです。

ノート

通常のボタンと比べ、ドロワーメニューや通常メニューを開くことが可能です。

プロパティ

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

ノート

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

[詳細1] ドロワー

デフォルトの状態は以下のように登録されています。[ADD]ボタンから登録します。 削除する場合は、チェックボックスを選択して、[DELETE]ボタンをクリックします。

選択	ID	ICON	LABEL	CLICK EVENT	NEXT UI	URL	DIVIDER
チェックボックス	item1	MoveToInbox	Inbox	None			いいえ
チェックボックス	item2	Mail	Starred	None			いいえ
チェックボックス	item3	MoveToInbox	Send Email	None			いいえ
チェックボックス	item4	Mail	Drafts	None			はい
チェックボックス	item5	MoveToInbox	All Mail	None			いいえ
チェックボックス	item6	Mail	Trash	None			いいえ
チェックボックス	item7	MoveToInbox	Spam	None			いいえ

[{"id":"item1","Icon":"MoveToInbox","label":"Inbox","Clickevent":"None","NextUi":"","url":"","divider":false},{"id":"item2","Icon":"Mail","label":"Starred","Clickevent":"None","NextUi":"","url":"","divider":false},{"id":"item3","Icon":"MoveToInbox","label":"Send Email","Clickevent":"None","NextUi":"","url":"","divider":false},{"id":"item4","Icon":"Mail","label":"Drafts","Clickevent":"None","NextUi":"","url":"","divider":true},{"id":"item5","Icon":"MoveToInbox","label":"All Mail","Clickevent":"None","NextUi":"","url":"","divider":false},{"id":"item6","Icon":"Mail","label":"Trash","Clickevent":"None","NextUi":"","url":"","divider":false},{"id":"item7","Icon":"MoveToInbox","label":"Spam","Clickevent":"None","NextUi":"","url":"","divider":false}]

ノート

• ドロワーのクリックイベントの選択肢は None | Next UI | URL | Action となります。
• ドロワーでクリックイベント[Action]を選択した場合、コンポーネントのコンテキストメニューよりアクションエディタを起動できるようになります。
• 区切り線は[はい (true)]の場合、そのメニュー要素の下に区切り線が付与されます。
• [NEXT UI]に認証UIを設定しないでください。[NEXT UI]に認証UIを設定した場合、不正な動作になることがありますので、ご注意ください。

[詳細2] メニュー

メニューとはアイコンボタンをクリックしたときに表示される選択肢のことです。 デフォルトの状態は以下のように登録されています。[ADD]ボタンから登録します。 削除する場合は、チェックボックスを選択して、[DELETE]ボタンをクリックします。

選択	ID	ICON	LABEL	CLICK EVENT	NEXT UI	URL	DIVIDER
チェックボックス	Profile	AccountCircle	Profile	None			いいえ
チェックボックス	MFA_Setting	Settings	MFA Setting	NextUi	MFA Setting Step1		いいえ
チェックボックス	Change_Password	LockReset	Change password	NextUi	Change Password		いいえ
チェックボックス	Sign_Out	Logout	Sign out	NextUi	Sign Out		いいえ

ノート

• メニューのクリックイベントの選択肢は None | Next UI | URL | Action となります。
• メニューでクリックイベント[Action]を選択した場合、コンポーネントのコンテキストメニューよりアクションエディタを起動できるようになります。
• 区切り線は[はい (true)]の場合、そのメニュー要素の下に区切り線が付与されます。
• [NEXT UI]に認証UIを設定しないでください。[NEXT UI]に認証UIを設定した場合、不正な動作になることがありますので、ご注意ください。

[詳細 3] アラート値

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

項目	値
タイトル	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

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

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

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

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

ノート

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

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

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

1. [クリックイベント]に「ダイアログ」を選択します。
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のキャンバスアクションが実行されます。
• ダイアログがクリックイベント：ダイアログで表示される場合は、ダイアログクローズ時に遷移元コンポーネントのクローズアクションが実行されます。

イベント

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