I started to have a play around with inline editing, a la Jesper Ordrup's excellent presentation at Codegarden 08. This is a post about my experiences with AutoForm, and how to get around some of the potential issues.

First of all, this is entirely inspired by Jesper's work, you can see a screencast with Jesper and Niels here: http://www.umbraco.org/blog/2008/3/12/codegarden-video-with-jesper-ordrup. Jesper also gave a presentation at Codegarden on this stuff. To be honest, I forgot most of it so I am starting from scratch! Well, kind of. I'm assuming that you have the AutoForm package installed in your Umbraco installation already - it comes as part of the Utilities Package which is available from the repository (in the Developer section, right click the Macros node, choose Import Package, click Website Utilities, choose the Utilities Package and follow the instructions).

The basic idea is this: you have your document type which defines your content, and you create two templates for it. One template is your regular template that displays the content for your site. The second template uses AutoForm to generate a form based on the structure of the document type for inline editing on the site (displays the content, too, but in a form).

Note: I am leaving out the issues of security for now, there are a number of ways of only allowing this functionality for certain members. I am focusing here on how to get AutoForm to do what you want it to.

For my simple example, I define a document type with two attributes, headerText (textstring) and bodyText (richtext). I place them on their own tab called Content. I then create a template for it which simply displays the information on the page. So far so ordinary.

For the cool inline editing part, we are using two things: AutoForm and the altTemplate querystring parameter. First, let's look at Autoform.

For our purposes, we need a second template which you can use to display your content. So create a template with an alias of editTemplate, and ensure that you update your document type so that both of your templates can be used with it (in the Allowed Templates section on the info tab of your document type).

In your editTemplate template, we will use a single AutoForm macro (for now - to make everything look nice you'll probably want to use master pages and apply some nice styling, but that's well out of scope of this quick article). To do this, open your template in the Templates section of Umbraco. Click the "insert umbraco macro" button. Choose AutoForm from the dropdown and click OK. Now, set up the following to allow editing of your document type:

• Choose the correct Document Type that you will be editing
• Choose the Tab Name (in this example, Content)
• Choose any item for Choose Where To Store (we'll update this later)
• Check the box for Edit Mode
• Enter some text for Submit Button Text
• Check Publish On Submit
• Check Refresh To Parent
• Click OK

This should enter something like this into your template:

<UMBRACO_MACRO macroAlias="umbAutoForm" DocumentType="1106" TabName="content" ChooseWhereToStore="1234" EditMode="1" ShowTitle="0" TitleName="" SaveMemberAlias=", " ShowDescriptions="1" SubmitButtonText="Continue" PublishOnSubmit="1" RefreshToParent="1" StorePropertiesInCookies=""></?UMBRACO_MACRO> 

Update the ChooseWhereToStore parameter to read ChooseWhereToStore="[#pageID]" - this means that you will be editing the current page. And that's pretty much it for the AutoForm setup.

Now let's look at how altTemplate helps us here. altTemplate allows you to specify an alternative template to use to display a given piece of content. You can use it in two ways:
http://localhost/mypage.aspx?altTemplate=editTemplate
or
http://localhost/mypage.aspx/editTemplate

So now you can add a link into your template like this:

<a href="?altTemplate=editTemplate" mce_href="?altTemplate=editTemplate">edit</a>

When the user clicks this link, they should be taken to the same page, but using our alternative template so that they can edit the content. When they click the submit button, their changes are published, and the page is refreshed back to the original template with the changes visible on the site. Nice, eh?

Troubleshooting

I hope that this has been helpful for you, but there are a couple of gotchas to look out for:

• Form tags. If you get a nasty error something like
  
  "Control 'AutoForm_4_valSummary' of type 'ValidationSummary' must be placed inside a form tag with runat=server."
  
  then you need to wrap your autoform tags with the Umbraco tags used to create a .NET form on the page:
  <?ASPNET_FORM>... autoform ... </?ASPNET_FORM>
• 
  
  
• Invalid requests. If you are using richtext fields in your document type then these will render as the tinyMCE editor in your edit template. When you hit the submit button, you may get an error like this: "A potentially dangerous Request.Form value was detected from the client ...". For more information on this error, have a look at this white paper. There is some more information on the forum.
  
  In effect you can update your web.config file to add this attribute validateRequest="false" to the pages node:
  
  <pages validateRequest="false">
  
  This means though that you could be opening yourself up to security issues, which are outside the scope of this article. tinyMCE will strip out any javascript, but I'm not advocating this as a secure way to do things without a bit more research.

I hope you find this useful. Feel free to point out any errors or omissions, or ask questions, in the comments (which, of course, also use AutoForm).

Good luck!

David