In this tutorial, you will learn how to build and deploy an xApp Flow as a standalone application.
Prerequisites
- Create an empty Flow.
Configure the Flow
xApp: Init Session Node
- Go to your Flow.
- In the Flow Editor, add an xApp: Init Session Node.
- Open the Node editor and fill in the following fields:
- In the Style Customization section:
- Background Color — specify
darkslategray. - Logo — select Show Default Logo.
- Background Color — specify
- In the xApp Screens section:
- Loading Text — specify
Loading...
- Loading Text — specify
- In the Intermediate Screen section:
- Customization type — select Customized Texts from the list.
- Text Override — enter
Thank you for the info. You can now close this tab.
- In the Connection Screen section:
- Customization type — select No customization.
- In the Style Customization section:
- Click Save Node.
Say Node
- Below the xApp: Init Session Node, add a Say Node.
- In the Options section, in the Data field, specify the code:
{
This data-only message is received in the `handleExecutionFinished` transformer method. The URL is then used to redirect the browser to the xApp Shell page.
"xAppUrl": "{{ input.apps.url }}"
} - Click Save Node.
xApp: Show HTML Node
- Below the Say Node, add an xApp: Show HTML Node.
- In the Content section, select Full HTML Document.
- In the HTML Document section, specify the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/sdk/app-page-sdk.js"></script>
</head>
<body>
<p>Received info:</p>
<pre>"{{ JSON.stringify(input.data, null, 2) }}"</pre>
<button type="button" onclick="SDK.submit({ option: 'ok' })">OK</button>
</body>
</html> - Click Save Node.
xApp: Show Adaptive Card Node
- Below the Question Node, add the xApp: Show Adaptive Card Node.
- In the AdaptiveCard Definition field, specify the following code:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Tell us about yourself",
"weight": "Bolder",
"size": "Medium",
"wrap": true,
"style": "heading"
},
{
"type": "TextBlock",
"text": "We just need a few more details to get you booked for the trip of a lifetime!",
"isSubtle": true,
"wrap": true
},
{
"type": "Input.Text",
"id": "name",
"label": "Your name (Last, First)",
"isRequired": true,
"regex": "^[A-Z][a-z]+, [A-Z][a-z]+$",
"errorMessage": "Please enter your name in the specified format",
"value": "Doe, John"
},
{
"type": "Input.Text",
"id": "email",
"label": "Your email",
"regex": "^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+[.][A-Za-z0-9-]{2,4}$",
"isRequired": true,
"errorMessage": "Please enter a valid email address",
"style": "Email",
"value": "john@doe.cc"
},
{
"type": "Input.Text",
"id": "phone",
"label": "Phone Number (xxx xxx xxxx)",
"regex": "^\\(?([0-9]{3})\\)?[-.\\s]?([0-9]{3})[-.\\s]?([0-9]{4})$",
"errorMessage": "Invalid phone number. Please enter a 10 digit phone number",
"style": "Tel"
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"style": "positive"
}
]
} - Under Waiting Behavior, select Wait for xApp User Input.
- Click Save Node.
xApp: Show HTML Node
- Below, add an xApp: Show HTML Node.
- In the Content field, select Full HTML Document.
- In the HTML Document field, specify the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/sdk/app-page-sdk.js"></script>
</head>
<body>
<p>
Received info:
<hr>
Name: "{{ input.data._cognigy._app.payload.name }}"<br>
Email: "{{ input.data._cognigy._app.payload.email }}"<br>
Phone: "{{ input.data._cognigy._app.payload.phone }}"<br>
</p>
<button type="button" onclick="SDK.submit({ option: 'ok' })">OK</button>
</body>
</html> - Under Waiting Behavior, select Wait for xApp User Input.
- Click Save Node.
Now you can test the result via the Interaction Panel.
Test the Flow
- Open the Interaction Panel and enter a message like "Hi" to trigger the Flow.
- In the Interaction Panel, expand the Event/Message with payload section to access the xApp session. Also, you can check the Info tab to see the xApp's URL in the
input.apps.urlinput object. - Open the xApp's URL.
- Once the page is opened, click Ok. The Adaptive Card form will be loaded.
- In the Phone Number field, specify a mobile number and click Submit.
If the operation is successful, you will receive the following message:Thank you for the info. You can now close this tab.
After that, you can deploy your xApp.
Deploy the xApp
- Go to Deploy > Endpoints.
- Click + New Endpoint.
- Select the Rest Endpoint from the list.
- Specify a unique name and select the corresponding Flow.
- In the Endpoint editor, go to the Transformer Functions section.
- Activate the Enable Input Transformer and Enable Execution Finished Transformer settings.
- In the Transformer field, specify the following code:
const generateId = () => 'xxxx-xxxx-xxxx-xxxx'.replace(/x/g, () => String.fromCharCode(97 + Math.random() * 25))
createRestTransformer({
handleInput: async ({ endpoint, request, response }) => {
const userId = 'standalone-xapp-user'
const sessionId = generateId()
const text = 'GET_STARTED'
const data = request.query
return { userId, sessionId, text, data }
},
handleOutput: async ({ output, endpoint, userId, sessionId }) => {
return output
},
handleExecutionFinished: async ({ processedOutput, outputs, userId, sessionId, endpoint, response }) => {
const { xAppUrl } = processedOutput.data
if (xAppUrl) {
response
.redirect(xAppUrl)
// .status(200)
// .header('Content-Type', 'application/json')
// .send(JSON.stringify({ processedOutput, outputs }, null, 2))
}
return processedOutput
}
})
8. Click Save.
To check if the xApp was deployed as expected, copy and paste the Endpoint URL into your browser's address bar and test your Flow again.
Comments
0 comments