[ShoutSystems] Position of screen when i entered in a chat conversation

[ShoutSystems] Position of screen when i entered in a chat conversation

  
Forge Component
(12)
Published on 2017-05-10 by Labs
12 votes
Published on 2017-05-10 by Labs

Hi All,

Mobile App :

In my chat screen, it has list of messages sent/received.

My Query is: when I click on one contact from my list of conversations screen, I can see it's list of messages .

The problem is that by default, I have to scroll up to reach bottom of screen to check the last sent message. Can we make it reverse?  i.e. without scrolling, directly display last sent message in View and scroll down to view old messages. Just like in whatshapp or other Apps...

I want the last element of a list (irrespective of sorting) to be in a Viewport.

During my researches if found this function but i don't know how to implement it.


setTimeout(function()

{

if (document.getElementsByClassName("ChatList").length){

document.getElementsByClassName("ChatList")[document.getElementsByClassName("ChatList").length-1].scrollIntoView(false);

 } }, 1000);


I thought i had to put this in a javascript brick in a OnRender client action but it doesn't work.

Somebody have an idea ? Please 

Thanks in advance!

Erick








Hi Erick,

I would call the scrollIntoView method on the OnRender event handler for the screen (and would eliminate the setTimeout portion... but haven't tested it either way).

What that snippet of JavaScript does is delay by 1 sec the scrollIntoView method call. Given it selects elements based on DOM, it needs to be at least on/after the OnReady screen event is triggered.

Is your selector correct? does it actually find the last message on the chat?

Thank you Jorge. So i tried this in the javascript on the OnRender event (GetTestMessages.List is the real list i'm using) : 

function toto()

{

if (document.getElementsByClassName("GetTestMessages.List").length){

document.getElementsByClassName("GetTestMessages.List")[document.getElementsByClassName("GetTestMessages.List").length-1].scrollIntoView(false);

 } }

toto();

What do you mean by "based on DOM" ?
What do you call selector ? 

do you want to know if "document.getElementsByClassName("GetTestMessages.List").length-1" is really working?

Just like you said it doesn't seems to work! 

I added a integer local variable set to : 

$parameters.lastposition = document.getElementsByClassName("GetTestMessages.List").length-1

and when i put it on the screen it is equal to 0 .......

Erick,

"What is the DOM?" is answered here, with a probably simpler explanation here, for instance. Basically, it is how a browser internally represents the HTML documents it renders. 

You can find "What is a Selector?" here (or again, for simpler explanations, here or here). They allow you cherry-pick your DOM objects based on CSS classes, IDs and other characteristics. In this particular case, I was talking about this:


document.getElementsByClassName("ChatList")[document.getElementsByClassName("ChatList").length-1]


Given your questions and how you modified the suggested code above, I'd recommend you first learn a bit more about CSS and how browsers load and render your HTML pages, before you try and do this sort of customisation.

The string "ChatList" is a class name, and you can assign a class to a widget by setting their Style Classes property, it has nothing to do with an Aggregate's list, much less like you have there...