How to Send an Email with a Click of a Button

Learn the step-by-step process of setting up a button to send an email in this article.

Example Use Case

Imagine you're part of a project team using a Knack app for task management. Each team member has a set of tasks assigned by the project manager.

To enhance efficiency and streamline communication, you decide that you would like to implement a button where team members can easily notify the project manager via email when they complete their tasks.

This saves time and ensures seamless communication within the team, allowing for swift task tracking and management. Let's dive into how you can implement this functionality into your Knack app to optimize your project workflow. 🚀

Requirements

To proceed with these steps, it would be beneficial for you to have prior knowledge of action links. You can learn about them in our article here: Using Action Links

We also will be utilizing a grid view. You can find more information about this element type here: About Grid Views

Another valuable resource to explore is our section on action links in our article on Sending Emails: Managing Emails Using Action Links

Steps

• Add a View

• Add a Column to the View

• Configure the Column Properties

  • Criteria

  • Actions

  • Email to Send

  • Outcome

  • Display Rules

  • Design

  • Link Design

• Save the Column Properties and Test 

  
  
  

---

1.  Add a View

The first step is to add a view or navigate to an existing one with the necessary data for triggering an email. For this article's example use case, we will utilize the Project Management template app and apply the following steps to the "My Active Tasks" grid view.

2.  Add a Column to the View

To begin adding a column to the grid view for the action link button, we will first access the grid's settings by simply selecting the grid in the page preview or by selecting the pen icon. Then, we'll select the Add Columns option from the left panel menu:

Next, we'll select the Actions tab and then choose "Trigger an action" to begin configuring our action link button to trigger an email to be sent:

3.  Configure the Column Properties for the Action Link

Now, we can get into configuring the criteria, actions, email message body, recipients, outcome, display rules, and design. 

From top to bottom in the Column Properties, we'll start with the Header. For this example, we'll label the column header as "Send an Email to PM":

Next, we'll want to input the link text for the button. We can input "Task Completed":

Criteria

You can select the "+ Add Criteria" button if you would like to filter what records this action link will be available for. Multiple filters can be applied here. 

For this use case, we'll leave it as default to be displayed for every record. 

Actions

Under the Actions section, this is where we will need to select the action the button will trigger. In this case, we want to send a custom email. 

Email to Send

Under the Email to Send section, we will input who the email will be from, the from email address, recipients, subject, and message body. 

With emails in Knack, you can:

• Add multiple recipients by selecting the plus sign icon to the right of the recipient input

• Select between To, Cc, Bcc, and Reply-To from the dropdown menu

• Insert field values for the subject and the body by selecting the {...} icon

• Apply options to your message body such as HTML, images, videos, links, tables, and common formatting options. 

Outcome

The Outcome section allows you to configure the action that will take place after the action link button is clicked. 

These actions include:

• Show a confirmation message

• Redirect to the parent page

• Redirect to an existing page

• Redirect to another website URL

• Redirect to a new child page (a modal will appear for you to name the new child page prior to creation)

For the purpose of the article, we will leave the default setting to show a confirmation message. 

Display Rules

In the display rules section, you can apply display rules for your action link column's display. To learn more about using display rules, see our Grid Column Settings and Using Display Rules articles. 

Design

In the Design section, you can apply a custom action link width by pixels or percent and also choose the alignment of the action link in the grid's column.

Link Design

By default, the link will use global design settings that have been applied in the Live App Design section of the Builder. If you choose to override the global settings, you can select the toggle here to apply your custom design settings to the action link. 

4.  Save the Column Properties and Test 

Once you have finished configuring your action link settings, it's time to select to save the action link and test out the button in the Live App. 

An effective method to preview the email configuration is by setting the recipient to your own email address initially to verify that the email is sent as desired. Once you have confirmed the email content and the outcome selection align with your expectations, your task is complete! 

Congrats, you have now created a button in your Live App to send an email! 🚀

---