This is part 2 of a series on improving the Page Editor experience, mostly in the way you configure it. Part 1 can be found here.
As an author, I have added a component of type General Widget to a page using the Page Editor. The component accepts a datasource, but because I have not specified one yet, this is what I see:
I am not prompted in any way to specify a datasource - if I forget and publish the page regardless, visitors will see a blank white box on the homepage.
There are two things you can do to ensure that this does not happen - configure the Page Editor to force a selection, and/or provide sample data that appears when a component is empty.
The following set of steps takes you through setting up datasource template and datasource location restrictions.
Authors are now prevented from adding a component of this type without specifying a datasource.
Even though I am prompted to add a datasource when adding a new component to a page, I could still clear the datasource (whether by accident or because I'm intending on changing the datasource).
This is where I might want to provide sample data - either to prompt the author to pick a datasource or generic text that, if the page is published, does not spoil the visitor's experience as much as an empty component.
One way to provide sample data is to hardcode content into an ASP.NET panel and show or hide that panel depending on whether or not the datasource has been set - see code sample below:
>Please choose a datasource!</
However, this means that a) the sample content is not translatable and b) if any changes are required, a developer would have to be summoned to do the work.
A better way, therefore, is to provide a sample data repository somewhere in your Sitecore tree:
In your component's code-behind, if no datasource has been specified, force your controls to use the item from your samples repository (in the example, ItemReferences.SampleWidget is a centrally stored Item object):
source = ItemReferences.SampleWidget;
WidgetHeading.Item = source;
WidgetText.Item = source;
WidgetLink.Item = source;
WidgetImage.Item = source;
Edit (29/07/2013) - When setting the source to sample data (ItemReferences.SampleWidget in the above example), you may want to set each Sitecore control's DisableWebEditing property to true - this forces authors to pick a data source rather than simply editing the sample and assuming that it will automatically create a new data source.
If you do that, the component will always think it has a datasource - this is fine if you haven't set up any restrictions (location and type), but if you have, you will never be prompted to select a datasource when adding a new component because it assumes you want to use the default - therefore, it's better to do the fallback in code.
Now, when a component does not have a datasource set, your sample data - which is translatable and editable by authors - will display:
If your component does not accept a data source - e.g. a ‘Two Column Content' component that draws its content from the context item - Sitecore will tell you that the fields have no text:
If you want default or sample data in this instance, use that data template's Standard Values to specify default values - e.g. instead of [NO TEXT IN FIELD] you would see ‘Your page heading here - make sure it doesn't go onto two lines'.
Surely the easiest way to make sure that a visitor never sees a blank component is to check whether the datasource has been set, and if not, hide the component:
/* .... */
That's fine for visitors, but if I then try to edit the component in the Page Editor, I can no longer see the component, and therefore can't select to edit - components must display at least some HTML in order to be selectable.
Take the Banner component as an example - when I add a new banner component, because it relies on an image data source that has not yet been specified to give it shape, it's very hard to select it:
To solve this, you can:
In part 3, we will refine this approach by detecting whether or not the site is being viewed using the Page Editor