- Products
- Solutions Use casesBy industry
- Developers
- Resources Connect
Email API
Calendar API
Scheduler
Contacts API
ExtractAI
Salesforce email integration
Google email & calendar integration
Outlook email & calendar integration
IMAP integration
Calendar management
Embedded contextual email
Scheduling automation
Automated outreach
Intelligent data extraction
Ecommerce
Telehealth
Real estate
Financial technology
Educational technology
Expense management
Customer relationship management
Applicant tracking system
Communications platform
Marketplaces
Document management
Docs
SDKs
Tutorials
API status
Changelog
Support
Blog
Events
Guides
Inspiration gallery
Partners
Build vs. buy
Customer stories
Security & Compliance
Why Nylas
Newsroom
Jump to section
Featured articles
Jump to section
While it’s true that we’re living in an age of technology, not everybody is a developer. That makes things more complicated for people with great ideas but a lack of development knowledge. Fortunately, with the arrival of low-code/no-code technologies, things have changed and now everybody can develop full-fledged applications without writing a single line of code. Today, we’re going to build an interface to interact with our contacts and learn how to send an email using WeWeb.io and Nylas.
Let’s get started.
What are we going to talk about?
- Create the project
- Creating the layout
- Populating the Select component with contacts
- Adding an action to the Select component
- Creating the information modals
- Send an email with WeWeb.io
- What’s next?
Create the project
Once we’re logged into WeWeb.io, we will need to create a workspace and then a project. Click on Create or Duplicate project to get started:
We’re going to choose the Blank template, as we want to have a simple layout:
We need to name our project, so let’s choose Nylas_Email, as it defines what our project is all about:
Once we’re done, our project will be listed, so that can start working on it:
Creating the layout
First, we want to have a container, where all of our components are going to reside. Mostly, to have them organized:
Using the columns component is a good way to keep the elements centred inside our container:
As we want the user to select a contact, we need a text component:
And a Select (or dropdown) component:
Our interface should look something like this:
For the body of the email we will use a Rich text component, as it will allow us to format our text:
After adding all the components, our form should look something like this and in the end it will allow us to send an email with WeWeb.io:
Populating the Select component with contacts
We want to fetch our contact information and use it to populate the Select component. For that, we need to select Data, from the upper-left corner:
Then select Variables and add a new variable:
This new variable is going to be called url and it’s going to be of the type Query. It will contain the path for the Nylas’ Contacts endpoint:
We’re going to create another variable that will hold the contact ID, as we’re going to need it when getting the contact email later on:
After creating the variables, we need to choose Collections and Add collection:
As our data source, we’re going to choose REST API, as we’re going to call the Nylas API, to read from our contacts:
The REST API is a plugin that we must install (it’s free, so no worries):
We’re going to name this collection Get_Contacts and we’re going to choose Dynamic as the Mode:
On the configuration part, we need to pass the Nylas Contacts Endpoint and specify the headers and the authorization (access token from Nylas). The query string is optional, but I’m choosing address_book and passing a group to limit the amount of contacts. It’s critical to turn on the Send credentials option:
Once we click on Continue, the process will get executed and we will be able to see the result. We’re fetching 6 contacts:
Now that we have data that we can use, it’s time to feed our Select component.
We need to clear the default options first:
Click on the options parameter to pass a value:
Here we’re going to choose Collections → Get_Contacts → [] Data:
Our six contacts are going to be displayed, although as objects, as each contact will have elements like name, email, address and so on:
When the data is linked to the Select component, we can then select given_name for the label and id for the value fields:
We have now a selectable list of contacts:
Adding an action to the Select component
The Select component is working fine, but not doing anything yet. We’re going to add an action, by selecting the Actions tab:
And creating a new Workflow:
We’re going to select Change variable value as we want to store the value of the Select component inside a variable:
We’re going to change the get_contact variable by concatenating the url variable and the Contacts – value element:
After that, we’re going to call another REST API Request, this time to pick up the details from the selected contact:
We’re going to call this action read_contact_details and will pass the get_contact variable as the URL for the API call:
We’re going to call another Change variable value, but this time passing our Name text component. As the value we’re going to pass the concatenation of read_contact_details.result.given_name with read_contact_details.result.surname, so that when we select a name from the Select component, the Name text component will be automatically populated:
It’s important to note that the first time you build this, you’re going to get nothing in return. If that happens, you just need to press the Test button to generate the workflows and fill the values in memory. After that, you will be able to select them without any issues.
We also want to display the email of the contact, so we create another Change variable value and update it accordingly:
Creating the information modals
We’re going to send an email to our selected contact via WeWeb.io, so it would be good to have a visual indication of whether our email was successfully sent or not.
To achieve this, we’re going to use two Modal components:
Once we place them in our container, they’re going to be invisible, but we can fetch them from the Navigator section. We can name them for better management:
And of course, change their messages and their layout. An easy way to do this, is to change their state from the properties window:
The modal should look like this:
Each modal will come with a variable that indicates if it is open or closed. It’s a good idea to change their names so we know which one we are using:
Send an email with WeWeb.io
Finally, we’re going to work on how to send an email using WeWeb.io components.
We’re going to select our button component and create a new workflow:
The first action that we’re going to create is going to be a REST API Request. However, this time we are going to use a POST instead of a GET because we’re going to send data instead of read it:
Almost everything is going to be the same, with a clear exception of the formula that we’re going to use for the body, which by the way is going to be a Raw body:
Here we’re going to concatenate all the needed information as a JSON object. To make it easier, copy the following code and replace the XXX with the correct values:
concatenate("{\"subject\":\"",XXX,"\", \"body\":\"",XXX,"\",\"to\":[{\"email\":\"",XXX,"\",\"name\":\"",XXX, "\"}]}")
Once done, we will need to change the value of a new variable that will be called the result. Here, we’re going to grab the value of Send_Email.result as a boolean object (True or False):
Once we know if our API call was successful or not, we can call a True/False split action and assign each modal variable where it belongs:
For each modal, we need to assign an action to their continue button, and this simply passes a false value to close them:
Now, we can select a contact, choose a subject, write a body and send the email:
We can open it to make sure it was delivered:
To keep in mind, when using the Rich Text Editor, make sure not to change the font colour or setup a link as it will not work well with the JSON body. That’s something that can be done with some extra work.
What’s Next?
While it took a lot of steps, we were able to build an application using zero lines of codes and send an email thanks for WeWeb.io
To learn more about our Contacts APIs, go to our documentation Contacts API Overview.
To learn more about our Email APIs, go to our documentation Email API Overview.
You can sign up for Nylas for free and start building!
Don’t miss the action, join our LiveStream Coding with Nylas!
