【Pega】オートコンプリート機能を実装する

やりたいこと

下の画像のように、データのリストを参照して入力を自動補完（オートコンプリート）してくれるフォームを作成したい。

↓

現在（Pega Platform v8.3）では、リストのソースとして以下の４つから指定できる。

• As defined on property
• Data Page
• Clipboard Page
• Report Definition

今回はData Pageを使用する方法を紹介。

Step１：データタイプの作成

Dev StudioのData typesを選択し、Add data typeをクリック。

LabelとDescriptionを適当につけてSubmitをクリック。

Data modelタブで+Add fieldから、オートコンプリートのリストに表示させたい項目を作成する。

今回は犬種を表す "Breed"というPropertyと、犬種のグループを表す"Group"というPropertyを作成する。

Step２：データページの作成

次にSourceタブからCreate a locale sourceを選択する。

するとこんな感じの画面が出てくるので、どの項目をレコードのキーにするか選択したうえ（Use as Key）Submitを押下する。

次にRecordタブで、+Add recordからレコードを作成する。

Step３：フォームの作成

次は実際に画面でオートコンプリートを使ったフォームを作成する。

オートコンプリートを使いたい画面で、DesignタブからPickers>Autocompleteを使いたい箇所にドラッグ&ドロップする。

作成した項目で、オートコンプリートで値を入れたいケースプロパティを指定する（ここでは .DogBreed.Breed）。

さらにその下のList Sourceで、TypeをData Pageに設定したうえ、Data Pageに先ほど作成したデータページを選択する。

作成したデータページは、先ほどのデータタイプのUsageタブから確認可能。

そしてSearch results configurationにて、オートコンプリートでリストとして表示するプロパティを選んだうえ（ここでは.Breed）、showとUse For Searchにチェックをつけておく。

また、表示と補完に使う項目以外にも、先ほどレコードで作ったプロパティを参照し、Set valueにチェックを入れることで、ケースプロパティにその値を設定することも可能。ここでは.Groupを.DogBreed.Groupに設定している。

完成図

該当のフィールドにカーソルを合わせ、↓を押すとリストが表示される。

ワードを入力すると補完が走る。

さらに、補完される項目以外の項目も自動で設定されている。

環境

Pega Platform 8.3.0（Personal Edition）を使用

おわり～