Today I’d like to show you a new extension that allows to programmatically hide tabs and properties in edit mode. Using this feature, the editor won’t see the unused controls when working with content.
Hide tabs and properties in edit mode

Hiding tabs

In my previous article I showed a plugin that allows to convert pages in edit mode. It can be useful for complex models. For simple class hierarchy we don’t have to use models inheritance, but instead one content type can contains properties from all classes.
For example, we have to implement BlogPostPage, that has two specific versions: Recipe (with additional Title and Body) and SponsoredBlogPost (with additional CustomerLogo and SiteUrl).
BlogPost class diagram
We can add three page types for each class or create one BlogPostPage that contains properties from BlogPost, Recipe and SponsoredBlogPost.
Hierarchy in one model
There will be also BlogPostType enum property that defines which type we are currently using.
BlogPost type property

Now all properties are display under the content tab. The Editor can be confused about which properties should be used.
BlogPostPage properties
In next step we could use separated tabs to show Recipe specific properties and SponsoredBlogPost specific properties.
BlogPost with additional tabs

But the best option would be to show the Recipe tab only when BlogPostType is set to “Recipe”. Using my plugin you can hide tabs based on custom condition. Conditions are set on the on the server, without adding single line of JavaScript. To hide or show the tab based on property value you can use ShowTabWhenPropertyEquals and HideTabWhenPropertyEquals attributes. For the example above, for BlogPostType it will look like:

As you can see, ShowTabWhenPropertyEquals was used twice on a single property. The first attribute usage is to display Recipe tab and second to display Sponsored tab.

After running the site, tabs will be automatically displayed based on property value.
Showing hidden tabs

Hiding properties

The similar situation is with the properties. Sometimes the visibility of property depends on on value of another property. For example we can have “Show related articles” checkbox. When checkbox is unchecked, the Header and “Related articles” properties are not used in view mode and it would be good to hide them.
Hide properties

To hide property when value of another property changed use ShowPropertyWhenValueEquals or HidePropertyWhenValueEquals attribute.

You can see that ShowPropertyWhenValueEquals was used twice on one property, first time to control the visibility of RelatedArticlesHeader and second for RelatedArticles.

From now Textbox and ContentArea will be displayed only when checkbox is checked.
Hide properties in edit mode

More advanced scenario

The extension handles also more complex conditions when hiding tabs and properties. For example, to show a tab we have to check value of more than one property. To implement this we should use ILayoutVisibilityResolver.
We need to implement two methods:

  • GetHiddenTabs – get list of hidden tabs for current content
  • GetHiddenProperties – get list of hidden properties for current content
  • Of course the resolver can be used together with attribute based conditions.

    The “Secret” will be displayed only when 3 textboxes have specific values.
    Hide tab advanced example

    The full source code is available on github. I also created a nuget package.