You haven’t seen much from me for a while, it’s because I was working on a bigger feature. Haven’t include much text or code snippets this time. Rather wanted to present overall functionality. Lot of images and animated gifs. Take a look on ChildrenGrid custom view. View displays a configurable list of children for current content.

Overview

Main navigation tree is useful when child nodes are within the eye view. When content node contains more then for example 30 children it’s hard to locate an items.

flat list

Using table view should also simplify displaying filtered results and allow to show more information about the content in the columns.

children grid wireframe

I started developing grid-based list of child pages. I added some simple filters, infinite scroll and common editing toolbar. The list is registered as new custom view available for every Content Type. Here is the overview:

Childrengrid view Overview

And here is how the navigation looks like:
Navigating the list

Configuring columns

But what columns should be showed on the list? Probably editors with multilanguage sites would like to manage languages from the grid. For others,  could be properties related with content publication like “Published By” and “Published On”. Also would be good to display properties specific to for the site like “Hero image” or “Short description”.
To help all editors I allow to configure the columns. You can show, both standard properties like “Name”, “Status”, “Include in menu” and any custom property added to the model.

Columns are configured on the server side. To simplify configuration code I prepared a builder class. The sample columns configuration looks like:

columns builder

Column renderers

The column is not just property value rendered as a text. I implemented a set of cell renderers for displaying images, content references or dates. For example the image renderer displays thumbnail. After editor clicks on the thumbnail the popover with higher resolution and link to the image are displayed.
Navigating to images

The list of built-in renderers is quite long. It inclides renderers like:

  • Name – with name of the content, content icon and language information (same as in navigation tree)
  • Status – localized content status
  • Type – localized content type name
  • Languages – displays list of all site languages
  • Dates – formatted date
  • Content Link – with editable and previewable versions

Custom renderers

Developer can implement custom renderer. For example when ProductPage type has MajorVersion, MinorVersion, Relase Version, BuildVersion integer properties and we want to include this information on the grid.

product properties

We probably would like to show it as one column with dot separated values. In this example it wil be “10.7.1.234”.
With custom renderer it will be display like:

versions column

Main menu

ChildrenGrid has context menu available next to current content name and in every row of children. Commands provider is shared between the View and main navigation. It means that view will display same actions as the tree. Even when you implement custom tree context menu action using the “epi-cms/plugin-area/navigation-tree” it will be showed in the view. For example I added “Preview” command that opens selected page in View Mode.
shared menu example

Working with languages

Working with languages in ChildrenGrid is similar to Navigation Tree. All translated versions and master versions for non-translated pages are displayed by default. When translation is missing, content name has italic font style.

languages SV

To show only translated pages you can uncheck “All languages” filter. It’s the same filter as “Show content in current language only” on the Navigation Tree.

languages SV filtered

ChildrenGrid has additional feature. There is a special column renderers for managing languages. For every cell it displays all languages available on the site. Missing translations are grayed out. Clicking on the flag will change the language context and page context.

navigating between languages

Configuring view for page type

For ProductsListPage container, which can contains only ProductPage types, we would like to show different columns, that for other pages in the system. It doable using ChildrenGrid, because columns are configured through the extended UIDescriptor (ExtendedUIDescriptor). For example there are two UIDescriptors, one for SitePageData (the base class for all pages in the solution) and one for ProductsListPages container type.

UIDescriptor
For SitePageData we show general information:
columns site page data
But for Products we show thumbnail, version and and categories:
columns products

Navigation tree with locked nodes

For nodes with large number of children expanding child nodes can be turned off. Those nodes will be showed with a different icon.

locked node

It can be done through web.config where I added ContentContainers setting. Setting stores coma separated list of ContentReferences that should be displayed as Container pages and have no expand button.

web.config ContentContainers

The Administrators can turn on and off nodes directly through the Edit Mode using “Manage Containers” button manage locked nodes. Of course without ContentReferences added through web.config which are disabled globally. For them it’s not possible to turn off containers through the UI.

locked items 2

For other pages, command is enabled.

locked items

It’s a toggle button. When page is not a container, after clicking the button, it will become a container. When page was a container, after clicking the button, page won’t be a container anymore.

converting page to container

Children View as MainNavigation Component

Custom view give the overview of the children, but it could be useful to locate the content and using D&D add it to the ContentArea. For this reason ChildrenGrid can be registered in the navigation pane.

Component

Columns are also configurable, so you can extend the pane to have more information about the content.

main navigation component with columns

You can use search to filter the list and D&D items to ContentReference properties.

drag drop from component to property

You can also edit the page, filter the list and get back to edited page context.

navigating component

ChildrenGrid in link properties

Selecting content using “Select content” dialog is quite hard when container has more than 30 items.

selecting a content from tree

I prepared extended versions for ContentReference, ContentArea and ContentReference list properties. They can be used by adding “ChildrenView” UIHint:

  • ContentReference
    property ContentReference
  • ContentArea
    property ContentArea
  • ContentReference list
    property ContentReferenceList
  • Properties have additional button for selecting content using ChildrenGrid. Clicking the button will show the dialog with ChildrenGrid.
    property select content
    Of course there is a support for “Allowed types” and multiselect to ContentArea and ContentReference list.
    Below is a demo of adding item to ContentReference property:

    selecting a ContentReference

    and demo of adding items to ContentArea:

    selecting ContentArea items

    You can define starting point for properties. For example for “Featured Articles” we would like to show the dialog with “News” container while for “Product links” property from the “Products” container.

    different starting points

    As you can see ChildrenGrid can be used in various scenarios, as a custom view, navigation component and in the link properties. It has columns configurable per page type and allow to customize renderers in many ways. There is also support for filtering and managing languages.