How to create two grids/shelfs in TVML catalog template

Hi,


Catalog template allows to create menu on left side and it should display related content on the right hand side view.


With the below code i can see only one grid with only one row of images. If i add 20 images also, its all coming in a single row with one section heading.


<document>

<catalogTemplate>

<banner>

<title>Movies</title>

</banner>

<list>

<section>

<listItemLockup>

<title>All Movies</title>

<decorationLabel>6</decorationLabel>

<relatedContent>

<grid>

<section>

<lockup>

<img src="path to images on your server/Car_Movie_250x375_A.png" width="250" height="376" />

<title>Movie 1</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375_B.png" width="250" height="376" />

<title>Movie 2</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375_C.png" width="250" height="376" />

<title>Movie 3</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375.png" width="250" height="376" />

<title>Movie 4</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375_C.png" width="250" height="376" />

<title>Movie 5</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375.png" width="250" height="376" />

<title>Movie 6</title>

</lockup>

</section>

</grid>

</relatedContent>

</listItemLockup>

</section>

</list>

</catalogTemplate>

</document>


But i need two sections with different heading. So i copied grid content and pasted again.


<document>

<catalogTemplate>

<banner>

<title>Movies</title>

</banner>

<list>

<section>

<listItemLockup>

<title>All Movies</title>

<decorationLabel>6</decorationLabel>

<relatedContent>

<grid>

<section>

<lockup>

<img src="path to images on your server/Car_Movie_250x375_A.png" width="250" height="376" />

<title>Movie 1</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375_B.png" width="250" height="376" />

<title>Movie 2</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375_C.png" width="250" height="376" />

<title>Movie 3</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375.png" width="250" height="376" />

<title>Movie 4</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375_C.png" width="250" height="376" />

<title>Movie 5</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375.png" width="250" height="376" />

<title>Movie 6</title>

</lockup>

</section>

</grid>

<grid>

<section>

<lockup>

<img src="path to images on your server/Car_Movie_250x375_A.png" width="250" height="376" />

<title>Movie 1</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375_B.png" width="250" height="376" />

<title>Movie 2</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375_C.png" width="250" height="376" />

<title>Movie 3</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375.png" width="250" height="376" />

<title>Movie 4</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375_C.png" width="250" height="376" />

<title>Movie 5</title>

</lockup>

<lockup>

<img src="path to images on your server/Car_Movie_250x375.png" width="250" height="376" />

<title>Movie 6</title>

</lockup>

</section>

</grid>

</relatedContent>

</listItemLockup>

</section>

</list>

</catalogTemplate>

</document>


But it is not showing two grids with different rows of images.

[![ I need two grids( Public, Private) under one section.][1]][1]

[1]: https://i.stack.imgur.com/KPbtU.jpg


Can any one help me to solve this problem.

Thanks.

Up vote post of arjunmca Down vote post of arjunmca
1.2k views
Posted by
arjunmca
Reply
Add a Comment

Replies

Have you tried using 2 sections?

Posted by
Frameworks Engineer
Up vote reply of Frameworks Engineer Down vote reply of Frameworks Engineer
Add a Comment

Yes, i have tried <Section> tag. Section tag add a element on left side panel, not on right side of grids.

But i have seen in one of the app, that supports catalog template can provide 2 grids/shelts.

Posted by
arjunmca
Up vote reply of arjunmca Down vote reply of arjunmca
Add a Comment

Sorry I wasn’t being specific. I meant have you tried 2 sections in your grid element (there is already one there)?

Posted by
Frameworks Engineer
Up vote reply of Frameworks Engineer Down vote reply of Frameworks Engineer
Add a Comment

Yes, i have tried adding a one more section under a grid. Two rows are coming, but header name 'Private' is not displaying.


https://i.stack.imgur.com/HJWdq.png




<document>

<catalogTemplate>

<banner>

<title>Movies</title>

<button searchDocumentURL = "/js/Search.xml">

