Conditional Fields in FormFlow

Question

I am currently developing a simple chat-bot application using the Azure Bot Framework, implemented using C# and formflow, and testing in Bot Emulator V4.

I have been OK thus far, using mostly intuition and a few online resources, but I've recently hit a bit of a hurdle and have found the documentation on conditional fields in FormFlow to be rather sparse.

In short, the scenario is as follows:

• The form asks about individuals
• The second last question is a 'yes' or 'no' as to whether the user has any problems
• The final question them detail their problems, should they have any

The latter should, really, only be visible if the user's response to the penultimate question was 'yes'. If the user responds 'no' to having any problems, the bot should ignore the 'problem description' field.

At the moment, I have:

  public enum HadProblem
{
    Yes, No
};

The options.

[Prompt("Have you had a problem? {||}")]
      public HadProblem? Problem;

A prompt, and the 'yes' and 'no' options visible to select.

The final question is simply a string input:

[Prompt("Please give a {&} of the problem.")]
    //[Optional]
        public string description;

At the moment, as you can see, I had been using the '[optional]' tag, as it was the closest replacement for conditional fields. I'm struggling to find documentation which covers how to create a field, whose appearance is conditional on another field value.

Is there a way that I can make the problem description field be visible/answerable, only if the response to 'HadProblem' was 'Yes'?

It's really untidy having to manually skip the question, if the answer was 'no'.

Thanks in advance.

Answer 1

You can use the SetActive and SetNext methods of the Field<T> class, you can find complete samples in the documentation including Multi-Dialog Bot sample and Contoso Flowers Bot sample and Order.cs in the Contoso Flowers Bot sample for the form itself.

namespace ContosoFlowers.Models
{
    using System;
    using BotAssets;
    using Microsoft.Bot.Builder.FormFlow;
    using Microsoft.Bot.Builder.FormFlow.Advanced;
    using Services.Models;

    [Serializable]
    public class Order
    {
        public enum UseSaveInfoResponse
        {
            Yes,
            Edit
        }

        public string OrderID { get; set; }

        [Prompt]
        public string RecipientFirstName { get; set; }

        [Prompt(FieldCase = CaseNormalization.None)]
        public string RecipientLastName { get; set; }

        [Prompt]
        [Pattern(RegexConstants.Phone)]
        public string RecipientPhoneNumber { get; set; }

        [Prompt]
        [Pattern(@"^.{1,200}$")]
        public string Note { get; set; }

        [Prompt]
        [Pattern(RegexConstants.Email)]
        public string SenderEmail { get; set; }

        [Prompt]
        [Pattern(RegexConstants.Phone)]
        public string SenderPhoneNumber { get; set; }

        public string SenderFirstName { get; set; }

        public string SenderLastName { get; set; }

        public bool AskToUseSavedSenderInfo { get; set; }

        [Prompt]
        public UseSaveInfoResponse? UseSavedSenderInfo { get; set; }

        [Prompt]
        public bool SaveSenderInfo { get; set; }

        public string DeliveryAddress { get; set; }

        public string FlowerCategoryName { get; set; }

        public Bouquet Bouquet { get; set; }

        public DateTime DeliveryDate { get; set; }

        public string BillingAddress { get; set; }

        public bool Payed { get; set; }

        public PaymentDetails PaymentDetails { get; set; }

        public static IForm<Order> BuildOrderForm()
        {
            return new FormBuilder<Order>()
                .Field(nameof(RecipientFirstName))
                .Field(nameof(RecipientLastName))
                .Field(nameof(RecipientPhoneNumber))
                .Field(nameof(Note))
                .Field(new FieldReflector<Order>(nameof(UseSavedSenderInfo))
                    .SetActive(state => state.AskToUseSavedSenderInfo)
                    .SetNext((value, state) =>
                    {
                        var selection = (UseSaveInfoResponse)value;

                        if (selection == UseSaveInfoResponse.Edit)
                        {
                            state.SenderEmail = null;
                            state.SenderPhoneNumber = null;
                            return new NextStep(new[] { nameof(SenderEmail) });
                        }
                        else
                        {
                            return new NextStep();
                        }
                    }))
                .Field(new FieldReflector<Order>(nameof(SenderEmail))
                    .SetActive(state => !state.UseSavedSenderInfo.HasValue || state.UseSavedSenderInfo.Value == UseSaveInfoResponse.Edit)
                    .SetNext(
                        (value, state) => (state.UseSavedSenderInfo == UseSaveInfoResponse.Edit)
                        ? new NextStep(new[] { nameof(SenderPhoneNumber) })
                        : new NextStep()))
                .Field(nameof(SenderPhoneNumber), state => !state.UseSavedSenderInfo.HasValue || state.UseSavedSenderInfo.Value == UseSaveInfoResponse.Edit)
                .Field(nameof(SaveSenderInfo), state => !state.UseSavedSenderInfo.HasValue || state.UseSavedSenderInfo.Value == UseSaveInfoResponse.Edit)
                .Build();
        }
    }
}