# \[Solved\] ListView with links and pictures

**URL:** https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061
**Category:** Questions about Thunkable X
**Tags:** solved, listviewer
**Created:** [April 3, 2020, 3:29pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061 "2020-04-03T15:29:27Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![86188296cd8d41](https://avatars.discourse-cdn.com/v4/letter/8/a88e4f/32.png) [@86188296cd8d41](https://community.thunkable.com/u/86188296cd8d41)
#### Post date: [April 3, 2020, 3:29pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/1 "2020-04-03T15:29:27Z")

</div>

Hello There,  
I am trying to make my Listview items clickable without luck. Can anyone share a tutorial or explain how this can be achieved in Thunkable-x, please?

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/0/f0c37933d3523d94b04819f0776fc835c3fbd09b.png)

![code2](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/7/67568809b16ad80ac08b837e28f35b20e560a0f0.png)

Thank you.

---

<div class="post-metadata">

### Author: ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)
#### Post date: [April 3, 2020, 4:16pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/2 "2020-04-03T16:16:43Z")

</div>

> [@86188296cd8d41](#):
>
> view items clickable without luck. Can anyone share a tutorial or explain how this can be achieved in Thunkable-x, please?

Hey @86188296cd8d41, welcome 👋 and thanks for posting to the community!

What do you want those options to do? They should already be clickable.  
For example, clicking a list item could load information in a pop-up window, take you to another screen, add an item to a list of other items, remove an item from a list, or cause many other actions to take place.

---

<div class="post-metadata">

### Author: ![86188296cd8d41](https://avatars.discourse-cdn.com/v4/letter/8/a88e4f/32.png) [@86188296cd8d41](https://community.thunkable.com/u/86188296cd8d41)
#### Post date: [April 4, 2020, 1:08am UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/3 "2020-04-04T01:08:42Z")

</div>

> [@jared](#):
>
> take you to ano

Thanks a million. I want the options to take me to other screens.  
How can this be achieved please?

---

<div class="post-metadata">

### Author: ![kartik14](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik14/32/44782_2.png) [@kartik14](https://community.thunkable.com/u/kartik14)
#### Post date: [April 4, 2020, 11:25am UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/4 "2020-04-04T11:25:06Z")

</div>

Hi, @86188296cd8d41! 👋

I consider that you want to send the **clicked item’s** data to another screen - right?  
If so, then you can refer to my tutorial on “How to send data from one screen to another with Local Storage”. I’ll link the tutorial here -

> [@How to use StartValue in Thunkable X with LocalStorage](http://community.thunkable.com/t/how-to-use-startvalue-in-thunkable-x-with-localstorage/115613):
>
> Hello, Thunkers! In this post, we’ll talk about How to implement StartValue in App I saw many users seeking for the solution for StartValue in Thunkable X… thinking So, finally, I found myself a solution and I want you all to have a look at it grin So, if you want to transfer any type of value to another screen, you may try using LocalStorage for this. I have some code blocks related to the above idea. You may take reference from them below : Sending Start Value [image] Getting Start…

Hope I helped you! 😺  
Thanks! 😊

---

<div class="post-metadata">

### Author: ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)
#### Post date: [April 4, 2020, 2:13pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/5 "2020-04-04T14:13:01Z")

</div>

Did you change the title?

I think you may like this post, it would allow you to create dynamic list viewers with whatever organization you’d like.

> [@Changing properties of cloned components (DIY Advanced Listviewer)](http://community.thunkable.com/t/changing-properties-of-cloned-components-diy-advanced-listviewer/153213/16):
>
> I just wanted to share my extended list viewer here! Thanks to @domhnallohanlon and @darren and @actech for all of the guidance with this! I use this to display private notes left by my app users. these notes are so they can review any notes they took on any given day the screen [giphy (1)] the code I use to populate the extended dynamic list viewer

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/c/2ccdf6ed54b1c64b1993156a9832207cd0410816.jpeg)

This is a list of notes I’ve taken. A row will populate for each note I have. Each row is made of 3 labels and 1 button.

---

<div class="post-metadata">

### Author: ![86188296cd8d41](https://avatars.discourse-cdn.com/v4/letter/8/a88e4f/32.png) [@86188296cd8d41](https://community.thunkable.com/u/86188296cd8d41)
#### Post date: [April 4, 2020, 3:54pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/6 "2020-04-04T15:54:53Z")

</div>

Thank you so much!  
The clicked item is actually meant to do three different things as seen in the picture below.

1. Show details of logged in user- Information from firebase
2. Resources- A page created inside Thunkable
3. Logout-Information from firebase

If there was an actual button to click for individual items, then it would have been straight forward for me. If you have any resources that can address these, it will be a life saver!  
Thanks again.  
 ![pofile](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/b/5bd2f7908ca68dbe474a0a93d3c4f7100a233c21.png)

---

<div class="post-metadata">

### Author: ![kartik14](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik14/32/44782_2.png) [@kartik14](https://community.thunkable.com/u/kartik14)
#### Post date: [April 4, 2020, 4:04pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/7 "2020-04-04T16:04:19Z")

</div>

Hi, @86188296cd8d41! 👋  
Thanks for the explanation - it helps a lot! 😺

* * *

> [@86188296cd8d41](#):
>
> If there was an actual button to click for individual items, then it would have been straight forward for me.

These would work too, just need to command the 3 buttons. But, the list-viewer looks minimal, and moreover, it’s challenging for you to do. 🙃

I have some question for you, have you prepared code for the _Show Details_, _Resources (screen)_ and _log out ?_ Also, do you you have separate screens for Show Details & Resources? And how do you relate this to transfer data between screens?

Thanks a lot! 😊

---

<div class="post-metadata">

### Author: ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)
#### Post date: [April 4, 2020, 4:16pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/8 "2020-04-04T16:16:47Z")

</div>

I guess I dont understand.

When you click ‘my details’ do you expect a popup to appear with that info, or do you want the user to be taken to a new screen. or are you trying to show dynamic content on the same screen?

---

<div class="post-metadata">

### Author: ![86188296cd8d41](https://avatars.discourse-cdn.com/v4/letter/8/a88e4f/32.png) [@86188296cd8d41](https://community.thunkable.com/u/86188296cd8d41)
#### Post date: [April 4, 2020, 4:19pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/9 "2020-04-04T16:19:59Z")

</div>

At the moment, just the _Resources (screen)_. I am currently working on the other two.

---

<div class="post-metadata">

### Author: ![kartik14](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik14/32/44782_2.png) [@kartik14](https://community.thunkable.com/u/kartik14)
#### Post date: [April 4, 2020, 4:20pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/10 "2020-04-04T16:20:56Z")

</div>

> [@kartik14](#):
>
> Also, do you you have separate screens for Show Details & Resources?

+1 @jared! 😺

Thanks! 😊

---

<div class="post-metadata">

### Author: ![86188296cd8d41](https://avatars.discourse-cdn.com/v4/letter/8/a88e4f/32.png) [@86188296cd8d41](https://community.thunkable.com/u/86188296cd8d41)
#### Post date: [April 4, 2020, 4:22pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/11 "2020-04-04T16:22:34Z")

</div>

Yes, i do.  
Thanks

---

<div class="post-metadata">

### Author: ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)
#### Post date: [April 4, 2020, 4:24pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/12 "2020-04-04T16:24:14Z")

</div>

I would recommend a custom row with buttons on each screen then with absolute positioning and a bottom offset of 0

this way you can add whatever buttons you want and this is easier than using the list viewr for what you are doing

---

<div class="post-metadata">

### Author: ![kartik14](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik14/32/44782_2.png) [@kartik14](https://community.thunkable.com/u/kartik14)
#### Post date: [April 4, 2020, 4:26pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/13 "2020-04-04T16:26:38Z")

</div>

> [@86188296cd8d41](#):
>
> At the moment, just the _Resources (screen)_

Thanks - Now I am clear.

I would too prefer @jared’s idea of simple buttons, it would be better.  
When button1 click, perform first action. When 2, then second action, & so on, and so forth.

Thanks! 😊  
**P.S.** @jared please explain me the technical terms of “bottom offset” & “absolute position”? I don’t know what they do/mean … 😇 Thanks! 😊

---

<div class="post-metadata">

### Author: ![86188296cd8d41](https://avatars.discourse-cdn.com/v4/letter/8/a88e4f/32.png) [@86188296cd8d41](https://community.thunkable.com/u/86188296cd8d41)
#### Post date: [April 4, 2020, 4:26pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/14 "2020-04-04T16:26:43Z")

</div>

I figure that this will be a lot easier, just wanted to learn how to make use of the ListView to do same…

Thanks you.

---

<div class="post-metadata">

### Author: ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)
#### Post date: [April 4, 2020, 4:29pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/15 "2020-04-04T16:29:34Z")

</div>

maybe this can help you.  
[https://x.thunkable.com/copy/c24d7ad4befc6f0e8274a80255531d7e](https://x.thunkable.com/copy/c24d7ad4befc6f0e8274a80255531d7e)

---

<div class="post-metadata">

### Author: ![kartik14](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik14/32/44782_2.png) [@kartik14](https://community.thunkable.com/u/kartik14)
#### Post date: [April 4, 2020, 4:30pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/16 "2020-04-04T16:30:45Z")

</div>

> [@86188296cd8d41](#):
>
> just wanted to learn how to make use of the ListView to do same…

It’s awesome that you wanted to learn a new thing, and it’s not **that** different from buttons.  
In this block,

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/1/41bf0b73483a038a445a7ca4217633985c0dbe1e.png)

you would just need to check the “item” = details/resources/log out with an if-else\_if block. And perform their actions respectively.

Thanks! 😊

---

<div class="post-metadata">

### Author: ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)
#### Post date: [April 4, 2020, 4:32pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/17 "2020-04-04T16:32:05Z")

</div>

yup!

if index = 1  
set label 1 = var resourceInfo  
if index = 2  
navigate to screen 2  
if index = 3  
call signout method

---

<div class="post-metadata">

### Author: ![86188296cd8d41](https://avatars.discourse-cdn.com/v4/letter/8/a88e4f/32.png) [@86188296cd8d41](https://community.thunkable.com/u/86188296cd8d41)
#### Post date: [April 4, 2020, 4:33pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/18 "2020-04-04T16:33:38Z")

</div>

Will try this now.  
While you are here. I posted this yesterday on the forum as well. Could you be of help as

…  
I just created a chatbot using Amazon Lex. Is it possible to incorporate the bot in Thunkable, if yes how?  
Or can I create a chatbot in Thunkable directly? If yes, I would love to learn how to do this.  
Thank you.

---

<div class="post-metadata">

### Author: ![86188296cd8d41](https://avatars.discourse-cdn.com/v4/letter/8/a88e4f/32.png) [@86188296cd8d41](https://community.thunkable.com/u/86188296cd8d41)
#### Post date: [April 4, 2020, 4:34pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/19 "2020-04-04T16:34:12Z")

</div>

Thank you. Will do this now.

---

<div class="post-metadata">

### Author: ![86188296cd8d41](https://avatars.discourse-cdn.com/v4/letter/8/a88e4f/32.png) [@86188296cd8d41](https://community.thunkable.com/u/86188296cd8d41)
#### Post date: [April 4, 2020, 5:34pm UTC](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061/20 "2020-04-04T17:34:40Z")

</div>

This worked!  
Thanks to you both. @kartik14 @jared  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/9/b999a4c96bb7694e6751bf66597455db7ae6c0b8.png)

[Next page](https://community.thunkable.com/t/solved-listview-with-links-and-pictures/554061.md?page=2)
