article by Frank Nimphius, June 2019
You use webviews in Oracle Digital Assistant to integrate web application forms in your chatbot conversations. A reason for using web forms in a conversation is to simplify the input of structured data as in application forms. Another is to assist users with user interface widget that don't exist in messenger clients. As of Oracle Digital Assistant 19.1.5, Webviews can also be deployed as Single Page Applications (SPA) in a local skill container, which opens for many use cases. In this article, I'll explain an example that uses a locally deployed Oracle JavaScript Extension Toolkit (JET) SPA application to provide users with a calendar widget that helps them to enter dates more conveniently in a bot conversation.
About Web Applications Deployed to the Local Web Container in Skills
Locally deployed webviews are single page applications. The application can be built with any JavaScript frameworks you like, not just Oracle JET (https://www.oracle.com/webfolder/technetwork/jet/index.html). A requirement is that the SPA HTML file is named index.html and that it resides in the root folder of the deployment.
The image below shows the architecture and the flow at runtime. The single page application, when uploaded to the skill, is referenced from the System.Webview component in a dialog flow.
When the System.Webview component is called, it launches the web application in a separate browser tab (web) or webview (mobile). By doing this it passes input parameters to the web application. The input parameters are injected to the index.html file's head section and include a callback URL the application uses to pass control and a response payload back to the bot.
When the web application completes, it calls the callback URL in an asynchronous Ajax call. Optionally it can return data to the calling skill.
Sample Skill at Runtime
Calendar opened in Separate Browser Tab or Webview (on mobile)
The calendar that opens in a separate browser tab or a webview (mobile) can receive parameters from the calling bot. In the calendar sample, when configuring the end date, the calendar widget receives the selected start date, as well as a max date (both expressed in milliseconds) to restrict the date range users can select. Of course, if only a single parameter is provided then this works as well. The calendar is a sample and the sources are provided with this article. You can customize it the way you need and want.
DOWNLOAD Sample Skill, Calendar Widget .tgz file, Calendar Source Code (40 MB)
Related Content
TechExchange: Oracle Digital Assistant Primer
