New with ODA 23.06: Editable forms – Yes, you can easily add forms to your dialog!

You can use the new Create Input Form template in the Visual Flow Designer to build editable forms with text and numeric fields, date/time pickers, buttons, select lists, radio buttons, and checkboxes. Such forms are supported on the Web, iOS, Android, Slack, and Microsoft Teams channels.

https://docs.oracle.com/en/cloud/paas/digital-assistant/whats-new/index.html#GUID-249A3F93-6CC8-4B8F-9B14-EA4F56ECC266

This is actually a long waited feature, that will allow us to easily (and quickly) create input forms to capture data from users.

In some use cases, having a fully conversational approach may not be the most efficient means to capture data, so instead of having a back-and-forth interaction with the user, we can use forms to not only guide the users but also validate their input.

Add an input form

From the Add State dialog, choose User Messaging > Create Tables and Forms.

Then choose Create Input Form.

If by now you are wondering where will those form values be stored, the information is displayed above in the component info panel – “submittedFields” (Map) variable that stores the submitted form values

This new component is a Common Response Component that brings a default response item metadata that translates to the following at the run time.

This gives you an idea of all the form options available, from a simple text area to date picker, time, and single select with a dropdown to a multi-option selection.

Refactor the pizza skill to use a form

You probably came across the sample pizza skill at some point where we use a composite bag to conversationally collect all the necessary information for a pizza order.

Now let’s use the input form to do the same.

Instead of having the Resolve Composite Bag, we use the Input form.

We modify the Response Items metadata to capture just 3 pizza fields (size, type, and toppings) plus and extra one with a toggle button.

responseItems:
  - type: editForm
    title: Input Form
    formColumns: 2
    items:
      - autoSubmit: false
        displayType: singleSelect
        defaultValue: "${(submittedFields.value.mySingleSelect)!''}"
        name: PizzaSize
        options:
          - label: Small
            value: small
          - label: Medium
            value: medium
          - label: Large
            value: large
        layoutStyle: list
        label: PizzaSize
        clientErrorMessage: Field is required
        required: true
      - autoSubmit: false
        displayType: singleSelect
        defaultValue: "${(submittedFields.value.mySingleSelect)!''}"
        name: PizzaType
        options:
          - label: Margherita
            value: Margherita
          - label: Salami
            value: Salami
          - label: 4Cheese
            value: 4Cheese
        layoutStyle: list
        label: PizzaType
        clientErrorMessage: Field is required
        required: true
      - autoSubmit: false
        displayType: multiSelect
        defaultValue: "${(submittedFields.value.myMultiSelect?join(','))!''}"
        name: Toppings
        options:
          - label: Cheese
            value: Cheese
          - label: Olives
            value: Olives
          - label: Oregano
            value: Oregano
        layoutStyle: list
        label: Toppings
        clientErrorMessage: Field is required
        required: true
     - displayType: toggle
        defaultValue: "${(submittedFields.value.myToggle)!'true'}"
        name: myToggle
        labelOn: "Yes"
        label: is this cool?
        valueOff: "false"
        labelOff: "No"
        valueOn: "true"
    actions:
      - label: Submit
        type: submitForm
    channelCustomProperties:
      - channel: "${system.channelType}"
        properties:
          replaceMessage: "${system.message.messagePayload.type == 'formSubmission'}"

all of the data is captured by the variable “submittedFields” which we can use to output a confirmation message.

Your ${submittedFields.value.PizzaType} Pizza with ${submittedFields.value.PizzaSize} Size is on its way!

And this is the end result.

Resources

Documentation

Also published in the Oracle Digital Assistant Blog