Scripting to Click an Icon to Send Email

[apreble]

Hello, 

Curious to know if there is a basic javascript that can be imported to accommodate for 2 things- icons and emailing ability. I saw a tutorial for basic scripting for creating a fold out panel (tutorial page is attached), but I was most interested in the ability to add icons and click an icon to generate an Outlook email with a pre-completed destination, subject, and body message. The red highlighted box shows the icon and when this button is clicked, it creates a half-created email. I could have copied the existing javascript that was in the DXP file, but most of it seemed to be accordion/fold out panel related and I only would like to know how to import cool clickable icons and the ability to create an email.  On a side note- is there any great places or suggestions for beginners to find javascript/IronPython material to learn how to do these things? Thank you!

 

 

[David Boot-Olazabal]

Hi apreble,

Do the script has to be a javascript, or is iron python or action mods (when you're on the latest version) also an option for you?

Kind regards,

David

[apreble]

@David Boot-Olazabal Thank you for the reply! I can do javascript or IronPython. I have ability to choose the 2.0 and 2.7 versions on my system. 

[David Boot-Olazabal]

Hi apreble,

Here are a few iron python scripts related to the mail part:

https://spotfired.blogspot.com/2018/04/send-email-with-pdf.html

https://spotfired.blogspot.com/2014/05/sending-emails-gmail-example.html

When it comes to using icons for the script, you can do so per script in the action control window (inside a text area).
When you set up an Action Control, you're asked to enter the Display text, the Control type and select an action (in your case this would be the script). When you inspect the drop-down list from Control type, you can select an image, that acts as the icon. By clicking on the browse button, you can then select your image file (the home.png in the example below):

Kind regards,

David

[apreble]

I'm not needing to send any PDFs/other attachments, I just need to see if there's any type of script that exists for clicking a simple button/icon and it generates an Outlook email that they can fill out and send on their own.  This email would be sent to myself and would have a pre-created subject, and part of the body saying something like: "Hi, I have a question about this Spotfire guide:" 

[Jose Leviaguirre]

Gello @apreble I believe you are referring to this article in which it mentions briefly about sending emails.  The mailto value on your href attribute for you anchor tag. No JavaScript needed:

<a href="mailto:your-email@example.com?subject=Question%20about%20Spotfire%20Guide&body=Hi,%20I%20have%20a%20question%20about%20this%20Spotfire%20guide:">
          <span style="display: inline-block; padding: 10px 20px; background-color: #007BFF; color: white; border-radius: 5px; text-decoration: none; cursor: pointer; font-family: Arial, sans-serif; font-size: 16px;">
 ☰📧 Email Me</span>
</a>

This is standard html and there are many great guides for basic web technologies from beginners to advanced in the Internet. 

The trick relies is:
<a href="mailto:your-email@example.com?subject=Question%20about%20Spotfire%20Guide&body=Hi,%20I%20have%20a%20question%20about%20this%20Spotfire%20guide:">

• the <a> tag defines a hyperlink, which is used to link from one page to another.
• The `href` attribute specifies the URL of the page the link goes to. In this case, it uses the `mailto` protocol to open the default email client.
• mailto: is a protocol that tells the browser to open the default email client to send an email.
• Email Address: `your-email@example.com`: This is the recipient's email address. Replace this with the actual email address you want the email to be sent to
• Query Parameters:
  • ?subject=Question%20about%20Spotfire%20Guide&body=Hi,%20I%20have%20a%20question%20about%20this%20Spotfire%20guide:
    • ? Indicates the start of query parameters.
  • subject=Question%20about%20Spotfire%20Guide`: Sets the subject of the email. Spaces are encoded as `%20
    • &: Separates multiple query parameters.
  • body=Hi,%20I%20have%20a%20question%20about%20this%20Spotfire%20guide Sets the body of the email.
    • Spaces and special characters that are URL-encoded.

the span has a style attribute that controls the look and feel of the rendered button

[apreble]

@Jose Leviaguirre Yes! This is exactly it, thank you so much! Is there a way I can change the look of the icon, or sub that icon out for a different one? 

Edited September 11 by apreble

[Jose Leviaguirre]

@apreble, You can play with the attributes. Here is a trick you can use to explore the settings. You will need to enable developer tools from Tools > Development > Developer tools.... If you don't see that option, go to Tools > Options > Application and enable Developer tools at the bottom. You will need to close and open the application. A shortcut to show the developer tools is to press ctrl+alt+shift+F12 even if you don't see the developer tools option from the tools menu. This is the same developer menu you find in Google Chrome when clicking F12

Once you are happy with the changes, you need to copy them in your html markup
 

Edited September 11 by Jose Leviaguirre

[apreble]

This is awesome. Thank you so much for the help!

[Jose Leviaguirre]

By the way, if you want to add icons, there are many icon libraries out there. One popular one is font awesome. All you have to do is include this in your text area and start using the icons as per the documentation




html

<span id='fa-placeholder'></span>

<h1>
  <i class="fas fa-home"></i> <!-- Home icon -->
  <i class="fas fa-user"></i> <!-- User icon -->
  <i class="fas fa-cog"></i> <!-- Settings (cog) icon -->
  <i class="fas fa-search"></i> <!-- Search icon -->
  <i class="fas fa-heart"></i> <!-- Heart icon -->
  <i class="fas fa-shopping-cart"></i> <!-- Shopping cart icon -->
  <i class="fas fa-bell"></i> <!-- Bell (notification) icon -->
  <i class="fas fa-envelope"></i> <!-- Envelope (email) icon -->
  <i class="fas fa-phone"></i> <!-- Phone icon -->
  <i class="fas fa-camera"></i> <!-- Camera icon -->
  <i class="fas fa-trash"></i> <!-- Trash (delete) icon -->
  <i class="fas fa-edit"></i> <!-- Edit (pencil) icon -->
  <i class="fas fa-check"></i> <!-- Check (tick) icon -->
  <i class="fas fa-times"></i> <!-- Times (close) icon -->
  <i class="fas fa-info-circle"></i> <!-- Info circle icon -->
  <i class="fas fa-exclamation-triangle"></i> <!-- Exclamation triangle (warning) icon -->
  <i class="fas fa-lock"></i> <!-- Lock icon -->
  <i class="fas fa-unlock"></i> <!-- Unlock icon -->
  <i class="fas fa-download"></i> <!-- Download icon -->
  <i class="fas fa-upload"></i> <!-- Upload icon -->
</h1>

js
 

const placeholder = document.getElementById('fa-placeholder');
fa_link  = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">`
placeholder.innerHTML = fa_link