# Timeline view/style

**URL:** https://community.glideapps.com/t/timeline-view-style/38383
**Category:** Ask for Help
**Created:** [February 11, 2022, 3:13pm UTC](https://community.glideapps.com/t/timeline-view-style/38383 "2022-02-11T15:13:39Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)
#### Post date: [February 11, 2022, 3:13pm UTC](https://community.glideapps.com/t/timeline-view-style/38383/1 "2022-02-11T15:13:39Z")

</div>

Hi,  
Can we achieve such views on Glide?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/d/2dabda59fff904797ba95fee0b420155c8ce632f.jpeg)

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/d/4da3dd006bdbfae4b13fba68c8d100090450a8c5.png)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/a/0af76f122c28e44e0496c29ef8f3c9b6c2f11209.png)

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/a/1a96a0944c13be45491040c10e6e57c165d3eac0.jpeg)

I’ve just copied some examples from Google. Any other similar view is welcomed.  
Basically, view will pull dates from a table and build a timeline view, rather similar to Gant but not quite.  
One use case can be the lifecycle of a client, i.e. when the lead was first received, when converted to client, when issued first invoice, etc.

Should this be a feature request?

Thanks

---

<div class="post-metadata">

### Author: ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)
#### Post date: [February 11, 2022, 6:47pm UTC](https://community.glideapps.com/t/timeline-view-style/38383/2 "2022-02-11T18:47:07Z")

</div>

> [@Test\_Test](#):
>
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/d/2dabda59fff904797ba95fee0b420155c8ce632f.jpeg)
> 
> image718×1218 94.1 KB

This image isn’t too far off what you might get with an inline list. Maybe with a touch of CSS, or without. Have you considered it?

---

<div class="post-metadata">

### Author: ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)
#### Post date: [February 11, 2022, 8:03pm UTC](https://community.glideapps.com/t/timeline-view-style/38383/3 "2022-02-11T20:03:53Z")

</div>

> [@Roldy](#):
>
> what you might get with an inline list

Interesting idea. How would you go about this?  
Let’s put the CSS touchups aside for now, to make things easier.

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [February 11, 2022, 9:49pm UTC](https://community.glideapps.com/t/timeline-view-style/38383/4 "2022-02-11T21:49:31Z")

</div>

Simple inline list with a relative date plug-in column pointing at a timestamp column sorted by timestamp in descending order?

Not sure what logic you’re looking for to generate the check mark, but it would be some condition to generate the check and displayed as the inline list image.

---

<div class="post-metadata">

### Author: ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)
#### Post date: [February 12, 2022, 5:30pm UTC](https://community.glideapps.com/t/timeline-view-style/38383/5 "2022-02-12T17:30:44Z")

</div>

👆

> [@Test\_Test](#):
>
> Interesting idea. How would you go about this?

As Robert said

---

<div class="post-metadata">

### Author: ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)
#### Post date: [February 13, 2022, 6:23am UTC](https://community.glideapps.com/t/timeline-view-style/38383/6 "2022-02-13T06:23:42Z")

</div>

> [@Robert\_Petitto](#):
>
> Simple inline list with a relative date plug-in column pointing at a timestamp column sorted by timestamp in descending order?

Thanks. Yes, that’s an option. However, inline lists is a component that the user will see in many other section of the app. I wanted to have something more unique for such timeline views.  
On the same notion, I have also been looking for a nice way to display chats. I’m referring to logs from WhatsApp, SMS, Facebook Messenger, etc. These can also be displayed as an inline list, but it far from being intuitive. Any way to have a ballon/chat view? if not, any way to align the inline list to opposite sides based on how sent the message?

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [February 13, 2022, 6:56am UTC](https://community.glideapps.com/t/timeline-view-style/38383/7 "2022-02-13T06:56:54Z")

</div>

> [@Test\_Test](#):
>
> Any way to have a ballon/chat view? if not, any way to align the inline list to opposite sides based on how sent the message?

Apparently, yes…

> [@Beautiful Design App](https://community.glideapps.com/t/beautiful-design-app/16191/811):
>
> I was trying to recreate WhatsApp to learn, and this was the result:

---

<div class="post-metadata">

### Author: ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)
#### Post date: [February 13, 2022, 12:48pm UTC](https://community.glideapps.com/t/timeline-view-style/38383/8 "2022-02-13T12:48:22Z")

</div>

> [@Darren\_Murphy](#):
>
> Apparently, yes…
> 
> > [@](#):
> >
> > I was trying to recreate WhatsApp to learn, and this was the result:

Wow, indeed amazing. Is this really 100% Glide?  
Seem super complicated. I was looking for a simple solution for just one screen inside a wider app. The main idea is to present data of past messages. Doesn’t even need to have capability of replying from within the app (although it would be great).

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [February 13, 2022, 12:57pm UTC](https://community.glideapps.com/t/timeline-view-style/38383/9 "2022-02-13T12:57:37Z")

</div>

As far as I’m aware it’s just Glide.  
But lots of fancy CSS tricks in there, methinks.  
And yes, super impressive.

For your use case, have you considered an Inline List with cards style?  
With a bit of CSS (nothing too advanced), you can make it look quite presentable.

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/Display-comments-time-from-now-28d14a60ce2b4a6ea64193302cf30cfd)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

---

<div class="post-metadata">

### Author: ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)
#### Post date: [February 13, 2022, 1:55pm UTC](https://community.glideapps.com/t/timeline-view-style/38383/10 "2022-02-13T13:55:07Z")

</div>

> [@Darren\_Murphy](#):
>
> With a bit of CSS

That’s great, thanks.  
Also found this amazing app, which is [copyable](https://www.glideapps.com/templates/11-private-chat-app-or-messenger-9w).

> [@Creating a 1:1 chat](https://community.glideapps.com/t/creating-a-1-1-chat/30416/2):
>
> Hello, @nikatronic . I just recently built one, and create a blog, video and example app here - [How to build private chat on Glide](https://www.nocodenoprob.com/post/how-to-build-private-chat-on-glide) Hope you find it useful)

---

<div class="post-metadata">

### Author: ![josepm](https://avatars.discourse-cdn.com/v4/letter/j/8c91f0/32.png) [@josepm](https://community.glideapps.com/u/josepm)
#### Post date: [February 20, 2022, 10:02pm UTC](https://community.glideapps.com/t/timeline-view-style/38383/11 "2022-02-20T22:02:39Z")

</div>

Hi! I’m trying to create something similar to that:

 ![screenshot-1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/3/d366af02b8622f3ac257cebe1c7d0fa7a4a883b4.png)

Do you think it is possible to add a new timestamp and status everytime the order changes?

---

<div class="post-metadata">

### Author: ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)
#### Post date: [February 28, 2022, 12:36pm UTC](https://community.glideapps.com/t/timeline-view-style/38383/12 "2022-02-28T12:36:26Z")

</div>

> [@Darren\_Murphy](#):
>
> As far as I’m aware it’s just Glide.  
> But lots of fancy CSS tricks in there, methinks.  
> And yes, super impressive.

Hi,  
Coming back to this topic after a while. Thought it would be helpful to drop this link/tutorial here from W3

> **[Structural markup and right-to-left text in HTML](https://www.w3.org/International/questions/qa-html-dir#insertedtext)**
>
> How should I use the dir attribute to set text direction on structural elements in HTML?

The main reason I’m mentioning is this nice chat-like view  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/a/ca36e2f3ddd0444038397ed6f29f3fd1fc1fa0a2.png)

What would be the most elegant way to implement this? which component?  
Thanks