<text>Search</text>

</button>

<monogramLockup>

<monogram src="GoodPic.jpg"

<title>Vijay</title>

<subtitle>Actor</subtitle>

</monogramLockup>

</banner>

<list>

<section>

<listItemLockup>

<title>All Movies</title>

<decorationLabel>4</decorationLabel>

<relatedContent>

<grid>

<header>

<title>Public</title>

</header>

<section>

<lockup videoURL="music.mp4">

<img src="pic1.jpg" width="100" height="108" />

<title>Apple Beauty</title>

</lockup>

<lockup videoURL="bapu.mp4">

<img src= pic2.jpg" width="100" height="108" />

<title>Bapu Bomma</title>

</lockup>

<lockup videoURL="yepilla.mp4">

<img src="pic3.jpg" width="100" height="108" />

<title>Ye Pilla</title>

</lockup>

<lockup videoURL="hello.mp4">

<img src="pic4.jpg" width="100" height="108" />

<title>Fevicol Se</title>

</lockup>

</section>

<header>

<title>Private</title>

</header>

<section>

<lockup videoURL="music.mp4">

<img src="pic1.jpg" width="100" height="108" />

<title>Apple Beauty</title>

</lockup>

<lockup videoURL="bapu.mp4">

<img src= pic2.jpg" width="100" height="108" />

<title>Bapu Bomma</title>

</lockup>

<lockup videoURL="yepilla.mp4">

<img src="pic3.jpg width="100" height="108" />

<title>Ye Pilla</title>

</lockup>

<lockup videoURL="hello.mp4">

<img src="pic4.jpg" width="100" height="108" />

<title>Fevicol Se</title>

</lockup>

</section>


</grid>

</relatedContent>

</listItemLockup>

</section>

</list>

</catalogTemplate>

</document>

Posted by
arjunmca
Up vote reply of arjunmca Down vote reply of arjunmca
Add a Comment

Headers added as an immediate child of the grid is used as the header for the whole grid. There can only be 1 header for the entire grid.


If you want headers in the sections, add the header as a child of the section.

Posted by
Frameworks Engineer
Up vote reply of Frameworks Engineer Down vote reply of Frameworks Engineer
Add a Comment

If i add the headers inside the section, header info is not displaying for both sections. Only images are displaying.


<grid>

<section>

<header>

<title>Public</title>

</header>

<lockup videoURL="apple.mp4">

<img src="photo25033745_1551780456881.jpeg" width="100" height="108" />

<title>Apple Beauty</title>

</lockup>

<lockup videoURL="bapu.mp4">

<img src="photo3936472_1551780456924.jpeg" width="100" height="108" />

<title>Bapu Bomma</title>

</lockup>

<lockup videoURL="yepilla.mp4">

<img src="photo3936472_1551780456924.jpeg" width="100" height="108" />

<title>Ye Pilla</title>

</lockup>

<lockup videoURL="fevicol.mp4">

<img src="photo25033745_1551780456881.jpeg" width="100" height="108" />

<title>Fevicol Se</title>

</lockup>

</section>

<section>

<header>

<title>Public</title>

</header>

<lockup videoURL="apple.mp4">

<img src="photo25033745_1551780456881.jpeg" width="100" height="108" />

<title>Apple Beauty</title>

</lockup>

<lockup videoURL="bapu.mp4">

<img src="photo3936472_1551780456924.jpeg" width="100" height="108" />

<title>Bapu Bomma</title>

</lockup>

<lockup videoURL="yepilla.mp4">

<img src="photo3936472_1551780456924.jpeg" width="100" height="108" />

<title>Ye Pilla</title>

</lockup>

<lockup videoURL="fevicol.mp4">

<img src="photo25033745_1551780456881.jpeg" width="100" height="108" />

<title>Fevicol Se</title>

</lockup>

</section>

</grid>

Posted by
arjunmca
Up vote reply of arjunmca Down vote reply of arjunmca
Add a Comment