1. Home
  2. Forum
  3. Xamarin.Forms
  4. sf chat and "is read" indicator

sf chat and "is read" indicator

I have sf chat, and there is a base from which the correspondence comes, the message object has the is_read field, it can be true or false, I have a task, add visual reporting to the chat, whether the message is read or not, how can I do this with yours chat? Or should I find or create another?


4 Replies
KK Karthikraja Kalaimani Syncfusion Team July 19, 2021 09:41 AM UTC

Hi, 

Thank you for contacting Syncfusion support. 

You can achieve your requirement by writing custom message for MessageTemplate property of SfChat. Please Refer to the UG below. 

UG link :  https://help.syncfusion.com/xamarin/chat/messages#template-for-message 

Regards,
Karthik Raja

?? ??????? July 20, 2021 06:47 AM UTC

I looked at your link, but I didn't figure it out a bit, how can this help me, do you have another example?


KK Karthikraja Kalaimani Syncfusion Team July 21, 2021 03:14 PM UTC

Hi, 

Currently, we are preparing sample for your requirement. We will update further details on or before 23rd July 2021. We appreciate your patience until then. 

Regards,
Karthik Raja

KK Karthikraja Kalaimani Syncfusion Team July 23, 2021 07:38 PM UTC

Hi,

By writing a custom text message, we can implement a IsRead property on CustomTextMessage class and based on that property value we, can return UnReadMessage and ReadMessage template on OnSelectTemplate method of DataTemplateSelector class. We have prepared sample for the same, please refer to the below code snippet. 

Code snippet : 
 public class CustomTextMessage : TextMessage
    {
        public bool IsRead
        {
            get;
            set;
        }
        public CustomTextMessage()
        {
       
        }
    }

//ViewModel 
...
 this.messages = new ObservableCollection<object>();
            this.currentAuthor = new Author() { Name = "Nancy", Avatar = "Nancy.png" };
            this.GenerateMessages();
...
private void GenerateMessages()
        {
            this.messages.Add(new CustomTextMessage()
            {
                Author = currentAuthor,
                Text = "Hi guys, good morning! I'm very delighted to share with you the news that our team is going to launch a new mobile application.",
                DateTime = DateTime.Now
            });

            this.messages.Add(new CustomTextMessage()
            {
                Author = this.Harrison,
                Text = "That is good news.",
                DateTime = DateTime.Now
            });

            this.messages.Add(new CustomTextMessage()
            {

                Author = this.Margaret,
                Text = "What kind of application is it and when are we going to launch?",
                DateTime = DateTime.Now
            });

            this.messages.Add(new CustomTextMessage()
            {
                Author = currentAuthor,
                Text = "A kind of Emergency Broadcast App.",
                DateTime = DateTime.Now
            });

            this.messages.Add(new CustomTextMessage()
            {
                Author = this.Harrison,
                Text = "That is good news.",
                DateTime = DateTime.Now
            });

            this.messages.Add(new CustomTextMessage()
            {
                Author = this.Margaret,
                Text = "What kind of application is it and when are we going to launch?",
                DateTime = DateTime.Now
            });
        }
....

// SfChat Page
.....
   this.sfChat.MessageTemplate = new MyCustomMessageTemplateSelector(this.sfChat);
            this.sfChat.SendMessage += SfChat_SendMessage;
...
 protected override void OnAppearing()
        {
            base.OnAppearing();

            foreach (var message in this.viewModel.Messages)
            {
                if (!(message as CustomTextMessage).IsRead)
                {
                    (message as CustomTextMessage).IsRead = true;
                }
            }
        }
...

  public class MyCustomMessageTemplateSelector : ChatMessageTemplateSelector
    {
        private readonly DataTemplate ReadMessageTemplate;

        private readonly DataTemplate UnReadMessageTemplate;
        public MyCustomMessageTemplateSelector(SfChat chat) : base(chat)
        {
            this.ReadMessageTemplate = new DataTemplate(typeof(TextMessageTemplate));
            this.UnReadMessageTemplate = new DataTemplate(typeof(TextMessageTemplate2));
        }

        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            if (item as ITextMessage != null)
            {
                if ((item as ITextMessage).Author.Name =="Nancy")
                {
                    if (Helper.IsActive)
                    {
                        return this.ReadMessageTemplate;
                    }
                    else
                    {
                        return this.UnReadMessageTemplate;
                    }
                }
                else if ((item as CustomTextMessage).IsRead)
                {
                    return this.ReadMessageTemplate;
                }
                else
                {
                    return this.UnReadMessageTemplate;
                }
               
            }
            else
            {
                // returns default template for all other messages.
                return base.OnSelectTemplate(item, container);
            }
        }
    }


  
This is the idea, you can change message template based on the user. 

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted_(2)397607614.zip

Regards,
Karthik Raja


Loader.
Up arrow icon