# \[Solved\] how do I create a Custom layout for Data viewer in DnD

**URL:** <https://community.thunkable.com/t/solved-how-do-i-create-a-custom-layout-for-data-viewer-in-dnd/1888427>\
**Category:** Questions about Thunkable X\
**Created:** [May 22, 2022, 6:24am UTC](https://community.thunkable.com/t/solved-how-do-i-create-a-custom-layout-for-data-viewer-in-dnd/1888427 "2022-05-22T06:24:41Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![mattpb](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@mattpb](https://community.thunkable.com/u/mattpb)\
**Post date:** [May 22, 2022, 6:24am UTC](https://community.thunkable.com/t/solved-how-do-i-create-a-custom-layout-for-data-viewer-in-dnd/1888427/1 "2022-05-22T06:24:41Z")

</div>

How do i create the Custom data viewer layout in the old UI and make it available in the DnD? I can not work it out.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 22, 2022, 7:00am UTC](https://community.thunkable.com/t/solved-how-do-i-create-a-custom-layout-for-data-viewer-in-dnd/1888427/2 "2022-05-22T07:00:32Z")

</div>

Create the layout in the Snap to Place interface. Click on a component (such as a row or column) that includes all of the other components in the layout and then click the Save as Data Viewer Layout button:

![Screen Shot 2022-05-21 at 11.57.10 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/9/99572585b16e1b4ac3594e8c053d947c62d05139.png)

In the Drag & Drop interface, click on a Data Viewer List (or Grid) and then click on the current layout to display a list of custom layouts you’ve made:

 ![Screen Shot 2022-05-21 at 11.58.27 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/7/1793401b246e701812618ab2d42e713c1b1ccfd8.png)

---

<div class="post-metadata">

**Author:** ![mattpb](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@mattpb](https://community.thunkable.com/u/mattpb)\
**Post date:** [May 27, 2022, 6:16pm UTC](https://community.thunkable.com/t/solved-how-do-i-create-a-custom-layout-for-data-viewer-in-dnd/1888427/3 "2022-05-27T18:16:44Z")

</div>

Hi all,

I cant seem to do that in DnD i just dont have the options/and or the be able to breakdown the components of the data viewer on the left hand side. Any ideas?

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

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 27, 2022, 7:23pm UTC](https://community.thunkable.com/t/solved-how-do-i-create-a-custom-layout-for-data-viewer-in-dnd/1888427/4 "2022-05-27T19:23:09Z")

</div>

I’m not really sure what you mean. Both of my screenshots are from the **right** side of the page. What I circled is where you click to select a custom layout that you’ve saved (in DnD). On your screenshot, it’s right below “List Item Layout”.

If you’re referring to the spot in my screenshot where it says “Get Activity Icon property from column” and then “BackgroundPict → # Activity Icon”, that’s because I enabled Advanced Binding when saving the layout (in StP):

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/7/777acccd7c565ad8b6cde1b0dace2ed20919d83d.png)

---

<div class="post-metadata">

**Author:** ![mattpb](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@mattpb](https://community.thunkable.com/u/mattpb)\
**Post date:** [May 27, 2022, 7:37pm UTC](https://community.thunkable.com/t/solved-how-do-i-create-a-custom-layout-for-data-viewer-in-dnd/1888427/5 "2022-05-27T19:37:16Z")

</div>

Hi.

Sorry I mean I have no idea how to create a custom layout in the old interface (not DnD). I added a data viewer list, however I can not seem to figure out how to create/customise it? I am just lost.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 28, 2022, 5:38am UTC](https://community.thunkable.com/t/solved-how-do-i-create-a-custom-layout-for-data-viewer-in-dnd/1888427/6 "2022-05-28T05:38:53Z")

</div>

Ah, okay. You don’t add the Data Viewer List to the Snap to Place (StP) project. You just use rows and columns to create the layout you need.

See the video here: [Custom Data Viewer Layout - Thunkable Docs](https://docs.thunkable.com/custom-data-viewer-layout)

---

<div class="post-metadata">

**Author:** ![mattpb](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@mattpb](https://community.thunkable.com/u/mattpb)\
**Post date:** [June 4, 2022, 7:13am UTC](https://community.thunkable.com/t/solved-how-do-i-create-a-custom-layout-for-data-viewer-in-dnd/1888427/7 "2022-06-04T07:13:00Z")

</div>

Thanks.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [September 2, 2022, 7:13am UTC](https://community.thunkable.com/t/solved-how-do-i-create-a-custom-layout-for-data-viewer-in-dnd/1888427/8 "2022-09-02T07:13:26Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.