Our instance of the custom tag:

<demo:todaysMessage message="Hello World!" />

needs to be converted into:

   <h4>Message for Today</h4>
   <div class="messagePanel">
      Hello World!

A neat trick is to use the current custom tag as the node on which we'll initially hang the new tags that need creating. We'll then use a special DOM Macro method that removes the custom tag and lets the new nodes we've added to it float up a level.

We'll first create the h4 tag. Go back into Studio and add the following line in front of that break command we added:

s h4OID=$$addElementToDOM^%zewdDOM("h4",nodeOID,,,"Message for Today")

Our tag processor method should now look like this:

ClassMethod todaysMessage(nodeOID As %String, ByRef attrValues, docOID As %String, technology As %String)
            s h4OID=$$addElementToDOM^%zewdDOM("h4",nodeOID,,,"Message for Today")

Save and compile the class using CTRL & F7 and try re-compiling the EWD page once more. It's a good idea to type k and q before you re-compile, ie:

USER 19d1>q
USER>d compileAll^%zewdAPI("mgwTest",,"csp")

Now let's examine the page DOM to see what the addElementToDOM() function did. Type:

USER 19d1>d outputDOM^%zewdDOM(docName,1,2)

This outputs the DOM as an XML document stream. Look towards the end of the page and you should see:

   <body onload="EWD.page.setErrorClass() ; EWD.page.errorMessage('#($zcvt($zcvt
         This is a test of our new custom tag
      <demo:todaysmessage message="Hello World!" >
            Message for Today

Notice what's happened: the h4 tag has been added as a child node of our custom tag. That's exactly what we want! In the next step we'll add the div tag