上級者向け：カスタムxApp Nodeのビルド
xApp.Show Adaptive CardやxApp.Show HTMLが提供する以上のコントロールや柔軟性が必要な場合は、独自のカスタマイズしたNodeを作成することができます。
カスタムxApp拡張機能を作成するには、GitHubのCognigyリポジトリで提供されているテンプレートを使用して、ゼロから拡張機能をビルドする必要があります。下記はExtension(拡張機能)内で使用できるコードスニペットです。このコードスニペットは、テキストコンテンツを表示し、ダイアログをキャンセルまたは続行できるカスタムNodeを作成するのに役立ちます。
export const xappDialogNode = createNodeDescriptor({
type: "xapp-dialog",
fields: [
{
key: "content",
label: "Content",
type: "cognigyText",
},
],
function: (params) => {
const { cognigy, config } = params;
const { content } = config as any;
// About the HTML code:
// - Load the "app page SDK" from /sdk/app-page-sdk.js, which is always available for "generic HTML" apps. There's no need to include the SDK code within the HTML content.
// - After the "app page SDK" line, you can use the SDK globally as it is now initialized.
// - Use plain "onclick" handlers for the buttons to submit a result from the app by calling "SDK.submit({ action: '<action-description>' })".
// - Clicking one of the buttons closes the app and triggers an "inject" message. The value of "input.data._cognigy._xapp.result" is equal to the parameters you provided in "SDK.submit" ({ action: '<action-description>' }).
const getDialogHtml = (content) => `
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/sdk/app-page-sdk.js"></script>
</head>
<body>
<p>${content}</p>
<button type="button" onclick="SDK.submit({ action: 'continue' })">continue</button>
<button type="button" onclick="SDK.submit({ action: 'cancel' })">cancel</button>
</body>
</html>
`;
// @ts-ignore
cognigy.api.setAppState("generic-html", {
html: getDialogHtml(content),
});
},
});generic-htmlに設定されたアプリテンプレートURLと、生成されたHTMLコードを含むアプリテンプレートデータを使用して、setAppState APIを利用します。
実装されると、xApp.Show HTML Nodeと同様に、生成されたHTMLがアプリ画面内に表示されます。このアプローチでは、ページのコンテンツ全体を修正するのではなく、ノードフィールドを通してページの特定の部分を編集することができます。この合理化されたプロセスはダイアログに必要な変更にフォーカスされています。