Jump to content

Scripting to Click an Icon to Send Email


apreble
Go to solution Solved by Jose Leviaguirre,

Recommended Posts

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!

image.thumb.png.f95c7a9edba47cd3f9a835d9d13e86fa.png

 

 

Link to comment
Share on other sites

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):

image.thumb.png.39729187eb148f17cb01ad9a75d299ed.png

Kind regards,

David

  • Like 2
Link to comment
Share on other sites

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:" 

Link to comment
Share on other sites

  • Solution

Hello @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:

image.png.85a45803854a1ae0bf91f82faafe785c.png

<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

Edited by Jose Leviaguirre
  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@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 F12inspector.thumb.gif.5a90bd1189d7cea2abd646c41afd34bd.gif

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

Edited by Jose Leviaguirre
  • Like 2
Link to comment
Share on other sites

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

font-awesome.png.21429705d0093ba9cc72c5c2da7942df.png


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


 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...