Mobile: List - Show bottom item (whatsapp style)

Mobile: List - Show bottom item (whatsapp style)

  

Hi,

Nice challenge for the experts among you.  

Searching for (other) solutions for my problem in a Mobile app:

We're showing a ChatMessage in a List to create a chat/messaging system. No issues there because this is working just fine.

But we would like to show the last item at the bottom and focus on this item. Similar to how many mobile chat systems operate (like whatsapp). Which is not trivial in the list widget.

I deviced a solution where I added a hidden container under the list and added "jumpto" as a Style Classes value.

Then with a piece of javascript I ScrollTo this container which always resides at the bottom.

toDiv = document.querySelector(".jumpto");

myDiv = document.getElementById('parentDiv');

if(toDiv!==null && myDiv!==null)

{

    t = toDiv.offsetTop;

    myDiv.scrollTop = t;

}

This actually works perfect when using the javascript in the OnClick of the list using it when the screen has finished the render. But I haven't been succesfulI yet to timely execute this piece of javascript in an action. 

  • I've tried OnRender of the screen. 
  • I've tried to put the list in a webblock. 
  • And tried the OnRender of the webblock itself. 

It seems that the screen hasn't fully updated when the javascript is executed. Therefore not working. Clicking on the list afterwards the move does work.

Is there a way to execute the javascript when the list is fully created?

Or is there anyone who wanted to show the bottom of the list and come up with a different solution?


Cheers,

Roeland


Hi Roeland,

I was able to make it work using this javascript code in the OnRender of the Screen:

toDiv = document.querySelector(".jumpto");
myDiv = document.querySelector(".content");
if(toDiv!==null && myDiv!==null)
{
    t = toDiv.offsetTop;
    myDiv.scrollTop = t;
}

Can you try it and tell me if this was what you wanted?

Cheers,

José

Hi José,

Thanks for the reply. The issue isn't actually the javascript. Both solutions work for me.

Problem resides in the existance of the jumpto container in the OnRender event.

In the image you'll see the list with a ChatMessage.

And outside the list the cnt_jumpto container.

The OnRender of the screen seems to be executed at a moment that the cnt_jumpto container isn't rendered yet.

If I debug at the OnRender holding the javascript. The final time it passes the javascript code, the list isn't fully built up yet. Then after F9 the rest of the list is rendered on screen except the OnRender isn't triggered anymore.


cheers,


Roeland



Solution

Hi Roeland,

Maybe I understood wrongly, but is not this what you want?

Cheers,

José

Solution

Hi Roeland,

What if you just rotate the parent element by 180' so that it starts at the bottom and you have to scroll upwards to the end of the list.


I have used a similar approach in a Native chat application that I built using Swift, I transformed the list by 180' while maintaining the order of the source list. I would have given you the transform code but my css skills are laughable.


Thanks,

Bharath

Hi José,

Thanks for the oml (and obviously the effort). Quite similar to how I've coded it.

I've changed the bits and pieces to your coding to find out if they made the difference.

Left is my current suspect which is the fact that we use an aggregate like your GetPersons but build up a local variable list of a structure. The list is constructed/appended in the OnAfterFetch of the aggregate. Whereas you have the aggregate source directly linked to the aggregate list.

Dunno why this would be of significance but I'm going to investigate tomorrow.

Cheers,

Roeland

Hi Bharath,

Do you mean changing the sorting of the aggregate and have the last item on top?

I've been thinking about this but since all chat apps have the last item at the bottom it would only confuse users.

But let me know if I misunderstood you.

Cheers,

Roeland

Roeland Deichsel wrote:

Hi Bharath,

Do you mean changing the sorting of the aggregate and have the last item on top?

I've been thinking about this but since all chat apps have the last item at the bottom it would only confuse users.

But let me know if I misunderstood you.

Cheers,

Roeland

Well, I just thought about it a bit more and I think you need to change your aggregate to reverse your list. So now you will have your newest message at the top and the most old message at the bottom.


With a traditional list view your first message at the top is the newest message that you want the user to see. But now the user needs to scroll down to see older messages. This is opposite to traditional chat UX.


So now you can apply a CSS rotate transform to the ListView(or its parent) so that its content is rotated 180 degrees and the listview scrolls up rather than bottom.


Thanks,

Bharath


I just tried rotating and flipping the scale of the listview to get a "Mirror" listview but the results were not as required. 


I'm pretty sure I have done this in native by flipping the listview and cells on their horizontal axis. I will let you know incase I get the code to work.

Hi both,

Thanks for the effort Bharath! Actually the idea is quite promising. Going to up my skills on this CSS tranform functionality.

I've adapted the eSpace of José to bind the list to a list of structure instead. But that also works in José's eSpace.

Going to investigate the difference.

cheers,

Roeland

Hi Roeland,


One problem with the approach of scrolling listview to the bottom (as demonstrated by José ) is that it fails when there are only 1-3 rows in the listview. 


e.g When listview has only 1 row, the listview will render that row at the top rather than at the bottom, a typical chat application renders it at the bottom. This problem can be solved with mirroring the listview, but if you are not concerned with this scenario then the scrolling solution works well.


Thanks,

Bharath

Hi Bharath,

With 1-3 records all the records are visible in the window. So no issue there.

cheers,

Roeland

Hi Bharath,

Managed to reverse the listview by using 2 css transforms, both containing:

transform: rotateX(180deg);

One on the parent container holding the list. And the other on the container within the list holding the text for the listitems.

This way the list is flipped vertically and the text is flipped back so it remains readable.

cheers,

Roeland