Vertically stacking multiple page layouts in a single page?

Yang Wen asked on March 26, 2015 19:23

The desire is to leverage Kentico Portal UI to build up pages consisting of vertically stacked full width "blocks". Each block can contain it's own column based layout. The goal is to build up a page with a rich mixture of content areas.

Page layout(ASCX user control) is a very intuitive construct for creating HTML + CMS server controls. I would LOVE the ability to stack multiple(unlimited) number of page layouts in a single page. However this methodology doesn't seem to be supported.

Ques: 1) Is layout web parts is the only solution for what I want to achieve? 2) When creating a custom layout web part, why can't we populate the ascx file with markup and CMS zone controls? It seems like we must use the AddZone method in the code-behind to create the zone controls. Only the with the latter methodology do the zone controls show up in the Portal UI.


Recent Answers

Brenden Kehren answered on March 26, 2015 21:11

I've taken this same approach to several sites. I use a single page template with a Hierarchical Viewer webpart. I've created multiple page types that have different transformations for them, some based on a page or template but ideally the majority of them will use the same layout.

Your Hierarchical transformations then have a First and Last transformation, in there you define the header or wrapper of the "full width row" of content. Then you have your item transformations you specify your content that the user enters in on the Form tab for that page type. So below each of your pages you can have several content blocks, with different layouts (transformations) and you can simply reorder them in the content tree to display them in a different order on the page.

0 votesVote for this answer Mark as a Correct answer

Yang Wen answered on March 27, 2015 00:27 (last edited on March 27, 2015 00:28)

Thanks for the reply.. I don't quite follow your approach.. Not familiar with the hierarchical web part yet.

I created a custom Layout web part, using AddZone method to create the multiple web part zones I desire in my 3 column layout. I pasted the HTML from my mockup into the ASCX file.

Worked great in the Portal UI as well as Preview. However!

I dragged out a second instance of the same Layout web part to the same page. I expected to be able to fill the second instance with different content. However Kentico loaded the identical content as the first one! I assume this is due to the control IDs being identical. Argghh.. Why is this so counter intuitive!

I wonder when I drag out a second web part, is Kentico creating a new instance of the layout web part? Perhaps the solution is to assign a random number as the zone ID in the call to AddZone?

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on March 27, 2015 04:50

If you're using the same layout and pasted static content into it, then it will display the same content. Using static or editable text webparts, really aren't ideal as they don't allow you to have dynamic content. Your best approach should be using custom page types and using repeaters or the hierarchical viewer to display the content on the page.

I'd spend some time reading up and practicing with the hierarchical viewer before you get too far into what you're doing. Taking the time up front to learn a little pays dividends in the end. :)

0 votesVote for this answer Mark as a Correct answer

Yang Wen answered on March 27, 2015 16:01 (last edited on March 27, 2015 16:17)

I'm using editable text web part just to test whether unique content can be persisted between these multiple instances of the same web part.

I tested the same use case with Kentico's out of the box Columns Layout Web Part. I dragged out two Column Web Parts to my page, then placed editable text controls across the two column web parts, I was able to maintain unique content across the multiple editable text web parts.

It looks the Zone ID value in my custom layout web part must not be set properly, leading to conflict in ID that results in referencing of same value across multiple web parts

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.