Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Xamarin.Forms Smart Pickers in Conversational UI

DZone's Guide to

Xamarin.Forms Smart Pickers in Conversational UI

We take a look at the picker controls in Conversational UI as a part of Telerik UI for Xamarin, and explore rendering modes with various APIs.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Take a look into the picker controls in Conversational UI as a part of Telerik UI for Xamarin, and explore 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 will be creating an 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 make a selection from a list of things — you want this to be a rich experience, but seamless for the user.

We recently looked at how this works with date and time pickers. This article unpacks the ItemPicker and CardPicker controls 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

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

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. We covered Date ajnd Time pickers earlier, the bigger need is often to offer selections from a custom list. Telerik and Kendo UI can now offer Item and Card picker controls for various platforms, to be used as a part of chatbot conversational UI.

ItemPicker

Do you need to have the chatbot user pick one or more options from a list? The RadChatPicker control provides an ItemPickerContext that can be used to display a list of options for the user to choose from. As expected, ItemPickerContext exposes the following properties you can use to provide a list of possible options to the user:

  • ItemsSource: defines the data source to be bound to as options.
  • SelectionMode: controls single or multiple selections from ItemSource.
  • SelectedItems: defines the currently selected items.
  • SelectedItem: defines the last selected item.

To try out the ItemPicker, 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 above, we can set up the bot author and start a chat conversation. And when it comes to demonstrating selecting options from a list, there is simply no better example than picking your favorite pizza toppings — so let's do that.

public MainPage()
{
  InitializeComponent();

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

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

  this.SelectedPizzaToppings();
}

Now that we have a function to handle the pizza topping selection dialogue, we can enhance the ItemPickerContext with some desired properties and add the PickerItem into the chat conversation's Item collection. Notice how we're setting the ItemSource property — this could be a generic collection of any type of object to be used for data binding.

void SelectedPizzaToppings()
{
  ItemPickerContext itemContext = new ItemPickerContext
  {
    ItemsSource = new List<string>() { "Pepperoni", "Sausage", "Chicken", "Mushrooms", "Pineapples", "Onions", "Peppers" }
  };
  itemContext.SelectionMode = SelectionMode.Multiple;
  PickerItem pickerItem = new PickerItem { Context = itemContext, HeaderText = "Please select your pizza toppings: " };

  chat.Items.Add(pickerItem);
  string AllSelectedItems = string.Empty;

  itemContext.PropertyChanged += (s, e) =>
  {
    if (e.PropertyName == "SelectedItem")
    {
      if (itemContext.SelectedItem != null)
      {
        AllSelectedItems = itemContext.SelectedItem + " ";
      }
    }
  };
}

Let's fire up our app. Sure enough, we see a nice polished ItemPicker control allowing for the selection of pizza toppings from a list.

In the code above, we're also listening in on the PropertyChanged event of the ItemPickerContext — in particular, when the SelectedItem property value changes. This is triggered once the user makes selections — our event handler grabs the SelectedItem property value and aggregates all selected toppings. SelectionMode set on the ItemPickerContext can allow the user to choose one or more items from the list; it would be pretty brutal if it was single topping pizza only, right?

CardPicker

When your chatbot presents a list of options for the user to choose from, you would ideally like it to be a seamless user experience. It may be rich data, but it should be easy to glance at and choose from. This is where the Telerik CardPickers in Conversational UI can light up your chatbot scenarios.

The RadChatPicker control provides CardPickerContext that can be used to display a list of customizable cards. Each card can present complex information in a user-friendly structured manner and allows the user to interact with it. As expected, CardPickerContext exposes the following properties you could use to adjust the rendering of cards:

  • Cards: implements IEnumerable<CardContext> that holds the available Cards,
  • BasicCardContext: placeholder for displaying a card with Title, SubTitle, and Description
  • ImageCardContext: derives from BasicCardContext with an additional Image property.
  • Actions: implements IEnumerable<CardActionContext> that holds the card actions through commands.

BasicCardContext

Let's try rendering cards in our app so developers can choose which upcoming software conference to attend. After a similar chatbot setup, we new up CardPickerContext and add it to our chat's Item collection, as below:

