Step 3: Customize the snippets

Add a custom Edit snippet that formats an email link.

Create a custom Edit snippet that will display a standard Edit field when the field is modifiable, or display the value as an email link when the field is not modifiable.

Create a copy of the default Edit.xcf snippet file and place it in the application's template directory ($(application.path)/../tpl). Rename the copy Edit_Email.xhtml.
Create a second copy of the default Edit.xcf snippet file and place it in the application's template directory ($(application.path)/../tpl). Rename the copy Edit_EmailImpl.xhtml.

Add two new entries to the application's configuration: one for a style of "Email" on an Edit field, and the other for a new snippet named "Mail".

...
<THEME>
  <SNIPPET Id="Edit" Style="Email">$(application.path)/../tpl/Edit_Email.xhtml
  </SNIPPET>
  <SNIPPET Id="Mail">$(application.path)/../tpl/Edit_EmailImpl.xhtml</SNIPPET> 
</THEME>
...

Customize the snippet Edit_EmailImpl.xhtml, whose snippet Id is "Mail". Replace the content between the <gwc:snippet-root> tags with this code:
```
<gwc:snippet-root>
  <div class='gFieldContainer'>
    <a href="mailto:{value}">{value}</a>
  </div>
</gwc:snippet-root> 
```
Customize the snippet Edit_Email.xhtml, whose snippet Id is "Edit" with a style of "Email". Replace the content between the <gwc:snippet-root> tags with this code:
```
<gwc:snippet-root>
  <gwc:dummy 
   gwc:condition='isModifiable ? 1 : 0' gwc:replace='includeSnippet("Edit")' />
  <gwc:dummy
   gwc:condition='isModifiable ? 0 : 1' gwc:replace='includeSnippet("Mail")' />
</gwc:snippet-root> 
```
With this snippet:
- If the field is modifiable, the default Edit snippet will render using the standard Edit field.
- If the field is not modifiable, the email link is displayed by using the snippet Edit_EmailImpl.xhtml (defined by the snippet where Id="Mail".
The code snippet can be simplified. This code snippet acts the same as the code snippet shown previously:
```
<gwc:snippet-root>
  <gwc:dummy
   gwc:condition='isModifiable' gwc:replace='includeSnippet("Edit")' />
  <gwc:dummy
   gwc:condition='!isModifiable' gwc:replace='includeSnippet("Mail")' />
</gwc:snippet-root> 
```

To summarize: If the application has an Edit field whose style is set to "Email", then Edit_Email.xhmtl is the snippet to use. This snippet, however, includes two other snippets: If the field is modifiable, then the default Edit snippet is used. If the field is not modifiable, then the custom Mail snippet is used.

Solutions for this step of the tutorial can be found in the project HTML5ClientTutorialStep3.4pw. Additional files show you how to customize the Edit field to handle a style of "OpenURL".