Web-Edit - In Page Editing

The page below shows a typical 'in page' editing layout. 'In Page' editing is defined as being a page in which the content and the means to change it are displayed on the same page.

To see page editing use this page and to see 'Add Content' use this page.

The particular application being demonstrated allows the installed software to be updated or edited in an Intranet application. This style of Web-Edit has two primary uses:

1. Private (Intranet) Application - anyone can update the page directly. No special tools are required and there is no excuse for not keeping data current.
2. Mailed page - the entry may be mailed to a 'moderator' who is responsible for applying the change. This would typically be used in 'web log' or 'comment on this article' type applications.

An 'In Page' Edit Layout

The page view of the 'in page' layout.

The Section Format

Each section has a fixed but flexible layout defined by a 'hidden' template file and which consists of one or more 'entries'. The template file controls and defines the the layout of the 'section' and the 'section' and 'entry' properties which the user may edit:

• The order of entries (HTML Tags) in a 'section'.
• Whether each entry is 'mandatory' or optional.
• For each entry the user may be allowed to edit, depending on the 'tag', content, CSS class, title. href, border, id, height, src or width attributes.
• The 'prompt' value for each entry. The 'prompt' entry is displayed during editing and when adding data.

Section Layout

The example above shows an expanded section from the top page view. Each section consists of a Header, a optional link, one or more paragraphs, a version number and a date of installation. All these values were defined in the hidden 'template' file and would be customised for the application.

Update Form

The example above shows the expanded form from the top page view. The user 'prompts' are customised to reflect the context of the section being edited. The form data has been entered in and is ready to go. In this application the user may choose to 'Update' or 'Edit this Page' again this is controlled by the hidden 'template file. Use this page to see the effect of clicking the 'Edit this Page' button.

An Update

If the user clicks 'Update' the page above is displayed. If 'View Page' is clicked the new page now contains the new section we just added as shown below. In this particular case the section is added to the end of the page but it could have been added to the beginning of the editable section or the page - again controlled by the hidden 'template' file.