While a conversational interface is a natural metaphor for interacting with the backend data and processes, the need to input a larger amount of static data makes this mechanism a lot more cumbersome and difficult as part of a Question / Answer conversation.
Rather than being forced to respond to multiple (often repetitive) questions, each to return the appropriate data value, it would be more efficient and intuitive to use a traditional Form Style interface to input the data in a single step.
The Oracle Intelligent Bot Platform addresses this issue through the use of “Instant Apps”; which are rich, interactive widgets that can be embedded in the conversation at the point where a more sophisticated user interface is required.
By incorporating an “Instant App” into the dialogue flow, you will be able to collect the required structured data using a Form interface, that uses standard UI elements (Text Fields, Pop-Lists, Radio Buttons, Check Boxes etc.) and after any required validation, pass it back into the dialog as a single conversation step.
In this Lab Session, you will be:
- Reviewing the “Instant App” Builder and the available UX functionality by the cloning of a template app:
A simple Form style Interface to determine the customer’s preferences out of the many options available when ordering a Sandwich. |
 |
- Incorporate the new "Instant Apps" into the Cafe Supremo conversation flow, through use of the System.Interactive Component, passing in relevant information from the Flow (in this case the Current User’s Name) and returning the submitted form input back into the conversation.
- Access the Oracle Mobile Cloud Bot builder UI using the following URL
http://{hostname}:8080/botsui/bot
Your instructor will give you the cloud server host name to use.
- Click the Instant App Button in Header to open the Oracle Instant App Builder
- The Builder has a number of mechanisms to start to build an “Instant App”
- Starting with a “Blank Canvas”
- Basing The Design on a Use Case template
- Importing the Instant App Source File (JSON)
- Cloning a previously Built Instant App
Click on the “New Instant App” Button to See the Create App Page.
Where we can see a number of options for creating new applications.
Click on Use a Template
- In this case we will start by cloning a partially complete Instant App. So return to the Main Page by either clicking the “Cancel” button.
- Scroll Down to find the “CafeSupremo : Design My Lunch” Instant App.
NOTE if the Specified Instant App is not currently available in your instance, it can be obtained here. To import the application select Add Instant App then import from within the Oracle Instant App Builder.
- Click the Menu Icon (Botton Right of box) and select “Edit a Copy”
- Rename the Instant App from “Copy of CafeSupremo : Design My Lunch” to “CafeSupremo : Design My Lunch [Your Initials]”
Take Note of the Instant App ID – you will need this value to integrate with the Bot.
8.Click on Layout Tab to show the layout of the current panel (“MySandwichOptions”) and the available UI elements.
- We want to add a dressing option to the Sandwich
Drag a Checkbox below the “ChkBox_Salad” checkbox element in the MySandwichOptions pane in the left panel of the builder.
- Click on the new Checkbox element and update the properties as indicated.
| Property | Value |
|---|---|
| Element ID | ChkBox_Dressing |
| Label | Dressing |
- Click the Style Button at the top of the Element Details.
- Expand the Layout Accordion to set the Width of the Checkbox (by default the size is set to 100% of the width of the Panel)
- Set the width to 25%
NOTE. Setting the Element Width to 25% allows the new checkbox to be inline with the other options
-
Click on the “MySandwichOptions” Pane header to again show the element options available.
-
Drag a RadioButtons Element radio group beneath the “Choose_Salad_Type” Radio Buttons Element in the “MySandwichOptions” Pane.
-
Click on the new Radio Buttons Element in the MySandwichOptions Pane to display its Properties.
-
Set the Element Properties as indicated.
| Property | Value |
|---|---|
| Element ID | Choose_Dressing_Type |
| Label | Choose Your Sauce... |
| Initially Visible | UNCHECKED |
| Display Items Inline | CHECKED |
- Add an additional Radio Button to the new “Choose_Dressing_Type Radio Group. By clicking on the “+ Add Radio Button” link
- Set the Radio Button Labels and Values as indicated:
| Radio Button | Label | Value |
|---|---|---|
| 1 | Mayo | MAYO |
| 2 | Honey Mustard | HONEY_MUSTARD |
| 3 | BBQ Sauce | BBQ |
- We want the new “Choose_Dressing_Type” options to be visible when the user selects the Dressing CheckBox (and disappear when un-selected).
Click the Events and Actions Button on App Menu to see the various Application and Element events that are defined for the application (based on what elements have been added to the App pane)
NOTE: The Green Dot indicates where an Event Condition/Action has currently been applied.
- Click the event associated with the ChkBox_Dressing element. (ChkBox_Dressing Changed)
- Choose “ when value changes to true” from condition Pop-list.
- Click the
+ Add Actionlink to associate a specific action (S) to the specified event.
- Select the “Make Elements Visible” Tile to specify which elements will be effected by this event
- Drag the “Choose_Dressing_Type” Radio Button element from the list of available elements and drop it on the “Action: Make Elements Visible” drop target for the action.
-
Click the
+ Add Conditionlink to add a different event handle to the element. -
Choose “ when value changes to false” from condition Pop-list.
-
Add actions “Make Element Invisible” and “Reset Elements” to the condition (you will need to do one at a time).
-
Drag the “Choose_Dressing_Type” Radio Buttons Element onto both actions.
-
Return to the “Events And Actions” page by either clicking the “Events and Actions” Menu Item or the [Back] button at the top right of the Event condition Property Sheet.
-
Click on the “Submit_Putton_Pressed” tile to add events, conditions and actions to the button.
- Click the
+ Add ConditionLink to add a specific action to the button when it is pressed
- Choose the “when button is pressed regardless of validation” option from the condition drop down list.
-
Click the
+Add Actionlink to add the required Actions when the button is pressed. -
Select the “Exit to Bot” Tile to add this action to the button.
- Click the
+Add Actionagain to add a second parallel action to the button
- Select the “Activate and Show Pane” Tile to add this action to the button.
- Drag the “Choices_Made_Pane” header onto the Drop Target of the Action.
NOTE: This Pane will be used as a simple confirmation page to confirm the components ordered.
- We need to define which information is to be passed back to the Bot’s Conversation flow. This is done by adding the required information as Parameters to the “Exit To Bot” Action created in step 25
- Click the
+ Add Parameterto add six (6) outbound parameters to the Action
- Add the Parameter Details as indicated:
| Parameter Name | Parameter Value |
|---|---|
| ORDER_ACTION | SUCCESS |
| SANDWICH_TYPE | {ChooseLunchType} |
| CHEESE | {Choose_Cheese_Type} |
| MEAT | {Choose_Meat_Type} |
| SALAD | {Choose_Salad_Options} |
| DRESSING | {Choose_Dressing_Type} |
NOTE: The use of “Curly Braces” {x} is used to reference the value of the respective Form Element.
-
Save the Instant App and return to the Oracle Bot Builder.
-
Open the “Café_Supremo_TD_[YOUR INITIALS]” Bot that you had created earlier, if it is not currently open in the Bot Builder
-
Select the Dialog Tab in the left hand toolbar (3rd Icon) to open the Dialogue flow in the BotML Text Editor.
- Scroll down to find the Conversation Step (or "State") which activates the Instant App Sandwich Wizard
NOTE: In this case the Step is named “designYourLunch” and is defined as a System.Interactive component.
wasSandwichChosen:
component: "System.ConditionEquals"
properties:
variable: "menuItem"
value: "Sandwich"
transitions:
actions:
# equal: "designYourLunch"
notequal: "getFoodHeatedOption"
# #########################################################################################
# TEST DRIVE LAB 4 : Instant Apps for Structured ContentCustom Component
#
# Add a Sandwich design Wizard to the conversation allowing user to specify their Sandwich
# Content.
#
# The input and subsequent Output from the Sandwich Wizard are defined in the properties
# of the system.interactive Component.
#
# Properties
# sourceVariables : information being passed to the Instant App (in this case the userName)
# variable : payload coming back from Instant App is copied to this variable
# ID : The id of the Instant App to be called from the Bot.
# #########################################################################################
# designYourLunch:
# component: "System.Interactive"
# properties:
# sourceVariableList: userName
# variable: lunchOrder
# id: [ID OF YOUR INSTANT APP]
# prompt: "Please click on the Link below to go to the Sandwich design wizard"
# ######################################################################################### Note:
-
The “sourceVariables” property is used to pass one (or a list) of values as input parameters of the Instant App.
-
The “variable” property references a dialogue context variable to which the payload coming back from the instant app
-
Update the ID property with the Instant App ID for your version of the Instant App
eg. (eg. CafeSupremo__Design_My_Lunch_YOUR_INITIALS)
- Remove the “Comment Hash” (#) from the beginning of each line in the designYourLunch state. (from “designYourLunch” line to the prompt: line - inclusive) as well as the additional "Hash" (#) for the equal: action of the wasSandwichChosen state immediately above the designYourLunch
- Replace the “success” action transition in the showMenu conversation State (as used in Lab 3). Replace “getFoodHeatedOption” with a reference to “wasSandwichChosen".
This change, directs the dialogue flow to a simple test to see if the end-user selected a Sandwich from the menu. If this is the case, the flow is directed to the "designYourLunch" instant App
showMenu:
component: "getFoodMenu"
properties:
menuSlotVar: "menuItem"
menuOption: ${menu.value}
transitions:
actions:
Success: "getFoodHeatedOption"convert to
showMenu:
component: "getFoodMenu"
properties:
menuSlotVar: "menuItem"
menuOption: ${menu.value}
transitions:
actions:
Success: "wasSandwichChosen"- Run the Bot in the Test environment (within The Bot Builder) by clicking the “Play” icon in the tight corner.
- Enter the utterance “I want some lunch”
- Select a “Sandwich”, the choice of which will allow the user to choose the contents via the “Sandwich Design Wizard” Instant App.which will direct the user to the “Design Your Lunch” Wizard.
-
Click the link to launch the “Instant App” created earlier.
NOTE: as you are running the Bot within a Web interface the Instant App will open in a new browser tab.
- Add some options to the Sandwich using the form UI elements.
- Once having selected the desired options click the “Go Make it please!” button.
-
Having received the confirmation screen, click the [X] on the Browser Tab to Close the page. Click back onto the Tab containing the Bot Tester.
NOTE: that the values chosen in the Wizard have been passed back and are incorporated into the dialog flow.
-
Choose whether you wish to have your sandwich “warmed” and complete the Lunch Order.
-
Say goodbye to the Café Supremo Bot.
In this Lab you:
- Saw how easily large amounts of static data can be integrated into a Dialogue Flow via the user of an “Instant App” form interface as part of the conversation.
- Extended an Instant App via the integrated Instant App builder
- Integrated the Form into the Conversation allowing for two way data exchange – from bot to form, and back again.
In Labs 5 & 6 you have the option of exposing your Digital Assistant in: