Part II. Create New Items With MagicRepeat

This is a continuation of the MagicEdit Dreamweaver tutorial series. The other tutorials in the series are:

Create a simple, updatable list that your clients can manage from within their own websites.

In this tutorial you will learn the basics of MagicRepeat, a powerful feature that allows you to repeat an item in the HTML simply by wrapping it in <magicrepeat> tags. For this exercise, we'll just continue working in the HTML document we created in MagicEdit Tags. If you didn't work through Part I, just create a new HTML document in Dreamweaver.

Step 1: Create a Simple List

Let's create a simple list of employees for our client's company: There is John Smith (the CEO), Adam Smith (the CFO), Bubb Rubb, and Rick Astley (both Internet sensations, but we'll leave off their titles for now). If you are working in Split view, you should see something like this:

Step 2: Make It Editable

So now your client has a list of employees on his website. But what happens when Rick Astley leaves to work on his music? Or what if Adam Smith wants to write a follow-up to his bestseller? Your client wants to be able to keep his list up to date, which means adding, editing, and/or deleting names from the list. With MagicEdit, this is simple. Let's go back to the list and add a new li that will serve as a template for any future list items we want to add:

<li><magicedit me_plain>Employee name</magicedit></li>

Now we have a template <li> that the client can log in and edit. (The me_plain attribute calls the MagicEdit plain text editor. For more information, see the Options section in the MagicEdit Tags article.)

Step 3: Repeat

The last step is to make our newly-created, editable region into a repeat. This will allow your clients to make new (and delete unwanted) instances of the editable region. Accomplishing this task is easy; just wrap your MagicEdit <li> in <magicrepeat> tags:

<li><magicedit me_plain>Employee name</magicedit></li>

Push up your changes and log in to the site. Your list should look something like this:

The last item on the list is now editable and repeatable. To give your client complete control over the entire list, go ahead and delete the first four list items, so that only the <magicrepeat> list item remains:

<li><magicedit me_plain>Employee name</magicedit></li>

Wrapping Up

Push the changes once again and try editing the names yourself. Click "new" to create a new list item, "edit" to change the text, "delete" to remove it, and use the arrows to reorder the items. You have now created a fully manageable list that your clients can update quickly, easily, and without an extended manual or training seminar.

Next up: Using MagicRepeat to create new pages.