DXブログ

TOP > DXソリューション > DXブログ

初心者でも簡単！User Controlで商品登録/削除の確認ダイアログを実装する方法（GeneXus/ローコード開発）

目次

UserControlとはなに？

はじめに

👤

陶

最近GeneXusで作業していたら、User Controlっていうオブジェクトに触れる機会があったんだけど、これがなかなか便利でね。

👤

大塚

User Controlって、あんまり聞かないですね。どんなときに使うんですか？

👤

陶

簡単に言うと、再利用可能でカスタマイズできるコントロールを作れるオブジェクトなんだよ。たとえば、確認ダイアログなんかを自分仕様で作れるんだ。

👤

大塚

え、でも確認ダイアログならWorkWithPlusのメッセージボックスで十分じゃないですか？

👤

陶

例えば、ボタンの文字やダイアログのタイトルを簡単に変えたり、確認後に実行する処理を自由に設定できたりするんだ。それに、カスタマイズ次第では独自のデザインや機能を追加することもできる。

👤

大塚

へぇ、それは便利そうですね。どうやって作るんですか？

環境：GeneXus18、WorkWithPlus（WWP）、Tomcat 10.1使用

実際に作ってみた

UserControlオブジェクトを実際に作成

👤

陶

じゃあ、Confirmダイアログを例にして説明するね。

１．PatternsからUserControlオブジェクトを選び、追加する
ユーザ―コントロール場所画像

２．プロパティよりUserControlを「DVelop.GXBootstrap.ConfirmPanel」を選択
Confirm詳細箇所画像

３．プロパティよりUser Control Propetiesを選択し詳細を決める
※Yes Button Positionプロパティは初期設定で「Right」になっているため「Left」推奨（OKに該当するボタンが右側になってしまうため）
ユーザ―コントロールプロパティ画像

４．イベントにダイヤログ呼び出しコードを記述する


Event 'DoUserAction1'
	/*UserControllの実装*/
	//登録
	
	//プロパティで設定したダイヤログを呼び出す
	UCInsert.Confirm()
EndEvent

※この設定で、ボタンを押したときに確認ダイアログが表示される
商品追加画像

👤

陶

これらの操作により、ダイヤログの表示ができました

👤

大塚

その後の制御も教えてください！！

５．作成したユーザ―コントロール.（ドット）OnYesイベントを追加
Confirmからはいを押下した時のイベント場所画像

６．実行したいソースコードを記述する


Event UCInsert.onYes
	/*「Yes」を押された場合のみ登録が実行される */
	//商品登録プロシージャ呼び出し
	InsertProduct.Call(&ProductId,&ProductName,&ProductPrice,&ProductQuantity)
	//エラーがなければコミット
	If &IsError = False	 
		Commit
	Else
		Rollback
	EndIf
	Return
EndEvent

商品を登録してみた

👤

陶

実際に「にんじん」に対して登録操作を行ってみた

1．商品リストに商品を追加ボタン押下で商品を追加します
登録前商品リスト画面画像

2．商品情報を入力し、追加ボタンを押下
商品追加画面画像

3．確認ダイヤログが表示されることを確認し、「はい」を押下
商品追加画像

4．にんじんが追加されました
商品追加確認画面画像

👤

大塚

自分で設定したダイヤログを経由して登録することができました！

・プロパティを使用するメリット

・プロパティを使用する方法では初期設定が簡単
・GUIで設定できるため直感的に変更内容を把握できる

👤

陶

実はもう一つの方法でダイヤログの文言を宣言できます。もう一つ削除のパターンを作りましょう

👤

大塚

ぜひ教えてください！

商品を削除してみた

今回はプログラムにダイヤログのメッセージを宣言する
1．登録の手順１～２を行い、削除用のソースコードを記述
登録の３であげたUser Control Propetiesの詳細（TitleやConfirmationなど一部項目）はイベント内でも設定できる


Event 'DoDeletePrd'
	//削除

	//プログラムでダイヤログメッセージの設定
	UCDelete.ConfirmationText = '商品を削除しますか？'

    //ダイヤログ呼び出し
	UCDelete.Confirm()
EndEvent

Event UCDelete.onYes
/*「Yes」を押された場合のみ登録が実行される*/
    //「はい」を押下した時の処理
        
    //商品削除プロシージャ呼び出し
	DeleteProduct.Call(ProductId)
	
    //エラーがなければコミット
	If &IsError = False
		Commit	
	Else
		Rollback
	EndIf
	Return
EndEvent
👤

大塚

できました！

👤

陶

うまくできてるよ！画面で確認しよう

2．商品リストから「もも」商品を削除します
削除前商品リスト画面画像

3．商品削除画面から「もも」商品であることを確認し、削除ボタンを押下します
商品削除画面画像

4．確認ダイヤログが表示されることを確認し、「はい」を押下
商品削除確認ダイヤログ画像

5．商品リストから「もも」商品が削除されました
商品削除後確認画面画像

👤

大塚

意外とすぐできますね！

👤

陶

設定を覚えるだけで簡単に確認ダイアログが作れるね。

おまけに

・今度は条件分岐をやってみた
・さらに拡張してみた 


Event 'Variation'
	/*Caseによってダイヤログの文言を変える*/
	Do Case
		// Case名を「AAA」にする
		Case 'AAA'
			
			// Case AAAのダイヤログメッセージの設定
			UCVariation.ConfirmationText = 'AAA商品を変更しますか？'
			
			// Case名を「BBB」にする
		Case 'BBB'
			
			// Case BBBのダイヤログメッセージの設定
			UCVariation.ConfirmationText = 'BBB商品を変更しますか？'	
	EndCase
	// UCVariationというコントロール名のダイヤログ呼び出し
	UCVariation.Confirm()
EndEvent

・プログラムを使用するメリット

・動的な変更が可能：実行時にプロパティを変更できるため、柔軟なUIやロジックを実現できる。
・条件付き処理が簡単に記述可能：特定の状況に応じて挙動を変えたい場合に適している。
・再利用性の高いコード作成が可能：共通のロジックやプロパティ設定を関数化して効率化できる。

おわりに

今回は、Confirmダイアログを例にしたUserControlについてご紹介しました🌻

今回の内容が、皆さんの開発に役立つ一助となれば幸いです。

最後までお読みいただき、ありがとうございました！

概要
・UserControlは標準のGeneXusコントロールに加え、独自の機能やデザインを持つコントロールを作成できるオブジェクトです。
・今回例に挙げたConfirmダイヤログは確認を求めることで、ユーザーに「自分の選択を確認する機会」を与え、操作に対する安心感を提供するメリットがあります。
・さらにJavaScriptとユーザーコントロール（User Control）を組み合わせることで、GeneXusの標準機能を超えた高度なカスタマイズやインタラクティブな機能を実現できます。

Tag Icon GeneXus, ローコード開発