Maak een mailto-link met Arcade

XanderBakker

<\/HEAD>

Onlangs werd mij gevraagd om te helpen bij het maken van een e-maillink in een pop-up om informatie over gerelateerde records te verzenden. Voortbouwend op het voorbeeld over het ophalen van de onderhoudsgeschiedenis geplaatst hier<\/A>, Laten we een knop toevoegen die een e-mail met die geschiedenis zal verzenden. <\/P>

<\/P>

Een mailto-link kan een paar elementen bevatten:<\/P>

• het e-mailadres of de e-mailadressen waarnaar de mail wordt verzonden<\/LI>
• optioneel de CC en\/of BCC<\/LI>
• een onderwerp<\/LI>
• en een bericht<\/LI><\/UL>

  <\/P>

  De HTML die we voor de knop zullen gebruiken is vrij eenvoudig. Het bestaat uit een anker met de mailto-link (espression\/expr1) en binnen dat anker de knop (zie regels 5 tot 7):<\/P>

  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>b<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN>Onderhoudsgeschiedenis:<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>E-mailgeschiedenis:<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>E-mail<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">=<\/span><SPAN class="punctuation token">"<\/span>50<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>a<\/span><SPAnclass=\"puncutation-token\">><EMOJI_0><SPAnclass=\"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></CODE></PRE><P></P><P>De pop-up ziet er zo uit wanneer de gebruiker op een punt klikt (sorry voor het mengen van Spaans en Engels):</P><P><IMG __jive_id="452819" klasse="image-1 jive-image" hoogte="430" src="https:\/\us.v-cdn.net\6038851\uploads\legacyfs\online\452819_pastedImage_1.png" breedte="769" \/></P><p></p><p>Wanneer de gebruiker op de knop klikt, wordt er een e-mail aangemaakt als je een e-mailapplicatie hebt ingesteld op je apparaat:<&#47;p><p><IMG __jive_id="452820" klasse="image-2 jive-image" hoogte="581" src="https:\/\us.v-cdn.net\6038851\uploads\legacyfs\online\452820_pastedImage_2.png" breedte="768"&#32;&#47;><&#47;p><p><&#47;p><p>Laten we ingaan op hoe we de&nbspArcade-expressie kunnen maken om de informatie te verkrijgen en deze zo te structureren dat deze deze e-mail aanmaakt. Het deel over het verbinden met een gerelateerde tabel en het filteren van de tabel op basis van de ID van de brandkraan is hier al uitgelegd: (<A _jive_internal=&#34true&#34 href=&#34https:\/community.esri.com/docs/DOC-12773-using-featuresetby-functions-in-arcade-to-drill-down-to-other-layers-and-tables&#34 target=&#34_blank&#34>Using FeatureSetBy functions in Arcade to drill-down to other layers and tables</A>) dus ik ga hier niet verder op in. Ik gebruikte dezelfde GetHistory-functie, met een kleine maar belangrijke wijziging op regel 13:<
  ></p>
  
  Function <Spanclass=2function2EGetHistory</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 = "Hieronder vindt u de onderhoudsgeschiedenis voor brandkraan " + 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 = "Geen geschiedenis voor brandkraan " + hydrant_id;
      }
      return history;
  }
  
  Ik voeg "TextFormatting.NewLine" toe als string en niet als constante. In feite kan deze string elke unieke inhoud hebben, maar ik koos om het op deze manier te doen. Dus de resulterende string bevat alle geschiedenis&nbsp;op één enkele regel en de tekst&nbsp;<SPAN>"TextFormatting.NewLine" zal later worden gebruikt om dit te vervangen door iets dat in een URL kan worden gebruikt en zal werken als een nieuwe regel in de mail ("%0D%0A").</SPAN></P><P></P><P><SPAN>Het andere deel van de expressie wordt gebruikt om deze functie aan te roepen en de andere delen van de e-mail te definiëren:</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">"Onderhoudsgeschiedenis van 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>

  Laten we uitleggen wat we doen in dit tweede deel van de Arcade-expressie:

  • We lezen de ID van de hydrant uit op regel 1
  • Bepalen de e-mails waarnaar de e-mail wordt verzonden (inclusief 2 CC's en 1 BCC) op regels 2 tot 4.
  • Het onderwerp is in feite een tekst inclusief de variabele hydrant-ID
  • De inhoud wordt gegenereerd met behulp van de hierboven uitgelegde functie GetHistory
  • Op regels 7 tot 10 maken we een woordenboek genaamd params met de eigenschappen cc, bcc, subject en body en wijzen we de waarden toe van de variabelen cc, bcc, subject en body die zijn gedefinieerd op regels 3 tot 6.
  • Op regel 12 gebruiken we de nieuwe Arcade-functie

UrlEncode (uitgebracht in versie 1.7 ) die de URL-parameters correct zal coderen.

Op regel 13 vervangen we de tekst "TextFormatting.NewLine " door een tekst "%0D%0A ", die nieuwe regels zal creëren waar nodig in het lichaam van de e-mail. Als we dit vóór het gebruik van UrlEncode hadden gedaan, zou dit de tekst hebben omgezet in "%250D%250A ", wat waarschijnlijk zou hebben veroorzaakt dat de nieuwe regel niet werkte.

Als je vragen hebt, gebruik dan alsjeblieft de knop "Add a Reply" om het me te laten weten.

De uiteindelijke code die is gebruikt staat hieronder vermeld:

Function 

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?