private void SelectConferences()
{
  PickerItem pickerItem = new PickerItem();
  var context = new CardPickerContext { Cards = this.GetConferenceCards(pickerItem) };
  pickerItem.Context = context;
  chat.Items.Add(new TextMessage { Text = "Select a conference:" });
  chat.Items.Add(pickerItem);
}

Notice how we're delegating construction of the IEnumerable<CardContext> to a seperate function. This is just to keep things clean so we know exactly what each card can hold. Let's return BasicCardContext with appropriate property values, like so:

private IEnumerable<CardContext> GetConferenceCards(ChatItem chatItem)
{
  List<CardContext> cards = new List<CardContext>()
  {
    new BasicCardContext() {
        Title ="VS Live",
        Subtitle ="Redmond, WA",
        Description ="Yesterday's Knowledge; Tomorrow's Code!",
        Actions = GetCardActions(chatItem, "VSLive")},
    new BasicCardContext() {
        Title ="DevReach",
        Subtitle ="Sofia, BG",
        Description ="Central/Eastern Europe's Premier Developer Conference",
        Actions = GetCardActions(chatItem, "DevReach")},
    new BasicCardContext() {
        Title ="MS Ignite",
        Subtitle ="Orlando, FL",
        Description ="The Ultimate MSFT Tech Conference",
        Actions = GetCardActions(chatItem, "Ignite")}
  };
  return cards;
}

Notice the Actions property? This helps control what happens when a user selects a card — you can carry context through Text and bind it through Command properties. Let's return a collection of simple actions for each of our developer conferences and capture the user card selection, like so:

ICollection<CardActionContext> GetCardActions(ChatItem chatItem, string Title)
{
  var selectAction = new CardActionContext
  {
    Text = "Select",
    Command = new Command(() =>
    {
      var index = chat.Items.IndexOf(chatItem);
      chat.Items.RemoveAt(index);
      chat.Items.Add(new TextMessage { Author = this.chat.Author, Text = "You selected " + Title });
    }),
  };
  return new List<CardActionContext>() { selectAction };
}

We're now ready to fire up our app and see the conference cards in action. Voila! Users can swipe around and see full details of each rendered card:

Once the user chooses a card, we can expect the card Actions to bubble up the context and we can stick the selection into our chat's Item collection, like so:

ImageCardContext

ImageCardContext enhances the functionality of the BasicCardContext by providing an additional Image property, so you can add an image to the card definition. This simple addition allows you to present a rich user experience. As it turns out, we humans like our visuals.

To use the ImageCardContext, we can have the same chatbot setup, but instead return an IEnumerable<CardContext> which has the Image property set for each card, like below:

IEnumerable<CardContext> GetConferenceCardsWithImages(ChatItem chatItem)
{
  List<CardContext> cards = new List<CardContext>()
  {
    new ImageCardContext() {
        Title ="VS Live",
        Subtitle ="Redmond, WA",
        Description ="Yesterday's Knowledge; Tomorrow's Code!",
        Image = "VSLive Logo.png",
        Actions = GetCardActions(chatItem, "VSLive")},
    new ImageCardContext() {
        Title ="DevReach",
        Subtitle ="Sofia, BG",
        Description ="Central/Eastern Europe's Premier Developer Conference",
        Image = "DevReach Logo.jpeg",
        Actions = GetCardActions(chatItem, "DevReach")},
    new ImageCardContext() {
        Title ="MS Ignite",
        Subtitle ="Orlando, FL",
        Description ="The Ultimate MSFT Tech Conference",
        Image = "MSFTIgnite Logo.jpg",
        Actions = GetCardActions(chatItem, "Ignite")}
  };
  return cards;
}

One caveat to note: image resources for a Xamarin.Forms app need to come from platfom-specific projects, as in the case of our iOS project here:

Let's run our app. Sure enough, image cards make it much more enticing to pick our developer conference of choice. All other card behavior remains unchanged. It's just a better user experience.

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 chatbot conversations is asking the user to make a selection from a list - from a user's perspective, you want this to be as simple as: 'Click, Click, and Done.'

The ItemPicker and CardPicker controls in Conversational UI are here to make this easier. Developers get various rendering options, from simple lists to full-blown custom cards. Flexible API,s and MVVM support make it easy for developers to handle user selections, all the while providing a fluid user experience. Time to go light up your chatbot conversations and build amazing experiences.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
web dev ,chat bot ,mobile application development ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}