アイコンボタン

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

Tips

Tips

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

プロパティ

UIダイアログ

項目	入力値	オプション	デフォルト値
ID	文字列		自動設定
幅	文字列		40
高さ	文字列		40
X	文字列
Y	文字列
サイズ	選択	小 中 大	中
色	文字列 カラーピッカー
非アクティブ	真偽	オン オフ	オフ
表示	真偽	オン オフ	オン
アイコン	選択		AddCircle
バッジコンテンツ	数値
バッジ色	文字列 カラーピッカー
アラートダイアログ	選択	オン オフ	オフ
アラート値	表形式詳細3		詳細3
ツールチップ	文字列
クリックイベント	選択	なし NEXT UI URL WINDOW アクション アップロード ドロワー メニュー	なし
NEXT UI	選択	None [UIラベル]
URL	文字列
ドロワー	表形式 詳細1		詳細1
ドロワー幅	数値
メニュー	表形式 詳細2		詳細2

アクション

項目	プロパティ	データ型	オプション	デフォルト値
ID	id	string		自動設定
幅	width	string		40
高さ	height	string		40
X	x	string
Y	y	string
サイズ	size	string	small medium large	medium
色	color	string
非アクティブ	disabled	boolean	true false	false
表示	visibility	boolean	true false	true
アイコン	icon	string		AddCircle
バッジコンテンツ	badgeContent	number
バッジ色	badgeColor	string
ツールチップ	tooltip	string
NEXT UI	nextUi	string
URL	url	string
ドロワー	drawerItems	array of object	details 1
ドロワー幅	drawerWidth	number
メニュー	menuItems	array of object	details 2

Tips

Tips

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

[詳細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}]

Tips

Tips

• ドロワーのクリックイベントの選択肢は 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		いいえ

Tips

Tips

• メニューのクリックイベントの選択肢は 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を設定します。

Tips

Tips

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

Tips

Tips

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

イベント

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