Before Designer ES2 we would have done this with two buttons with no background or border and using positioned layout carefully placed them in the correct spot. The "contact us" button would have called the app.mailMsg and the "website" button would have called app.launchURL.
Since Designer ES2 we can add these as hyperlinks directly into a text control. This means the links are correctly announced when using the accessibility screen readers, but it also makes it harder to include values from the form in the email. We might want to send the email to different recipients, use different subject lines or generate different body text depending on other values selected in the form.
If you look at the XML Source for the text control you will see a rich text value that looks something like;
<body xmlns="http://www.w3.org/1999/xhtml" xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/">
<p style="text-decoration:none;letter-spacing:0in">
Please
<a href="mailto:sample@example.com">contact us</a>
or visit our
<a href="http://adobelivecycledesignercookbookbybr001.blogspot.com.au/">website</a>
for more information
</p>
</body>
The full syntax for the mailto link is
mailto:emailaddress?cc=emailaddress?bcc=emailaddress?subjext=text?body=text
Even though the Designer interface only supports the to email address and the subject header, the cc, bcc and body still work. We just need some code to update the mailto link.
To do this I am using E4X.
To start load the rich text value into an E4X XML object, to do this we must first remove the XML declaration. Note that the class name of the rich text value is "#html" and to refer to an element we need to prefix it with a "#" character, which is why we see the rather strange looking double "##".
var body = new XML(Text1.value.exData["##xHTML"].saveXML().replace(/^<\?xml\s+version\s*=\s*(["'])[^\1]+\1[^?]*\?>\n*/, ""));
Declare the namespace and set the white space handling to be the same as Adobe Designer.
var xhtml = new Namespace("http://www.w3.org/1999/xhtml");
XML.ignoreWhitespace = false;
XML.prettyPrinting = false;
Loop though all the anchor tags
for each (var anchorTag in body..xhtml::a)
{
Look for the "mailto:" tag
if (anchorTag.@href.toString().indexOf("mailto:") === 0)
{
Generate the new "mailto" tag based on fields within the form
attributes = [];
anchorTag.@href = "mailto:" + ToAddress.rawValue;
if (!CCAddress.isNull)
{
attributes.push("cc="+CCAddress.rawValue);
}
if (!BCCAddress.isNull)
{
attributes.push("bcc="+BCCAddress.rawValue);
}
if (!Subject.isNull)
{
attributes.push("subject="+encodeURI(Subject.rawValue));
}
if (!Body.isNull)
{
attributes.push("body="+encodeURI(Body.rawValue));
}
if (attributes.length > 0)
{
anchorTag.@href += "?" + attributes.join("&");
}
anchorTag.setChildren(anchorTag.toString());
}
}
Load the new value back into the text control.
Text1.value.exData.loadXML(body.toXMLString(), /* Ignore root node */ false, /* Overwrite content */ true);
If you wanted to send an email to a list of addresses just separate them with a comma.
Enabling / Disabling a hyperlink
We can use a very similar approach to enable and disable a hyperlink.To disable, we would do;
anchorTag.@style = "color:#969696";
delete anchorTag.@href;
To enable, we would do;
delete anchorTag.@style;
anchorTag.@href = "http://adobelivecycledesignercookbookbybr001.blogspot.com.au/";
To see this in action download this sample, EmailHyperlink.pdf.
I believe you deleted the XML declaration in the beginning. Can you explain why?
ReplyDeleteHi Douglas,
ReplyDeleteYou have to remove the xml declaration to use E4X as a work around for a bug https://bugzilla.mozilla.org/show_bug.cgi?id=336551 , I think E4X has now been removed from the SpiderMonkey JavaScript engine which Reader's JavaScript was based on, so I wouldn't expect the bug to be fixed.
Regards Bruce