Keeping default templates in SfChat

I'd like to use the MessageTemplate feature. My use case is that I don't want some of the inbound messages shown in a bubble. They should just be shown plain. However, I don't want to have to create templates to recreate messages that do have bubbles. Is there a way to return the default templates from the template selector?

7 Replies

KK Karthikraja Kalaimani Syncfusion Team March 30, 2020 12:48 PM UTC

Hi Brad,

Thank you for contacting Syncfusion support.

Currently, we are validating your query and we will update you further details on 1st April 2020. We appreciate your patience until then.

Regards,
Karthik Raja




BD Brad Dean April 3, 2020 05:08 PM UTC

Karthikraja, any update on this?


KK Karthikraja Kalaimani Syncfusion Team April 6, 2020 06:17 AM UTC

Hi Brad,

Sorry for the inconvenience caused.

We have checked the reported issue “Some inbound messages shown in bubble” while using MessageTemplate. We are not able to reproduce the issue in our end and it is working fine as expected. We have attached sample and screenshot for your reference.

Since we are not aware of your exact application scenario, could you please share the following details to check it further and provide a possible solution earlier.

i) Complete configuration of SfChat

ii) SfChat and Xamarin Forms Version

iii) In which platform you are facing this issue ?

iii) Video of the issue

iv) Can you please replicate the reported issue and provide us with a simple sample if possible.

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Chat-Message-Template-Xamarin.Forms-master-1346175013.zip


Screenshot :


 
 

Regards,
Karthik Raja 



BD Brad Dean April 6, 2020 03:28 PM UTC

Thanks Karthik. I think there has been a misunderstanding. I'm not reporting an issue, I'm asking a question about how to use MessageTemplate.

In the template documentation, here:

It shows how you can return different templates based on the message content:

                if ((item as ITextMessage).Text == "How would you rate your interaction with our travel bot?")
                {
                    return ratingDataTemplate;
                }
                else
                {
                    return incomingDataTemplate;
                }
In the sample you provided above 👆you manually created the IncomingTemplate.xaml and OutgoingTemplate.xaml. I'd like to just use the existing templates. They must exist someplace, right?

So, in your sample you have this:

this.incomingDataTemplate = new DataTemplate(typeof(IncomingTemplate));

Where "IncomingTemplate" is something that I have to create manually. Could it be changed to something like this:

this.incomingDataTemplate = new DataTemplate(typeof(Syncfusion.XForms.Chat.Templates.IncomingTemplate));

Saving me a bit of work and making sure that I get updates to the IncomingTempate that Syncfusion might create in the future?




















KK Karthikraja Kalaimani Syncfusion Team April 7, 2020 12:03 PM UTC

Hi Brad,

We don’t have direct solution for your requirement. But we can use existing templates like Text, Hyper link, Calendar, DateTime through DataTemplateSelector. For more details please refer the below code snippet and attached sample.

