Xamarin.Forms Date and Time Pickers in Conversational UI

This article looks into date and time pickers in Conversational UI as a part of Telerik UI for Xamarin, and explores rendering modes with various APIs.

Chatbots are all the rage these days and for good reason. A well-trained chatbot with deep contextual knowledge can seamlessly automate lots of workflows with human-computer interactions. And enterprises are beginning to discover the cost benefits of chatbot automations. Bot frameworks and AI are destined to rule the next generation of apps.

For developers though, the key would be engaging user experiences through chatbots. And this is where Conversational UI comes in - with polished modern UI for powering chatbot experiences on web, desktop or mobile. One of the most common interactions in chat conversations is asking the user to pick a date or time. This article unpacks date and time pickers in Conversational UI from the perspective of a Xamarin.Forms mobile app, and explores ways of rendering such a picker UI to make for smooth user experiences.

Pickers and Customized Chatbot UI

While we've already covered the basics of Conversational UI, text-based messages in a chatbot conversation are easy to handle - the real value of Conversational UI is in its ability to handle complex custom UI. This is achieved through “pickers,” which present the user with a selection of choices as a part of the chat conversation. If you had to choose pizza toppings, would you rather type them down in text, or simply check off a list? You get the point. In a chat conversation, it is almost always quicker to elicit user responses when presented with a collection of items to choose from.

The Conversational UI component that allows such pickers is the RadChatPicker. Depending on the information that is to be presented to the user and the choice that should be made, the RadChatPicker allows developers to render one of the following types:

• DatePicker: for displaying a calendar to choose a date
• TimePicker: for displaying a clock view to choose a time
• ItemPicker: for presenting a list of suggestions the end user could choose from
• CardPicker: for presenting a list of cards with structured layout

The RadChatPicker showcases the value we can offer developers with Conversational UI; the polished sophistication through custom complex chat UI. Our Telerik and Kendo UI products already have native date and time picker controls for various platforms. Now, they're included as a part of Conversational UI.

DatePicker

Need to have the user pick a date as a part of a chatbot conversation? The RadChatPicker control provides a DatePickerContext that displays a calendar to select a date. As expected, DatePickerContext exposes the following properties you can use to list possible options to the user:

1. SelectedDate: offers the currently selected date in the calendar
2. MinDate: defines the minimum date that can be displayed/selected
3. MaxDate: defines the maximum date that can be displayed/selected
4. DisplayDate: pre-selects a date in the current calendar view

To try out this picker, let's first set up a chat. This can be done entirely in the shared PCL or .NET Standard library in a regular XAML page, like so:

<ContentPage.Content>
  <telerikConversationalUI:RadChat x:Name="chat" 
                                   BackgroundColor="#FFF6F8FB"
                                   ItemsSource="{Binding Items}"
                                   Margin="5,30,5,30" />
</ContentPage.Content>

In the code-behind, we could set up the bot author and start a chat conversation. Let's say the very first task in the conversation is to ask the user to select a date:

public MainPage()
{
  InitializeComponent();

  this.botAuthor = new Author ();
  this.botAuthor.Name = "MyBot";
  this.botAuthor.Avatar = "BotFace.jpg";

  chat.Items.Add(new TextMessage { Author = this.botAuthor, Text = "Welcome to our chat!" });

  this.SelectDateDialogue();
}

Now that we have a function to handle the date selection dialogue, we can customize the DatePickerContext with some desired properties and add the PickerItem into the chat conversation's Item collection. Essentially, this technique is called “inline display.” We're forcing the display of the date picker as a part of the chatbot conversation by sticking the PickerItem into the chat's Item collection.

private void SelectDateDialogue()
{
  DatePickerContext dateContext = new DatePickerContext
  {
    MinDate = new DateTime(2018, 1, 1),
    MaxDate = new DateTime(2019, 1, 1)
  };
  PickerItem pickerItem = new PickerItem { Context = dateContext };
  chat.Items.Add(new TextMessage { Text = "Please select a date:" });
  chat.Items.Add(pickerItem);

  dateContext.PropertyChanged += (s, e) =>
  {
    if (e.PropertyName == "SelectedDate")
    {
      if (dateContext.SelectedDate != null)
      {
        chat.Items.Remove(pickerItem);
        chat.Items.Add(new TextMessage
        {
          Author = chat.Author,
          Text = "You chose " + dateContext.SelectedDate
        });
      }
    }
  };
}

When we launch the application, we see a nice polished calendar control allowing for choosing dates. The user gets to swipe left/right to move through months, without losing the context of the chat conversation:

