Content Template

4 posts, 0 answers
  1. Vuyiswa
    Vuyiswa avatar
    219 posts
    Member since:
    Jan 2010

    Posted 19 Oct 2019 Link to this post

    Good Day 

    i am able to show images , video and normal text formatted based on my content templates. but it works well when loading the data in the chat control. When a User type a simple "hi" there is already a content template for outgoing messages which format this correctly when its load. my problem is that when they user type it does not use any of my content template 

     

    Author senderitem = new Author();
               senderitem.Avatar = model.AUTHOR_PROFILE_PIC;
               senderitem.Name = model.AUTHOR;
     
               TextMessage textMessage = new TextMessage();
               textMessage.Data = model.CHAT_MESSAGE;
               textMessage.Author = senderitem;
               textMessage.Text = model.CHAT_MESSAGE;
           
               Device.BeginInvokeOnMainThread(() =>
               {
                   chat.Items.Add(textMessage);
                   chat.Message = string.Empty;
               });

     

     

  2. Petar Marchev
    Admin
    Petar Marchev avatar
    1029 posts

    Posted 21 Oct 2019 Link to this post

    Hi ,

    I am a bit unsure what the problem at hand is. The way the chat chooses a template for a message is by checking with the ItemTemplateSelector. You can read about it in this help article. If you only need to style the messages, i.e. change colors or margins, then you can probably use implicit styles.

    However, if you need to add content, like images, or else, you need to use custom templates and need to write up your own template selector in which the proper template is selected. Have you already done this? Have you debugged to ensure that the correct template is selected?

    You can keep in mind that the default template selector has a total of 8 templates it works with - 4 outgoing, and 4 incoming message templates. The number is 4, because by default we differentiate between these: single, first, middle, last.

    Perhaps I did not fully understand your question, and if that is the case, please include more details so that I can get a better understanding of the issue at hand.

    Regards,
    Petar Marchev
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Vuyiswa
    Vuyiswa avatar
    219 posts
    Member since:
    Jan 2010

    Posted 23 Oct 2019 in reply to Petar Marchev Link to this post

    Good Day Petar 

    Thank you for your reply , i have already implemented the "ItemTemplateSelector" that is where i assign the outgoing and incoming or images or video to a Template. that is ok. My issue is that when loading the message items from the database , the ItemTemplateSelector is formatting messages nicely with no problem. i have attached a video for that.

    My issue is that when i type a simple message 

    hi

    This typed message , does not use the outgoing template even though i see OnSelectTemplate is fired and conditions i met and it does go to the Outgoing Template. Another thing i have noted is that when when typing the message and click the send button 

    OnSelectTemplate is fired many times it happens very fast but in debug mode you can see repeated calls trigger by a simple send message. 

    my chat is defined like this 

     

      <telerikConversationalUI:RadChat x:Name="chat"  Grid.Row="1"
                                         local:ChatroomUtils.AuthorsMap="{StaticResource AuthorsMap}"
                                         ItemConverter="{StaticResource ChatroomMessageConverter}" AutoScrollMode="Automatic"
                                         ControlTemplate="{StaticResource CustomChatControlTemplate}"
                                         ItemTemplateSelector="{StaticResource CustomChatItemTemplateSelector}"
                                               
                                         >
                </telerikConversationalUI:RadChat>
     

     

    and these are my Templates 

    <DataTemplate x:Key="AttachmentIncomingMessageTemplate">
     
          <Frame CornerRadius="10"  BackgroundColor="Transparent"   MinimumHeightRequest="25" HorizontalOptions="End"
      Padding="10" VerticalOptions="FillAndExpand">
                  <AbsoluteLayout>
                  <StackLayout>
                      <ffimageloading:CachedImage Source="{Binding Text}"    DownsampleUseDipUnits="True"  RetryCount="5"  RetryDelay="5"   LoadingPlaceholder="hour_glass.gif" ErrorPlaceholder="error.png" DownsampleToViewSize="true"
      Aspect="AspectFit"    WidthRequest="250" HeightRequest="250">
     
                      </ffimageloading:CachedImage>
                      <Label  FontSize="Micro"  HorizontalTextAlignment="End"  Text="{Binding Data.DATE_ADDED_FRIENDLY}" TextColor="LightGray"></Label>
                      </StackLayout>
              </AbsoluteLayout>
              </Frame>
     
           
      </DataTemplate>
     
      <DataTemplate x:Key="AttachmentOutgoingMessageTemplate">
     
          <Frame CornerRadius="10"   BackgroundColor="Transparent"
      Padding="10"
        HasShadow="false"
        HorizontalOptions="StartAndExpand"  VerticalOptions="FillAndExpand">
              
                  <AbsoluteLayout>
                  <StackLayout>
                      <ffimageloading:CachedImage Source="{Binding Text}"   DownsampleUseDipUnits="True"  RetryCount="5"  RetryDelay="5"   LoadingPlaceholder="hour_glass.gif" ErrorPlaceholder="error.png" DownsampleToViewSize="true"
      Aspect="AspectFit"    WidthRequest="250"  HeightRequest="250">
     
                      </ffimageloading:CachedImage>
                      <Label  FontSize="Micro"  HorizontalTextAlignment="End"  Text="{Binding Data.DATE_ADDED_FRIENDLY}" TextColor="DarkGray"></Label>
              </StackLayout>
              </AbsoluteLayout>
              </Frame>
      </DataTemplate>
     
     
     
      <DataTemplate x:Key="AttachmentIncommingMessageTemplate">
     
          <Frame    BackgroundColor="Transparent"   HorizontalOptions="End"
      Padding="10" >
              <StackLayout  BackgroundColor="#ECE5DD">
                  <Label TextColor="Black"  Text="{Binding Text}" />
                  <Label   FontSize="Micro"   HorizontalTextAlignment="End"  Text="{Binding Data.DATE_ADDED_FRIENDLY}" TextColor="DarkGray"></Label>
              </StackLayout>
          </Frame>
      </DataTemplate>
     
      <DataTemplate x:Key="OutgoingMessageTemplate">
          <Frame  BackgroundColor="Transparent" HorizontalOptions="End">
              <StackLayout  BackgroundColor="#dcf8c6">
                  <Label TextColor="Black"  Text="{Binding Text}" />
                  <Label  FontSize="Micro"  HorizontalTextAlignment="End"  Text="{Binding Data.DATE_ADDED_FRIENDLY}" TextColor="DarkGray"></Label>
              </StackLayout>
          </Frame>
      </DataTemplate>
     
     
      <DataTemplate x:Key="IncommingMessageTemplate"
          <Frame  HorizontalOptions="Start" BackgroundColor="Transparent"
      Padding="10"
        HasShadow="false"  >
              <StackLayout BackgroundColor="#FFFFFF" HorizontalOptions="End">
                  <Label TextColor="Black"  Text="{Binding Text}" />
                  <Label  FontSize="Micro"  HorizontalTextAlignment="End"  Text="{Binding Data.DATE_ADDED_FRIENDLY}" TextColor="DarkGray"></Label>
              </StackLayout>
          </Frame>
      </DataTemplate>

    which are used nicely below 

     

    <local:CustomChatItemTemplateSelector x:Key="CustomChatItemTemplateSelector"  OutgoingMessageTemplate="{StaticResource OutgoingMessageTemplate}"  IncommingMessageTemplate="{StaticResource IncommingMessageTemplate}"   AttachmentIncommingMessageTemplate="{StaticResource AttachmentIncommingMessageTemplate}"  AttachmentOutgoingMessageTemplate="{StaticResource AttachmentOutgoingMessageTemplate}"/>

     

    All these works fine. but the issue is that the sent message does not use the template. The difference between the messages that are formatted correctly are those one loaded from the db and the one added on run-time disregard the template. 

     

    Author senderitem = new Author();
              senderitem.Avatar = model.AUTHOR_PROFILE_PIC;
              senderitem.Name = model.AUTHOR;
     
              TextMessage textMessage = new TextMessage();
              textMessage.Data = model.CHAT_MESSAGE;
              textMessage.Author = senderitem;
              textMessage.Text = model.CHAT_MESSAGE;
          
              Device.BeginInvokeOnMainThread(() =>
              {
                  chat.Items.Add(textMessage);
                  chat.Message = string.Empty;
     
              });

     

    Below is the Video

     Video Example

  4. Vuyiswa
    Vuyiswa avatar
    219 posts
    Member since:
    Jan 2010

    Posted 05 Nov 2019 in reply to Vuyiswa Link to this post

    i finally resolved the issue. i was passing a text message instead of an object in the Data Property. i just reused the code that was using when binding the form data from the DB
Back to Top