Récemment, on m'a demandé d'aider à créer un lien email dans une fenêtre pop-up pour envoyer des informations sur des enregistrements liés. En nous basant sur l'exemple concernant la récupération de l'historique de maintenance publié ici<\/A>, ajoutons un bouton qui enverra un email avec cet historique. <\/P><\/P>Un lien mailto peut contenir plusieurs éléments :<\/P>l'adresse email ou les adresses emails auxquelles envoyer le mail<\/LI>optionnellement le CC et\/ou BCC<\/LI>un sujet<\/LI>et un corps de message<\/LI><\/UL><\/P>Le HTML que nous utiliserons pour le bouton est assez simple. Il consiste en une ancre avec le lien mailto (expression\/expr1) et à l'intérieur de cette ancre le bouton (voir lignes 5 à 7) :<\/P><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>b<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>Historique de maintenance :<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><\/<\/span>b<\/span><span class="punctuation token">><\/span><\/span><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/span>br<\/span> <span class="punctuation token">\/><\/span><\/span> {expression\/expr0} <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/span>br<\/span> <span class="punctuation token">\/><\/span><\/span><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/span>br<\/span> <span class="punctuation token">\/><\/span><\/span> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/span>b<\/span><span class="punctuation token">><\/span><\/span>Email History:<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><\/<\/span>b<\/span><span class="punctuation token">><\/span><\/span> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/span>br<\/span> <span class="punctuation token">\/><\/span><\/span> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/span>a<\/span> <span class="attr-name token">href<\/span><span class="attr-value token"><span class="punctuation token">=<\/span><span class="punctuation token">"<\/span>{expression\/expr1}<span class="punctuation token">"<\/span><\/span><span class="punctuation token">><\/span><\/span> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/span>img<\/span> <span class="attr-name token">alt<\/span><span class="attr-value token"><span class="punctuation token">=<\/span><span class="punctuation token">"<\/span>Email<span class="punctuation token">"<\/span><\/span> <span class="attr-name token">height<\/span><span class="attr-value token"><span class="punctuation token">=<\/span><span class="punctuation token">"<\/span>50<span class="punctuation token">"<\/span><\/span> <span class="attr-name token">src<\/span><span class="attr-value token"><span class="punctuation token">=<\/span><span class="punctuation token">"<\/span>http:\/\/icons.iconarchive.com\/icons\/iynque\/ios7-style\/1024\/Mail-icon.png<span class="punctuation token">"<\/span><\/span> < spanclass= "attr-name" >width</ span > < spanclass= "attr-value" > < spanclass= "punctuation-token" > = </ span > < spanclass= "punctuation-token" > " </ span > 50 < spanclass= "punctuation-token" > " </ span > < / span > < spanclass= "punctuation-token" > \/ > < / span > < / span > < SPANclass = "tokentag" >< SPANclass = "tokentag" >< SPANclass = "punctuationtoken" >& lt ; \/ a & gt ; < / SPAN >< / SPAN >< & lt ; & lt ; EMOJI_0 & gt ; >< SPANclass = "line-numbers-rows" >< SPAN >< & lt ; & lt ; EMOJI_1 & gt ; < / SPAN >< SPAN >< & lt ; & lt ; EMOJI_2 & gt ; < / SPAN >< SPAN >< & lt ; & lt ; EMOJI_3 & gt ; < / SPAN >< SPAN >< & lt ; & lt ; EMOJI_4 & gt ; < / SPAN >< SPAN >< & lt ; & lt ; EMOJI_5 & gt ; < / SPAN >< SPAN >< & lt ; & lt ; EMOJI_6 & gt ; < / SPAN >< SPAN >< & lt ; & lt ; EMOJI_7 & gt ; < / SPAN >< / SPAN >< / CODE >< / PRE >< P >< / P >< P > La fenêtre pop-up ressemble à ceci lorsque l'utilisateur clique sur un point (désolé pour le mélange d'espagnol et d'anglais) : < / P >< P >< IMG __jive_id = "452819" classe = "image-1 jive-image" hauteur = "430" src = "https:\/ \/us.v-cdn.net \/6038851 \/uploads \/legacyfs \/online \/452819_pastedImage_1.png " largeur = "769" \/ > < / P >< P >< / P >< P > Lorsque l'utilisateur clique sur le bouton, cela créera un email si vous avez une application email configurée sur votre machine : < / P >< P >< IMG __jive_id = "452820" classe = "image-2 jive-image" hauteur = "581" src = "https:\/ \/us.v-cdn.net \/6038851 \/uploads \/legacyfs \/online \/452820_pastedImage_2.png " largeur = "768" \/ > < / P >< P >< / P >< P > Plongeons dans la façon de créer l'expression Arcade pour obtenir les informations et les structurer de manière à créer cet email. La partie concernant la connexion à une table liée et le filtrage de la table en fonction de l'ID de l'hydrant a déjà été expliquée ici : (<A _jive_internal = "true" href = "https:\/ \/community.esri.com \/docs \/DOC-12773-using-featuresetby-functions-in-arcade-to-drill-down-to-other-layers-and-tables" target = "_blank" > Using FeatureSetBy functions in Arcade to drill-down to other layers and tables </ A>) donc je ne vais pas entrer dans les détails. J'ai utilisé la même fonction GetHistory, avec un petit mais important changement à la ligne 13 : < / P >< PRE classe = "lia-code-sample line-numbers language-none" > < CODE > Fonction < SPANclasse = "tokentag function" > GetHistory </ Span >(hydrant_id) { var tbl = FeatureSetByName($map, "Maintenance"); Console(tbl); var sql = "COD_HIDRANTE = '" + hydrant_id + "'"; Console(sql); var tbl_filtered = Filter(tbl, sql); Console(Count(tbl_filtered)); if (Count(tbl_filtered) > 0) { var history = "Veuillez trouver ci-dessous l'historique de maintenance pour Hydrant " + hydrant_id + ":"; for (var maintenance in tbl_filtered) { var txt_date = Text(maintenance.Fecha_Mantenimiento, ' - (Y/MM/DD) '); var txt_man = txt_date + maintenance.Mantenimiento; history += "TextFormatting.NewLine" + txt_man; } } else { var history = "Pas d'historique pour Hydrant " + hydrant_id; } return history; } < / CODE > < / PRE > < P > J'ajoute « TextFormatting.NewLine » comme chaîne et non comme constante. En fait, cette chaîne pourrait avoir n'importe quel contenu unique, mais j'ai choisi pour le faire de cette manière. Ainsi, la chaîne résultante contient tout l'historique sur une seule ligne et le texte <SPAN>"TextFormatting.NewLine" sera utilisé plus tard pour le remplacer par quelque chose qui peut être utilisé dans une URL et qui fonctionnera comme un saut de ligne dans le mail ("%0D%0A").</SPAN></P><P></P><P><SPAN>L'autre partie de l'expression est utilisée pour appeler cette fonction et définir les autres parties de l'email :</SPAN></P><PRE class="lia-code-sample line-numbers language-none"><CODE><SPAN class="keyword token">var</SPAN> hydrant_id <SPAN class="operator token">=</SPAN> $feature<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"COD_HIDRANTE"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> email <SPAN class="operator token">=</SPAN> <SPAN class="string token">"someone@someplace.com"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> cc <SPAN class="operator token">=</SPAN> <SPAN class="string token">"other_one@someplace.com;other_two@someplace.com"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> bcc <SPAN class="operator token">=</SPAN> <SPAN class="string token">"secret_person@someplace.com"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</span> subject <span class="operator token">=</span> <span class="string token">"Maintenance history of Hydrant "</span> <span class="operator token">+</span> hydrant_id<span class="punctuation token">;</span> <SPAN class="keyword token">var</span> body <span class="operator token">=</span> <span class="token function">GetHistory</span><span class="punctuation token">(</span>hydrant_id<span class="punctuation token">)</span><span class="punctuation token">;</span> <SPAN class="keyword token">var</span> params <span class="operator token">=</span> <span class="punctuation token">{</span>cc<span class="punctuation token">:</span> cc<span class="punctuation token">,</span> bcc<span class="punctuation token">:</span> bcc<span class="punctuation token">,</span> subject<span class="punctuation token">:</span> subject<span class="punctuation token">,</span> body<span class="punctuation token">:</span> body<span class="punctuation token">}</span><span class="punctuation token">;</span> <SPAN class="keyword token">var</span> url <span class="operator token">=</span> <span class="string token">"mailto:"</span> <span class="operator token">+</span> email <span class="operator token">+</span> <span class="string token">"?"</span> <span class="operator token">+</span> <span class="token function">UrlEncode</span><span class="punctuation token">(</span>params<span class="punctuation token">)</span><span class="punctuation token">;</span> url <span class="operator token">=</span> <span class="token function">Replace</span><span class="punctuation token">(</span>url<span class="punctuation token">,</span> <span class="string token">"TextFormatting.NewLine"</span><span class="punctuation token">,</span> <span class="string token">"%0D%0A"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <SPAN class="keyword token">return</Span> url<span class="punctuation token">;</span><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>Expliquons ce que nous faisons dans cette deuxième partie de l'expression Arcade :Nous lisons l'ID de l'hydrant à la ligne 1Définissons les emails auxquels envoyer le mail (y compris 2 CC et 1 BCC) aux lignes 2 à 4.L'objet est essentiellement un texte incluant la variable ID de l'hydrant.Le corps est généré en utilisant la fonction GetHistory expliquée ci-dessus.Aux lignes 7 à 10, nous créons un dictionnaire appelé params avec les propriétés cc, bcc, subject et body et nous assignons les valeurs des variables cc, bcc, subject et body définies aux lignes 3 à 6.A la ligne 12, nous utilisons la nouvelle fonction Arcade UrlEncode (publiée dans la version 1.7) qui va encoder correctement les paramètres URL.
<\/P>
Un lien mailto peut contenir plusieurs éléments :<\/P>
Le HTML que nous utiliserons pour le bouton est assez simple. Il consiste en une ancre avec le lien mailto (expression\/expr1) et à l'intérieur de cette ancre le bouton (voir lignes 5 à 7) :<\/P>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>b<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>Historique de maintenance :<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><\/<\/span>b<\/span><span class="punctuation token">><\/span><\/span><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/span>br<\/span> <span class="punctuation token">\/><\/span><\/span> {expression\/expr0} <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/span>br<\/span> <span class="punctuation token">\/><\/span><\/span><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/span>br<\/span> <span class="punctuation token">\/><\/span><\/span> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/span>b<\/span><span class="punctuation token">><\/span><\/span>Email History:<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><\/<\/span>b<\/span><span class="punctuation token">><\/span><\/span> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/span>br<\/span> <span class="punctuation token">\/><\/span><\/span> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/span>a<\/span> <span class="attr-name token">href<\/span><span class="attr-value token"><span class="punctuation token">=<\/span><span class="punctuation token">"<\/span>{expression\/expr1}<span class="punctuation token">"<\/span><\/span><span class="punctuation token">><\/span><\/span> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/span>img<\/span> <span class="attr-name token">alt<\/span><span class="attr-value token"><span class="punctuation token">=<\/span><span class="punctuation token">"<\/span>Email<span class="punctuation token">"<\/span><\/span> <span class="attr-name token">height<\/span><span class="attr-value token"><span class="punctuation token">=<\/span><span class="punctuation token">"<\/span>50<span class="punctuation token">"<\/span><\/span> <span class="attr-name token">src<\/span><span class="attr-value token"><span class="punctuation token">=<\/span><span class="punctuation token">"<\/span>http:\/\/icons.iconarchive.com\/icons\/iynque\/ios7-style\/1024\/Mail-icon.png<span class="punctuation token">"<\/span><\/span> < spanclass= "attr-name" >width</ span > < spanclass= "attr-value" > < spanclass= "punctuation-token" > = </ span > < spanclass= "punctuation-token" > " </ span > 50 < spanclass= "punctuation-token" > " </ span > < / span > < spanclass= "punctuation-token" > \/ > < / span > < / span > < SPANclass = "tokentag" >< SPANclass = "tokentag" >< SPANclass = "punctuationtoken" >& lt ; \/ a & gt ; < / SPAN >< / SPAN >< & lt ; & lt ; EMOJI_0 & gt ; >< SPANclass = "line-numbers-rows" >< SPAN >< & lt ; & lt ; EMOJI_1 & gt ; < / SPAN >< SPAN >< & lt ; & lt ; EMOJI_2 & gt ; < / SPAN >< SPAN >< & lt ; & lt ; EMOJI_3 & gt ; < / SPAN >< SPAN >< & lt ; & lt ; EMOJI_4 & gt ; < / SPAN >< SPAN >< & lt ; & lt ; EMOJI_5 & gt ; < / SPAN >< SPAN >< & lt ; & lt ; EMOJI_6 & gt ; < / SPAN >< SPAN >< & lt ; & lt ; EMOJI_7 & gt ; < / SPAN >< / SPAN >< / CODE >< / PRE >< P >< / P >< P > La fenêtre pop-up ressemble à ceci lorsque l'utilisateur clique sur un point (désolé pour le mélange d'espagnol et d'anglais) : < / P >< P >< IMG __jive_id = "452819" classe = "image-1 jive-image" hauteur = "430" src = "https:\/ \/us.v-cdn.net \/6038851 \/uploads \/legacyfs \/online \/452819_pastedImage_1.png " largeur = "769" \/ > < / P >< P >< / P >< P > Lorsque l'utilisateur clique sur le bouton, cela créera un email si vous avez une application email configurée sur votre machine : < / P >< P >< IMG __jive_id = "452820" classe = "image-2 jive-image" hauteur = "581" src = "https:\/ \/us.v-cdn.net \/6038851 \/uploads \/legacyfs \/online \/452820_pastedImage_2.png " largeur = "768" \/ > < / P >< P >< / P >< P > Plongeons dans la façon de créer l'expression Arcade pour obtenir les informations et les structurer de manière à créer cet email. La partie concernant la connexion à une table liée et le filtrage de la table en fonction de l'ID de l'hydrant a déjà été expliquée ici : (<A _jive_internal = "true" href = "https:\/ \/community.esri.com \/docs \/DOC-12773-using-featuresetby-functions-in-arcade-to-drill-down-to-other-layers-and-tables" target = "_blank" > Using FeatureSetBy functions in Arcade to drill-down to other layers and tables </ A>) donc je ne vais pas entrer dans les détails. J'ai utilisé la même fonction GetHistory, avec un petit mais important changement à la ligne 13 : < / P >< PRE classe = "lia-code-sample line-numbers language-none" > < CODE > Fonction < SPANclasse = "tokentag function" > GetHistory </ Span >(hydrant_id) { var tbl = FeatureSetByName($map, "Maintenance"); Console(tbl); var sql = "COD_HIDRANTE = '" + hydrant_id + "'"; Console(sql); var tbl_filtered = Filter(tbl, sql); Console(Count(tbl_filtered)); if (Count(tbl_filtered) > 0) { var history = "Veuillez trouver ci-dessous l'historique de maintenance pour Hydrant " + hydrant_id + ":"; for (var maintenance in tbl_filtered) { var txt_date = Text(maintenance.Fecha_Mantenimiento, ' - (Y/MM/DD) '); var txt_man = txt_date + maintenance.Mantenimiento; history += "TextFormatting.NewLine" + txt_man; } } else { var history = "Pas d'historique pour Hydrant " + hydrant_id; } return history; } < / CODE > < / PRE > < P > J'ajoute « TextFormatting.NewLine » comme chaîne et non comme constante. En fait, cette chaîne pourrait avoir n'importe quel contenu unique, mais j'ai choisi pour le faire de cette manière. Ainsi, la chaîne résultante contient tout l'historique sur une seule ligne et le texte <SPAN>"TextFormatting.NewLine" sera utilisé plus tard pour le remplacer par quelque chose qui peut être utilisé dans une URL et qui fonctionnera comme un saut de ligne dans le mail ("%0D%0A").</SPAN></P><P></P><P><SPAN>L'autre partie de l'expression est utilisée pour appeler cette fonction et définir les autres parties de l'email :</SPAN></P><PRE class="lia-code-sample line-numbers language-none"><CODE><SPAN class="keyword token">var</SPAN> hydrant_id <SPAN class="operator token">=</SPAN> $feature<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"COD_HIDRANTE"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> email <SPAN class="operator token">=</SPAN> <SPAN class="string token">"someone@someplace.com"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> cc <SPAN class="operator token">=</SPAN> <SPAN class="string token">"other_one@someplace.com;other_two@someplace.com"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> bcc <SPAN class="operator token">=</SPAN> <SPAN class="string token">"secret_person@someplace.com"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</span> subject <span class="operator token">=</span> <span class="string token">"Maintenance history of Hydrant "</span> <span class="operator token">+</span> hydrant_id<span class="punctuation token">;</span> <SPAN class="keyword token">var</span> body <span class="operator token">=</span> <span class="token function">GetHistory</span><span class="punctuation token">(</span>hydrant_id<span class="punctuation token">)</span><span class="punctuation token">;</span> <SPAN class="keyword token">var</span> params <span class="operator token">=</span> <span class="punctuation token">{</span>cc<span class="punctuation token">:</span> cc<span class="punctuation token">,</span> bcc<span class="punctuation token">:</span> bcc<span class="punctuation token">,</span> subject<span class="punctuation token">:</span> subject<span class="punctuation token">,</span> body<span class="punctuation token">:</span> body<span class="punctuation token">}</span><span class="punctuation token">;</span> <SPAN class="keyword token">var</span> url <span class="operator token">=</span> <span class="string token">"mailto:"</span> <span class="operator token">+</span> email <span class="operator token">+</span> <span class="string token">"?"</span> <span class="operator token">+</span> <span class="token function">UrlEncode</span><span class="punctuation token">(</span>params<span class="punctuation token">)</span><span class="punctuation token">;</span> url <span class="operator token">=</span> <span class="token function">Replace</span><span class="punctuation token">(</span>url<span class="punctuation token">,</span> <span class="string token">"TextFormatting.NewLine"</span><span class="punctuation token">,</span> <span class="string token">"%0D%0A"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <SPAN class="keyword token">return</Span> url<span class="punctuation token">;</span><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Expliquons ce que nous faisons dans cette deuxième partie de l'expression Arcade :
Si vous avez des questions, veuillez utiliser le bouton "Add a Reply" pour me le faire savoir.
Le code final utilisé est listé ci-dessous :
Function GetHistory'(hydrant_id) {
@XanderBakker this is very useful - thank you! I'm wondering if you have a way for handling single quotes in fields. We have a content_ field in our data that often includes single apostrophes. Unfortunately, when we click our mailto link from the pop-up, the content_ field will not populate past the '. For example, the content_ field value might be "Michigan's 16 presidential electors have cast their votes...etc." When you click the mailto html link, only "Michigan" will populate. As a temporary fix we have used:
var content = Replace($feature.content_, "'", "")
However, the grammar is not correct. Any suggestions?
Hi @RiannaAylward ,
Sorry for the delay in my reply, I was (and still am) on vacation.
First of all, I have noticed some problems with this arcade expression after an update was applied to ArcGIS Online (more than a year ago), so it might not work anymore.
However, the correct way of changing characters and create a valid URL is not using the Replace function, but the UrlEncode function as shown in the code. This function will replace any invalid characters by its valid representation in a URL: https://developers.arcgis.com/arcade/function-reference/text_functions/#urlencode
Hi @XanderBakker
This is super useful and I am trying to get it to work with a Survey123 feature edit workflow, where the URL opens automatically the associated feature in Survey123. However, I can't seem to get the globalid to be seen as part of the URL. I've tried a lot of variations at this point combining Arcade field cals as well as use of {globalid} directly in the mailto: field in the pop-ups and haven't had any luck -- do you have any suggestions?
Example of the issue:
I'm working in Enterprise 10.8.1.
Thank you!
@XanderBakker Hi Xander, thanks for posting this!
Do you know if the pop-up example picture links you provided are down? They don't seem to load for me so its a little difficult to follow the post in its entirety.
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