In the code above, we're also listening in on the PropertyChanged event of the DatePickerContext. In particular, when the SelectedDate property value changes. This is triggered once the user makes a date selection. Our event handler grabs the SelectedDate property value, sticks in a message in the chat conversation and removes the PickerItem from the chat's Item collection:

TimePicker

Need your chatbot user to pick a time? The RadChatPicker control provides TimePickerContext that can be used to display a clock view to help them do so. As expected, TimePickerContext exposes the following properties you can use to adjust the time selection through the displayed clock values:

1. SelectedValue: offers the currently selected time in the clock view
2. StartTime: represents the starting time of the clock's items (TimeSpan)
3. EndTime: corresponds to the time of the last clock item (TimeSpan)
4. TimeInterval: defines the step between clock items, with the default value being one hour

Once you are ready to render a clock as a time picker in your chatbot, the code looks really similar to that of the DatePicker. We simply enhance the TimePickerContext with our desired property settings, and add the PickerItem with assigned Context to the chat's Item collection:

private void SelectTimeDialogue()
{
  TimePickerContext timeContext = new TimePickerContext
  {
    StartTime = TimeSpan.FromHours(1),
    EndTime = TimeSpan.FromHours(5),
  };

  PickerItem pickerItem = new PickerItem { Context = timeContext };
  chat.Items.Add(new TextMessage { Text = "Please select a time:" });
  chat.Items.Add(pickerItem);

  timeContext.PropertyChanged += (s, e) =>
  {
    if (e.PropertyName == "SelectedValue")
    {
      if (timeContext.SelectedValue != null)
      {
        chat.Items.Remove(pickerItem);
        chat.Items.Add(new TextMessage { Author = chat.Author, Text = "You chose " + timeContext.SelectedValue });
      }
    }
  };
}

When the application is run, a simple clock picker for time selections is displayed:

As is almost self-explanatory in the code above, we're also listening in on the PropertyChanged event of the TimePickerContext. In particular, when the SelectedValue property value changes. This is triggered once the user makes a time selection. Our event handler grabs the SelectedValue property value, sticks in a message in the chat conversation and removes the PickerItem from the chat's Item collection:

Overlay Display

So far, for the both the date and time pickers, we have used “inline display;” a technique to forcibly stick the PickerItem in the chat's Item collection, to be displayed as part of the ongoing conversation. Another technique to display date and time pickers is “overlay display.” This renders pickers on top of everything else in the chat conversation. This is implemented through the Picker property of the RadChat object. This is often declared as a part of the XAML markup, as below:

<ContentPage.Content>
  <telerikConversationalUI:RadChat x:Name="chat" 
                                   BackgroundColor="#FFF6F8FB"
                                   ItemsSource="{Binding Items}"
                                   Margin="5,30,5,30">
    <telerikConversationalUI:RadChatPicker x:Name="picker" 
                                           IsOkButtonVisible="False"
                                           IsCancelButtonVisible="False"                                               
                                           BackgroundColor="LightGray" />
 </telerikConversationalUI:RadChat>    
</ContentPage.Content>

Once we have defined the Picker property, we could give it the DatePickerContext or TimePickerContext as desired and set the Context property accordingly, like so:

private void SelectDateDialogueOverlay()
{
  DatePickerContext dateContext = new DatePickerContext
  {
    MinDate = new DateTime(2018, 1, 1),
    MaxDate = new DateTime(2019, 1, 1)
  };

  dateContext.PropertyChanged += (s, e) =>
  {
    if (e.PropertyName == "SelectedDate")
    {
      if (dateContext.SelectedDate != null)
      {
        chat.Items.Add(new TextMessage { Author = this.chat.Author, Text = "You chose " + dateContext.SelectedDate });
        (chat.Picker as RadChatPicker).Context = null;
      }
    }
  };

  chat.Picker = picker;
  (chat.Picker as RadChatPicker).Context = dateContext;
}

When we run the app, the above code renders the date picker. This time, it's overlayed over other messages in the chat conversation:

As before, we can still listen to the PropertyChanged event of the corresponding picker and grab the user's selection in the event handler. Once the picker's Context is reset to null, the rest of the chat conversation is visible again.

That's a Wrap

Modern chatbots demand rich user experiences and Conversational UI is here to help developers render polished UI for enabling engaging efficient conversations. One the most common tasks in most chatbot conversations is asking the user to select a date or time - and having them manually type in the information is almost criminal. We're opening up validation nightmares and frustrating the user with free form inputs.

The date and time pickers in Conversational UI provide modern calendar or clock views that enable one tap date/time selections. Developers get the choice to render the corresponding PickersItems either Inline as a part of the chat or Overlay across the conversation. With simple properties and an API to grab user selections, you and your chatbot will be able to automate date/time selections and move on to bigger and better things.