Code snippet.

 
[C#]

  this.sfChat.MessageTemplate = new ChatDataTemplateSelector(this.sfChat);
 
 
internal class ChatDataTemplateSelector : DataTemplateSelector 
    { 
        #region Fields 
 
 
        /// <summary> 
        /// An instance of the <see cref="SfChat"/> control. 
        /// </summary> 
        private SfChat chat; 
 
 
        #endregion 
 
 
        #region Constructor 
 
 
        /// <summary> 
        /// Initializes a new instance of the <see cref="ChatDataTemplateSelector"/> class. 
        /// </summary> 
        /// <param name="chat">The instance of the SfChat control.</param> 
        public ChatDataTemplateSelector(SfChat chat) 
        { 
            this.chat = chat; 
            this.OutgoingTextMessageTemplate = new DataTemplate(typeof(OutgoingMessageTemplate)); 
             var chatListView = chat.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name.Equals("ChatListView")).GetValue(chat); 
 
            var sfItemTemplate =  chatListView.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name.Equals("ItemTemplate")).GetValue(chatListView); 
             var outgoingTemplate= (DataTemplate) sfItemTemplate.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name.Equals("OutgoingTextMessageTemplate")).GetValue(sfItemTemplate); 
            this.OutgoingTextMessageTemplate = outgoingTemplate; 
 
            this.CalendarMessageTemplate = new DataTemplate(typeof(CalendarMessageTemplate)); 
            var calendarMessageTemplate = (DataTemplate)sfItemTemplate.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name.Equals("CalendarMessageTemplate")).GetValue(sfItemTemplate); 
            this.CalendarMessageTemplate = calendarMessageTemplate; 
 
            this.DateTimeMessageTemplate = new DataTemplate(typeof(DateTimeMessageTemplate)); 
            var dateMessageTemplate = (DataTemplate)sfItemTemplate.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name.Equals("DateTimeMessageTemplate")).GetValue(sfItemTemplate); 
            this.DateTimeMessageTemplate = dateMessageTemplate; 
 
            this.TextMessageTemplate = new DataTemplate(typeof(BaseMessageTemplate)); 
            var textMessageTemplate = (DataTemplate)sfItemTemplate.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name.Equals("TextMessageTemplate")).GetValue(sfItemTemplate); 
            this.TextMessageTemplate = textMessageTemplate; 
 
            this.TimePickerMessageTemplate = new DataTemplate(typeof(TimePickerMessageTemplate)); 
            var timePickerMessageTemplate = (DataTemplate)sfItemTemplate.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name.Equals("TimePickerMessageTemplate")).GetValue(sfItemTemplate); 
            this.TextMessageTemplate = timePickerMessageTemplate; 
 
            this.HyperlinkMessageTemplate = new DataTemplate(typeof(HyperlinkMessageTemplate)); 
            var hyperlinkMessageTemplate = (DataTemplate)sfItemTemplate.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name.Equals("HyperlinkMessageTemplate")).GetValue(sfItemTemplate); 
            this.HyperlinkMessageTemplate = hyperlinkMessageTemplate; 
 
        } 
 
 
        #endregion 
 
 
        #region private property 
 
 
        /// <summary> 
        /// Gets or sets a message template for outgoing message. 
        /// </summary> 
        private DataTemplate OutgoingTextMessageTemplate { get; set; } 
 
 
        /// <summary> 
        /// Gets or sets a message template for calendar message. 
        /// </summary> 
        private DataTemplate CalendarMessageTemplate { get; set; } 
 
 
        /// <summary> 
        /// Gets or sets a message template for DateTime message. 
        /// </summary> 
        private DataTemplate DateTimeMessageTemplate { get; set; } 
 
 
        /// <summary> 
        /// Gets or sets a message template for text message. 
        /// </summary> 
        private DataTemplate TextMessageTemplate { get; set; } 
 
 
        /// <summary> 
        /// Gets or sets a message template for time picker message. 
        /// </summary> 
        private DataTemplate TimePickerMessageTemplate { get; set; } 
 
 
        /// <summary> 
        /// Gets or sets a message template for hyperlink message. 
        /// </summary> 
        private DataTemplate HyperlinkMessageTemplate { get; set; } 
 
 
        #endregion 
 
 
        #region Selector 
 
 
        /// <summary> 
        /// Returns the required template based on the message type. 
        /// </summary> 
        /// <param name="item">The actual message as <see cref="object"/>.</param> 
        /// <param name="container">The actual row data as <see cref="BindableObject"/>.</param> 
        /// <returns>The desired <see cref="DataTemplate"/>.</returns> 
        protected override DataTemplate OnSelectTemplate(object item, BindableObject container) 
        { 
            if (item == null) 
            { 
                return null; 
            } 
 
 
            // Returns the actual template based on the message type. 
            if (item as ICalendarMessage != null) 
            { 
                return this.CalendarMessageTemplate; 
            } 
            else if (item as IDatePickerMessage != null) 
            { 
                return this.DateTimeMessageTemplate; 
            } 
            else if (item as ITimePickerMessage != null) 
            { 
                return this.TimePickerMessageTemplate; 
            } 
            else if (item as IHyperlinkMessage != null) 
            { 
                return this.HyperlinkMessageTemplate; 
            } 
            else if (item as ITextMessage != null) 
            { 
                var message = item as ITextMessage; 
                if (message.Author == this.chat.CurrentUser) 
                { 
                    return this.OutgoingTextMessageTemplate; 
                } 
                else 
                { 
                    return this.TextMessageTemplate; 
                } 
            } 
 
 
            return new DataTemplate(() => 
            { 
                return item; 
            }); 
        } 
        #endregion 
    }


 
Karthik Raja




BD Brad Dean April 9, 2020 05:49 PM UTC

One more question - in your sample you set the MessageTemplate like this:

this.sfChat.MessageTemplate = new ChatMessageTemplateSelector() { Chat = this.sfChat };

how do you do that in XAML?


KK Karthikraja Kalaimani Syncfusion Team April 10, 2020 03:32 PM UTC

Hi Brad,

You can achieve by writing Behavior class for SfChat. For more details please refer to the below link.

To know About Behaviors :
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/behaviors/creating

Regards,
Karthik Raja 


Loader.
Up arrow icon