Customizing The Editing Screen

Note: This content is intended for developers. If you would like assistance customizing your site's editing interface and aren't comfortable following these instructions, please contact sales with a description of what you'd like done for a quote.

The new tabbed editing interface first released in August 2008 provides a more flexible customization mechanism than in the previous release. Without any involvement from EditMe support, developers can reorder, replace, and add tabs to their site's editing screen.

The EditFormPanels Page

The first step to customizing your site's editing interface is to create an EditFormPanels page. This specially named page provides EditMe with instructions for how to build your site's editings screen. Create this page with the following properties:

1. Create a new page named EditFormPanels.
2. Use the Code Editor or Text Editor and paste in the default code below.
3. Set the Content Type to XML (text/xml) on the Properties tab
4. Set the page security to Administrator View / Administrator Edit on the Properties tab

Once you've created your EditFormPanels page, paste in the following code. This code will build your editing screen exactly as it is by default.

<panels>
  <panel id="content"/>
  <panel id="metta"/>
  <panel id="properties"/>
  <panel id="attachments"/>
  <panel id="organize"/>
  <panel id="versions"/>
</panels>

To test that it's working, try changing the order of one of the panel tags. For example, swap the order of the properties and attachments tags, save, and reload your site's editing screen. If you don't see the change, make sure you've followed the instructions above for creating the page exactly.

Adding a New Panel

Each tab on the editing screen is referred to as a Panel. Once your EditFormPanels page is set up, you can create a new panel as follows:

1. Create a page for your new panel. You can call it whatever you like, but the example below will assume it's named MyPanelPage.
2. Use the Code Editor or Text Editor and paste in the default code below.
3. Set the Content Type to EditMe Scripted Page (text/vnd.editme.xml-js.page) on the Properties tab.
4. Set the page security to Administrator View / Administrator Edit on the Properties tab.

Use the following template for your new panel page:

<div id="myPanel" title="Tab Title|Tab Tooltip" class="hidden panel">
Panel content goes here.
</div>

Note the following requirements for the panel template:

• The entire panel is contained in a DIV tag.
• The DIV tag as a unique ID attribute and the value MUST end in "Panel". This will be referenced in your EditFormPanels page.
• The TITLE attribute serves two purposes. Text before the pipe | character will become the label for the panel's tab on the editing screen. The text after the pipe will be the tooltip text, shown when the mouse hovers over the tab.
• The CLASS attribute must be set to "hidden panel".

Now that your panel page is setup, you can add a reference to it in your EditFormPanels page. Edit the EditFormPanels page and add a line (as shown in bold below) to reference your new panel page:

<panels>
  <panel id="content"/>
  <panel id="metta"/>
  <panel id="properties"/>
  <panel id="attachments"/>
  <panel id="organize"/>
  <panel id="versions"/>
  <panel id="my" page="MyPanelPage"/>
</panels>

Note that the ID attribute of the new PANEL tag must match the prefix of the ID attribute value of the DIV tag in your new panel page. So if your DIV's ID value is "testPanel", the id in the EditFormPanels page tag should be "test". Also, the PAGE attribute of the new PANEL tag must match the name of your new panel page.

You now have a new panel in your editing screen. Updates to the content of the MyPanelPage scripted page will be immediately reflected in your site's editing screen.

When your panel page is processed by the editing screen it will have an additional implicit object named "edit". This is the page being edited. So, for example, you can get the name of the page being edited in server side code using edit.name. Studying the source of the existing panels below will give you an idea of how to do things in your custom panel page.

Customizing an Existing Panel

If you want to customize one of the existing panels in your editing screen, you can do so by creating a panel page (following the instructions above) and using one of the existing panel templates below as a starting point. Reference your custom panel page by simply adding a page="MyCustomPanelPage" attribute to the appropriate PANEL tag in your EditFormPanels page.

The following tempaltes can be used as starting points for customizing each of the existing panels.

• Custom Content Panel
• Custom Metta Panel
• Custom Properties Panel
• Custom Attachments Panel
• Custom Organize Panel
• Custom Versions Panel

You may notice that each of these references a client-side JavaScript file for the individual panel (such as /scripts/edit.js for the Content panel and /scripts/attachments.js for the Attachments panel). You should make copies of these JavaScript files as JavaScript pages or attachments on your site to make any needed changes and to insulate your code from possible changes made to these files by EditMe.

You may also notice that these panels make use of the jQuery JavaScript library. Familiarity with jQuery will be very helpful to understanding how the existing panels work.

All the Ajax calls in the editing interface are to the /_xmlapi system page. A future article on this site will cover that script in detail. You can also easily create your own scripted pages that use EditMe's API to respond to Ajax calls.

If You Break Your Editing Screen

If you make a mistake and your editing screen stops working, you can revert to the default editing interface by simply renaming the EditFormPanels page to anything other than EditFormPanels. If your site's layout doesn't have a rename link built-in, you can use this URL to get to the Rename Page form:

http://YOURSITE.editme.com/_Rename?page=EditFormPanels&mode=rename-form