nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Crear un enlace mailto con Arcade

XanderBakker

<\/HEAD>

Recientemente me pidieron ayudar a crear un enlace de correo electrónico en un pop-up para enviar información sobre registros relacionados. Basándonos en el ejemplo sobre cómo recuperar el historial de mantenimiento publicado aquí<\/A>, agreguemos un botón que enviará un correo electrónico con ese historial. <\/P>

<\/P>

Un enlace mailto puede contener un par de elementos:<\/P>

y un cuerpo<\/LI><\/UL>

<\/P>

El HTML que usaremos para el botón es bastante simple. Consiste en un ancla con el enlace mailto (espression\/expr1) y dentro de ese ancla el botón (ver líneas 5 a 7):<\/P>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>b<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>Historial de mantenimiento:<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>Historial de correo:<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> <span class="attr-name token">width<\/span><span class="attr-value token"><span class="punctuation token">=<\.\/<.\/>"50"/><.\/<.\/>

para hacerlo de esta manera. Así, la cadena resultante contiene todo el historial en una sola línea y el texto "TextFormatting.NewLine" se usará más adelante para reemplazarlo por algo que pueda usarse en una URL y funcione como nueva línea en el correo ("%0D%0A").

La otra parte de la expresión se usa para llamar a esta función y definir las otras partes del correo electrónico:

<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 ><<EMOJI_0 > >< Span Class = " line-numbers-rows ">< Span >< < EMOJI_1 > ></ Span >< Span >< < EMOJI_2 > ></ Span >< Span >< < EMOJI_3 > ></ Span >< Span >< < EMOJI_4 > ></ Span >< Span >< < EMOJI_5 > ></ Span >< Span >< < EMOJI_6 > ></ Span >< Span >< < EMOJI_7 > ></ Span >< Span >< < EMOJI_8 > ></ Span >< Span >< < EMOJI_9 > ></ Span >< Span >< < EMOJI_10 > ></ Span >< Span >< < EMOJI_11 > ></ Span >< Span >< < EMOJI_12 > ></ Span >< Span >< < EMOJI_13 > ></ Span >< Span >< < EMOJI_14 > ></ Span ></ Span ></ CODE ></ PRE >< P ></ P >< P >Expliquemos lo que hacemos&nbsp;en esta segunda parte de la expresión Arcade:</P><UL><LI>Leemos el ID del hidrante en la línea 1</LI><LI>Definimos los correos electrónicos a los que se enviará el correo (incluyendo 2 CC y 1 BCC) en las líneas 2 a 4.</LI><LI>El asunto es básicamente un texto que incluye la variable ID del hidrante.</LI><LI>El cuerpo se genera usando la función GetHistory explicada arriba.</LI><LI>En las líneas 7 a 10 creamos un diccionario llamado params con las propiedades cc, bcc, subject y body y asignamos los valores de las variables cc, bcc, subject y body definidas en las líneas 3 a 6.</LI><LI>En la línea 12 usamos la nueva función Arcade <A href = "https://developers.arcgis.com/arcade/function-reference/text_functions/#urlencode" rel = "nofollow noopener noreferrer" target = "_blank" >UrlEncode </A>(lanzada en la versión 1.7) que codificará correctamente los parámetros de la URL.</LI><LI>En la línea 13 reemplazamos el texto "<SPAN>TextFormatting.NewLine</SPAN>" por un texto "<SPAN>%0D%0A</SPAN>", que creará las nuevas líneas donde sea necesario en el cuerpo del correo electrónico. Si hubiéramos hecho esto antes de usar UrlEncode, esto habría convertido el texto en "<SPAN style = "color: #4c4c4c; background-color: #ffffff; font-weight: 300; ">%250D%250A </SPAn>, probablemente causando que la nueva línea no funcionara.</LI></UL><P></P><P>Si tienes alguna pregunta, por favor usa el botón "Add a Reply" para hacérmelo saber.</P><P></P><P>A continuación se muestra el código final utilizado:</P><PRE Class = "lia-code-sample line-numbers language-none"><CODE >Function GetHistory(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 = "Please find below the maintenance history for 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 = "No history for Hydrant " + hydrant_id; 
    }
    return history;
}

var hydrant_id = $feature["COD_HIDRANTE"];
var email = "someone@someplace.com";
var  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">"Historial de mantenimiento del 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\"><\/>;
url <Span class=\"operator token\"><\/>= <Span class=\"token function\"><\/>Replace<Span class=\"punctuation token\"><\/> (url, "TextFormatting.NewLine", "%0D%0A") ;
<span class=\"keyword token\"><\/>return url ;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<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>‍<\/> </span><span>‍<\/> </span><span>‍<\/> </span><span>‍<\/> </span><span>‍<\/> </span><span>‍<\/> </span><span>‍<\/> </span><span>‍<\/> </span><span>‍</Span></Span>

Encuentra más publicaciones etiquetadas con

Comentarios

RiannaAylward

@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?

XanderBakker

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

BrittanyBurson

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!

LukeAllen1

@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.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.