Manageable content blocks

Justin L asked on April 28, 2017 15:25

Hello kentico guru's,

Currently i am trying out Kentico and trying to create a website on which the CMS-user can manage where/how the content is being displayed. To be more specific i want to create 'content sections' which can be rearranged in the CMS based on what's more important for the CMS-user. To make myself more clear i created an image displaying what i am trying to achieve.

Image Text

Some days 'Product information' is more important than 'Selling points' and vice versa, and sometimes 'About us' needs to be the second block on the page etc. So in an ideal situation, the CMS-user can login and drag/drop the sections to arrange them in order of their preference.

Currently i've created different page types for each section, including one to be repeated for the selling points and am displaying them with multiple Universal viewers placed in a single Webzone. Am i headed in the right direction by doing it this way, or is there a much better way to do this within Kentico? (question #1). I was thinking to create a user-role that has permission to modify webparts (the universal viewers) so the different viewers can be arranged in order to their preference. Is this even possible? (question #2)

Image Text

And if so, how do i create the selling points section, which also displays all the sub page types (USP #1, USP #2 etc.), or is there a better webpart for doing this then the Universal Viewer i am currently using? (question #3)

Thank you,

Best regards, Justin

Recent Answers


Brenden Kehren answered on April 28, 2017 15:44

Referring back to your original question on an old post: https://devnet.kentico.com/questions/reusable-display-components-aspx-templates.

You can use whatever way you want. People will say to use widgets and people will say use an editable text webpart and let them enter their own content. The solution you're looking at above will work perfect and I've used it several times to ensure the content is structured just how the content editor wants and will have the same branding across the whole site.

To answer your question(s), your universal viewer with hierarchical transformations will do all the leg work for displaying your content. Your "Page" will have the template which holds the universal viewer. The next level below your page will be a generic custom page type, maybe called Summary which holds the title and some copy. In your case titles may be "Introduction", "Selling Points", or "About US", etc.

Next the 3rd level in will be more detailed information. In your case, individual selling points or individual products or even call to action items (in about section). So you'd add those below the respective sections and set your hierarchical transformation to display the respective content.

The article I shared which Joel posted has a lot of this info in it. In fact, I was the one who shared the concept with him before he blogged about it. I believe the only thing he has really left out is the info on the hierachial transformations. So you might look in the documentation for that. The nice part about this concept is it creates 1 single query to the database to load your page AND it's an optimized query so it loads fast considering the amount of data it can bring back and what is is doing to process it.

1 votesVote for this answer Mark as a Correct answer

Rui Wang answered on April 28, 2017 16:16

Hi Justin

I've actually done a short video on how to create content blocks in Kentico. So farm at least 3-4 clients have used this approach. Here is the link: https://www.youtube.com/watch?v=voumgLD-R1Y

2 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on April 28, 2017 16:27

The difference between the approach you're on and the approach Rui demos in his video is you can nest your content with the solution you're already on and you'd have to setup Rui's solution to accommodate that nesting.

0 votesVote for this answer Mark as a Correct answer

Justin L answered on May 1, 2017 10:36 (last edited on May 1, 2017 10:40)

Thank you both Brenden and Rui. I've been trying to create the 'blocks' using page types and the hierarchical transformations, unfortunately i did not manage to create a usable solution. Using transformations is new to me, so using hierarchical transformations is a little too much abracadabra to me when i read the documentation.

The video Rui posted is really helpful and looks like a usable solution for what i want to create. I really find the video style explanation very helpful, as it shows exactly where different settings are meant to be inserted etc. I will now be trying this out!

By the way, in the documentation for Hierarchical transformations an example is referenced at:

Image Text

But i was not able to find it. What is meant with 'Examples'? Just the corporate site?

Best regards, Justin

0 votesVote for this answer Mark as a Correct answer

Rui Wang answered on May 1, 2017 15:09

Justin, yes, The corporate sample site has a Examples section which is one example per web part (almost). It's a typical practice we recommend for someone learning Kentico to install both Corp site and Dancing Goat site to learn from examples.

0 votesVote for this answer Mark as a Correct answer

Justin L answered on May 1, 2017 16:19

Hi Rui, i was looking in the actual webpart's section. I've now finally figured out that the 'examples' is a separate page in the Pages application haha (may be useful to mention this in the documentation).

When i try to implement the Page type and widget solution you show in your video, i run into the following error when trying to place the widget (i double checked that everything is the same as mention in your video):

Message: 
[DataConnection.HandleError]: 

Query: 
SELECT TOP 1 [Content], [DocumentCulture], [NodeID], [NodeLinkedNodeID], [NodeSiteID], [ClassName], [NodeLevel], [NodeOrder], [NodeParentID], [DocumentCheckedOutVersionHistoryID]
FROM View_CMS_Tree_Joined AS V WITH (NOLOCK, NOEXPAND) LEFT OUTER JOIN COM_SKU AS S WITH (NOLOCK) ON [V].[NodeSKUID] = [S].[SKUID]
WHERE [NodeSiteID] = @NodeSiteID AND ([NodeAliasPath] = @NodeAliasPath AND [DocumentCulture] = @DocumentCulture)

Caused exception: 
Invalid column name 'Content'.

I've figured out it has something to do with the Columns property on the widget which you set on 4m04s in your youtube video. Because when i change this value, the value in the error message also changes. I've checked to make sure that the 'page type'-field is also correctly set to 'Content'. What could be causing this error?

Best regards, Justin

0 votesVote for this answer Mark as a Correct answer

Rui Wang answered on May 1, 2017 16:24

The "Content" field is name of the main text field I defined for the page type for entering the content. It's a long text type.

0 votesVote for this answer Mark as a Correct answer

Justin L answered on May 1, 2017 16:34 (last edited on May 1, 2017 16:39)

Yes, thats what i have too. I've checked for spaces and differences in capitals, but there are no differences!

The field in my page type: Page type field

The Widget property: Widget properties

I've re-created them multiple times, but everytime i run into the same 'column not found' error, do you have any suggestions?

Edit: the only difference i can find is, that the form in my Page type shows an extra "Url pattern" field, that i don't see in your video. I assumed you created a 'content only' page type, is that correct? Image Text

0 votesVote for this answer Mark as a Correct answer

Rui Wang answered on May 1, 2017 16:38 (last edited on May 1, 2017 16:42)

For the ClassNames property of the widget, did you specified the Page Type class name?

Image Text

1 votesVote for this answer Mark as a Correct answer

Justin L answered on May 1, 2017 16:45 (last edited on May 1, 2017 16:55)

I have not changed anything on that property (as the video didn't show that).

Image Text

Is this correct?

Edit: I noticed you added an image now, and i did not have the default value. When i enter this, my widget is working. Thank you very much!

0 votesVote for this answer Mark as a Correct answer

Rui Wang answered on May 1, 2017 16:57

Sorry if I missed that in the video. But for repeaters, you always need to specify the page type (classname), other wise, the SELECT statement is doing a select from the joined view of CMS_Tree & CMS_Content, the page type table is missing until you specify that in the ClassNames field.

ClassName is one of the most important property for CMS Repeater (https://docs.kentico.com/k10/references/kentico-controls/cms-controls/cms-controls-listings-and-viewers/cmsrepeater)

1 votesVote for this answer Mark as a Correct answer

Justin L answered on May 3, 2017 10:40 (last edited on May 3, 2017 10:51)

Ok nice, it is working well now, thanks Rui.

The only thing i would like next, is to be able to nest items inside a single 'block' (as shown with the selling points example), and as Brenden mentioned this could be accomplished by using the Hierarchical Transformations and Universal Viewers method. But in this method the editor would not be able to adjust the blocks himself, because the universal viewer its a webpart and not a widget, right? And if a Universal Viewer is removed and then added again, the 'editor' would have to select all the transformations again, which is not really desirable.

Is there an easy way to combine these methods, so an editor himself can add more/less sub-items within a block?

For clarification, this is what i have now, using the widgets method:

Image Text

This would be what i want (i photoshopped the example):

Image Text

Thank you for helping me learn so much about kentico,

Best regards, Justin

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on May 3, 2017 13:25

With the method I mentioned you adjust the content in the content tree not directly on the page. IMHO widgets are really only worth the overhead, extra efforts and pains of you want to do content personalization. With a widget approach you have to build each page and if the widget changes from a development standpoint you need to remove it and readd it to the page. Very very time consuming if you use a widget on a 100 pages.

0 votesVote for this answer Mark as a Correct answer

Rui Wang answered on May 3, 2017 14:02 (last edited on May 3, 2017 14:05)

Justin, assuming your are using the Content Block widget in the widget zone right now, correct?

If you want to take the module approach, why nest the Selling Points under the Selling Points intro? That block of intro text for Selling Points can be another content block. In this approach, you only need to allow editor to select the "content block container". So the Selling Points Intro will use the container style to be (e.g. col-md-12), and the individual SP will use (e.g. col-md-4).

If you don't want to do it the way above, you can also go with the inline widget option, which you don't have to nest content in the tree. You can essentially have a "folder" with all Selling Point content. Then when you create the "Selling Point parent" block, you type the intro, then you add the content block widget as inline widget 3 times into that content for the 3 SPs. Then the SP parent block can be added to the PAGE. This way, Selling Point content can be shared across multiple pages, no need to duplicate them if this could happen. If there is no sharing/reuse involved, then I guess content block approch is not even needed.

Hope you can understand what I said above. :)

0 votesVote for this answer Mark as a Correct answer

Justin L answered on May 8, 2017 13:50

@Brenden i have continued playing around with the method you mentioned and i finally have it working, it took some hard looking at how the example on the Corporate site handles the Hierarchical transformations but now i've figured it out.

The only this i'm missing with this approach, is that if i want to use a block on multiple pages i would have to duplicate the content everytime, making the management a little bit of a hassle. Or is there a way to create a linked duplicate or something that i'm not aware of?

Image Text

@Rui for the way my design is made up, the individual sellingpoints need to be inside the main selling points container, so i will be trying the inline widgets method you mentioned. I do like Brenden's method a little bit better, because you can easily see what the page contains by looking at the content-tree.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on May 8, 2017 14:05 (last edited on May 8, 2017 14:08)

There are 2 methods for this but they depend on 1 thing, do you need to have URLs to this data or is it really just content on a page? For example you need a physical URL to /Products/Selling point 1 and /Home/Selling point 1.

If you need the physical URL then:

  • place the content in the original location in the content tree. Next create a linked page in the place of your second and third and fourth and so on go.

If you don't need the physical URL then:

  • place your content in a global /content folder and setup sub folders as needed. Then in your page templates or widgets set the path to capture that specific content. You could also use categories and assign categories to the main pages you want the shared content to show on then assign 1 or many of those categories to your shared content vs. placing it in a sub folder of /content/. I've taken this approach many times and it works great.

See a post here about linked pages and sharing content.

1 votesVote for this answer Mark as a Correct answer

Justin L answered on May 8, 2017 14:32

Thank you, can't believe i missed that. That works exactly like i wanted it to! :)

0 votesVote for this answer Mark as a Correct answer

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