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!
   </div>

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")
            break
            QUIT
}

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>k
 
USER>d compileAll^%zewdAPI("mgwTest",,"csp")
d:\ewdApps\mgwTest\ewdAjaxError.ewd
d:\ewdApps\mgwTest\ewdAjaxErrorRedirect.ewd
d:\ewdApps\mgwTest\ewdErrorRedirect.ewd
d:\ewdApps\mgwTest\tagTest.ewd
 break
 ^
<BREAK>ztodaysMessage+1^mgw.demo.2

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
(Error,"o","JS"),"o","HTML"))#')">
      <h2>
         This is a test of our new custom tag
      </h2>
      <demo:todaysmessage message="Hello World!" >
         <h4>
            Message for Today
         </h4>
      </demo:todaysmessage>
   </body>
</html>

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