There are times when you would like to group some of the episerver properties together for the editors. There are many ways of doing this. One way is how Per Nergård does it. But if you extend his thoughts you can get results like this:
or you can group and display connected properties together like this
There is also possible to get properties out that havent before been visible like PageCreated, PageChanged, PageChangedBy
Here is a description of one way of doing it.
1) Make the PropertyNiceEditMode read from an html file that shows how you want to outline the other properties
<script src="/EditLayOut/ShowHide.js" type="text/javascript"></script>
<div style="border:1px solid black;">
<table>
<tr>
<td>{PageName}</td>
<td>{Heading:DisplayName}</td>
<td>{Heading}</td>
</tr>
<tr>
<td onclick="ShowHide('paths','pathsExpand','hide settings','more settings');" id="pathsExpand" style="cursor:hand;color:Blue;">more settings</td>
<td colspan="2">{PageVisibleInMenu} {PageVisibleInMenu:DisplayName}</td>
</tr>
</table>
<div id="paths" style="display:none;">
<table >
<tr >
<td>{PageExternalURL:DisplayName}</td>
<td>{PageExternalURL}</td>
</tr>
<tr>
<td>{PageURLSegment:DisplayName}</td>
<td>{PageURLSegment}</td>
</tr>
</table>
</div>
</div>
2) Parse this html and and make this property add this as it’s edit mode. substitute the bracelets' with the edit mode of the property or the name.
public void SetupControlStuff()
{
Control container = this;
int start = 0;
foreach (Match match in PropertyNiceEditMode.MyMatches)
{
if (match.Index > start)
{
AddText(PropertyNiceEditMode.LayOutString.Substring(start, match.Index - start), container);
}
string key = match.Groups["PropValue"].Value;
string[] items = key.Split(":".ToCharArray());
PropertyData prop = GetProperty(items[0]);
if (items.Length == 1)
{
if (prop != null)
CreateSubProperty(container, prop, this.RenderType);
else
AddText(key, this);
}
else
{
if (items[1] == "DisplayName")
AddText(prop.TranslateDisplayName(), this);
if (items[1] == "Description")
AddText(prop.TranslateDescription(), this);
}
start = match.Index + match.Length;
}
if (start < PropertyNiceEditMode.LayOutString.Length)
AddText(PropertyNiceEditMode.LayOutString.Substring(start), container);
}
3) Attach to the edit panel on init event. This can be done by making a dummy EditPanel plugin. Find all properties of type (1) and hide all properties it uses.
[GuiPlugIn(Area = PlugInArea.EditPanel)]
public class AttachEvents : EPiServer.UserControlBase, ICustomPlugInLoader
{
public PlugInDescriptor[] List()
{
editPanel = HttpContext.Current.Handler as EditPanel;
if (null != editPanel)
editPanel.Init += new EventHandler(editPanel_Init);
return new PlugInDescriptor[] { };
}
void editPanel_Init(object sender, EventArgs e)
{
dataForm = FindControl<PropertyDataForm>((Control)sender, null);
if (dataForm != null)
dataForm.Populate += dataForm_Populate;
}
private void dataForm_Populate(object sender, EventArgs e)
{
PropertyDataForm ctr = sender as PropertyDataForm;
List<PropertyNiceEditMode> AttachTo = new List<PropertyNiceEditMode>();
foreach (string name in ctr.Data.Keys)
{
if (ctr.Data[name] is PropertyNiceEditMode)
AttachTo.Add(ctr.Data[name] as PropertyNiceEditMode);
}
foreach (PropertyNiceEditMode prop in AttachTo)
prop.HideProperties(ctr.Data);
}
EditPanel editPanel;
PropertyDataForm dataForm;
public static T FindControl<T>(Control control, string id) where T : Control
{
T controlTest = control as T;
if (null != controlTest && (null == id || id.Equals(controlTest.ID)))
return controlTest;
foreach (Control c in control.Controls)
{
controlTest = FindControl<T>(c, id);
if (null != controlTest)
return controlTest;
}
return null;
}
}
And you are good to go :)
Downloads