Pega UIの要素をコードに埋め込むことにより、ウェブアプリケーションの機能を強化します。 ケース全体をレンダリングして、ユーザーがワークを作成したり、アサインメントを管理したりできるようにします。 たとえば、フィードバックフォームをウェブサイトに埋め込み、ページにアクセスするユーザーがコメントを共有できるようにします。
- Pega Platform 8.1以降で開発されたアプリケーションと、ホストページをテストするためのWebサーバーがあることを確認します。
- アプリケーションに少なくとも1つのケースタイプがあることを確認します。 詳細については、「Creating a top-level case type」を参照してください。
- 「SameSiteCookie」が無効になっていることを確認します。 詳細については、「Enabling and configuring Cross-Site Request Forgery settings」を参照してください。
- CSRFトークンのチェックが有効な場合にマッシュアップを使用するには、「Cross-Site Request Forgery」ランディングページの「Allowed referrers」フィールドに、マッシュアップスクリプトが埋め込まれているドメインを追加します。 詳細については、「Enabling and configuring Cross-Site Request Forgery settings」を参照してください。
-
App Studioのナビゲーションペインで、「Channels」をクリックします。
-
「Create new channel interface」セクションで、「Web mashup」をクリックします。
-
「New Web mashup interface」フォームの「Basic options」セクションにある「Name」フィールドにマッシュアップの名前を入力します。
例： 「Feedback item」と入力します。 - オプション：
このチャネルインターフェイスを他のマッシュアップチャネルインターフェイスと区別するには、「Description」フィールドでこのチャネルインターフェイスの目的を指定します。
例： 「Case type for user feedback」と入力します。 -
自動入力された「URL」フィールドで、Pega PlatformインスタンスのURLを確認します。
- オプション：
URL暗号化を使用してマッシュアップスニペットを生成するには、「Use encryption」スイッチをオンにします。
補足： 「Use encryption」スイッチがオンの場合、動的パラメーターはサポートされません。 -
「Configuration」セクションの「Action」リストで、マッシュアップのアクションを選択します。
例： 「Create a new case」を選択します。 -
選択したアクションに応じて、関連する設定を完了します。
選択肢 手順 新しいケースを作成する 「Case type」ドロップダウンメニューで、必要なケースタイプを選択します。 ページを表示する -
「Class」フィールドで、必要なクラスを選択します。
-
「Harness」フィールドで、必要なハーネスを選択します。
- オプション：
データトランスフォームを設定するには、「Data transform」フィールドで、必要なセットアップを設定します。
- オプション：
ページの編集をブロックするには、「Read only」トグルをオンにします。
Get next work なし 割り当てを開く 「Param key」フィールドに、必要な割り当てキーを入力します。 IDでケースを開く 「Work ID」フィールドに、必要なワークオブジェクトIDを入力します。 ハンドルでケースを開く 「Param key」フィールドに、必要なワークオブジェクトハンドルを入力します。 URLでケースを開く 「Query param」フィールドに、必要なクエリーパラメーターを入力します。 たとえば、カスタムアクティビティを定義するには、 pyActivity=ClassName.activityName&Parameter1=ParameterValue1&Parameter2=ParameterValuを使用できます。例： 「Create a new case」アクションについては、「Case type」リストで「Creating a feedback item」ケースタイプを選択します。フィードバックケースタイプの設定例 
-
-
「Thread name」フィールドに、マッシュアップを処理するスレッドの名前を入力します。
- オプション：
マッシュアップガジェットの読み込みを遅らせるには、「Defer mashup load」スイッチをオンにしてから、ページスクリプトでマッシュアップの読み込みプロセスの開始を好みに応じて設定します。
例： アプリケーションユーザーがページ上のボタンをクリックしてフィードバックフォームを開いた後にマッシュアップを利用できるようになります。 - オプション：
ユーザーがマッシュアップを表示するブラウザーを更新した後もケースの状態を保持するには、「Retain mashup state on browser refresh」スイッチをオンにします。
補足： このオプションを使用するときは、以下の制限を考慮してください。- このオプションは、デフォルトでは以前のバージョンのPega Platformと後方互換性がありません。
- このオプションは、ユーザーがマッシュアップガジェットを同じスレッドにロードしていて、ブラウザーの更新中にスレッドが使用可能である場合にのみ機能します。 マッシュアップのロード中にユーザーがスレッド名を動的に設定した場合、この設定は機能しません。
- 同じセッションで更新が発生した場合、状態は保持されます。
- ケース状態を保持するオプションは、システムでワークIDが生成されない一時ワークオブジェクトでは機能しません。
- オプション：
マッシュアップコードに動的パラメーターが含まれるマッシュアップガジェットリクエストを検証するには、「Allow passing dynamic parameters」スイッチをオンにします。
動的パラメーターとは、外部ページのマッシュアップコードの中に埋め込むパラメーターのことをいいます。 たとえば、CustomerIDというカスタムパラメーターについて、ページを訪問したユーザーのIDに基づいてパラメーターの値を渡す場合、外部ページにパラメーターを含めることで、パラメーターを動的にすることができます。 静的パラメーターとは、システムがマッシュアップコードで生成するすべてのパラメーターのことをいいます。 -
マッシュアップの出力オプションを設定します。
-
「Skin」リストで、マッシュアップに使用するSkinルールを選択します。
-
「Iframe resizing」リストで、マッシュアップのサイズ変更モードを選択します。
-
「Initial skeleton」リストで、マッシュアップのテンプレートを提供するスケルトンを選択します。
補足： 「Skeleton preview」をクリックすると、スケルトンがコンテンツをどのようにレンダリングするかを確認できます。フィードバックケースタイプのサンプルマッシュアップ設定 
-
- オプション：
カスタムパラメーターを追加するには、「Custom parameters」セクションで「Add a row」アイコンをクリックし、パラメーターの名前と値を入力します。
-
「What is a mashup」セクションで、「Generate mashup code」をクリックし、「Mashup code」ウィンドウで、コピーするコードの種類を選択します。
- iFrameコードをコピーするには、「iframe code」ウィンドウの上の「Copy」をクリックします。
- マッシュアップコードをコピーするには、「Mashup code」ウィンドウの上の「Copy」をクリックします。
補足： iframeコードを選択すると、マッシュアップの応答時間が改善されますが、動的パラメーターの送信はサポートされません。必要なマッシュアップコード 
-
Mashup codeウィンドウを閉じます。
-
「Save」をクリックします。
- オプション：
各種デバイスでマッシュアップコードがどのように表示されるかをプレビューするには、App Studioで「Preview application」をクリックし、アプリケーション名のとなりにあるチャネル名をクリックして、プレビューするチャネル名を選択します。
-
「Mashup code」ウィンドウからコピーしたコードを静的なウェブページまたは外部ウェブアプリケーションのウェブビューに貼り付けて、埋め込まれたケースを表示します。
ランタイムには、以下の例に示すように、ページのHTMLにマッシュアップコードが組み込まれます。Pega Web Mashup PageThis page will host a Pega Web Mashup
- オプション：
単一ウェブページに複数のマッシュアップを配置するには、マッシュアップ静的スクリプトpzIncludeMashupScriptsをHTMLコードに1回だけ組み込みます。
-
Dev Studioで、をクリックし、「Integration & security」タブをクリックして、Pega Platformアプリケーションルールで信頼できるドメインのリストを指定してアプリケーションのアクセス権限を設定します。
このリストには、マッシュアップをデプロイするURLが含まれています。 マッシュアップのテストに使用する予定のサイトが含まれていることを確認してください。 詳細については、「Securing your application for mashup communication」を参照してください。 -
「Mashup security」セクションの「trusted origins (URLs)」のリストで、「Add a row」をクリックし、アプリケーションにアクセスできるURLを入力します。
このリストには、マッシュアップをデプロイするURLが含まれています。 このアプリケーションからペガWebマッシュアップガジェットを使用するには、信頼する送信元のみを指定します。 各Webサイトのホスト、ポート、およびプロトコルを指定します（例、https：//www.example.com：443）。補足： port #はウェルノウンポートの場合はオプションです。信頼できるURLのリスト 
-
「Save」をクリックします。
App Studioでマッシュアップコードを生成する
マッシュアップ
アプリケーションがホストサイトからのメッセージを受信できるようにアプリケーションのアクセス権限を設定する
