SendGrid sending blank email

Ask the community
,
1

I have been trying to set up a multi-step form and have the value submitted on the form to email using SendGrid. I have API key, template_id and have followed steps of our forum to use this API to submitted data but i keep getting blank emails. I am to share my page code, Sendgrid.js file code and email.jsw file code.

//page code
 import {sendEmail_with_temp_id} from 'backend/email';

let count=0;
var repeater_data=[];

$w.onReady(function () {

 
 for (var i = 0; i <= 1; i++) {
        count++;
        console.log("adding data");
        repeater_data.push({
            _id:makeid(10),
            count:count,
        })
 
 if(count===52){
            console.log("data added to repeater")
            $w("#repeater1").data=repeater_data;
 

        }
    }

    $w("#repeater1").onItemReady( ($item, itemData, index) => {
        $item("#text13").text = itemData.count.toString();
 } );

});

function makeid(length) {
 var result           = '';
 var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 var charactersLength = characters.length;
 for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
 return result;
}

function add_new(){
    $w("#error").hide();
 if(count!==52){
        count++
        repeater_data.push({
            _id:makeid(10),
            count:count,
        });
    update_repeater();

    }
 else{
show_error("cannot exceed 52 rows");
    }
}

function show_error(message){
    $w("#error").text=message;
    $w("#error").show();
}

function update_repeater(){
    $w("#repeater1").data=repeater_data;
    $w("#repeater1").forEachItem( ($item, itemData, index) => {
  $item("#text13").text = itemData.count.toString();
} );
}

export function button2_click(event) {
    add_new();
}

function remove_last(){
    $w("#error").hide();
 if(count!==1){
repeater_data.pop();
    count--;
    update_repeater();
    }
 else{
        show_error("cannot remove all strings!!")
    }
 
}

export function button3_click(event) {
    remove_last();
}

function validate_empty(id,message){
    $w("#error").hide();
if($w(id).value===""){
    show_error(message)
 return true
}
return false;
}

export function button1_click(event) {

    console.log(validate_measurements());

 
 if(validate_empty("#input1", "Please provide a valid name")){
 return;
    }
 if(validate_empty("#textBox1", "Please provide a valid Address")){
 return;
    }
 if(validate_empty("#input2", "Please provide a valid email address")){
 return;
    }
 if(validate_empty("#input3", "Please provide a valid Instrument make")){
 return;
    }
 if(validate_measurements()){
 return;
    }
    $w("#spinner").show();
 

    console.log("send the email data")

 let name=$w("#input1").value;
 let address=$w("#textBox1").value;
 let email=$w("#input2").value;
 let instrument_make=$w("#input3").value;
 let comment=$w("#textBox3").value;

 let table_data="<table style='border: 1px solid black;border-collapse: collapse;width:100%'>  <tr style='border: 1px solid black;border-collapse: collapse;'>    <th style='border: 1px solid black;border-collapse: collapse;background-color: black;color: white;border-color: white;padding: 15px;text-align: left;font-weight: bold; '>String A</th>    <th style='border: 1px solid black;border-collapse: collapse;background-color: black;color: white;border-color: white;padding: 15px;text-align: left;font-weight: bold; '>String B</th>     <th style='border: 1px solid black;border-collapse: collapse;background-color: black;color: white;border-color: white;padding: 15px;text-align: left;font-weight: bold; '>Core</th>    <th style='border: 1px solid black;border-collapse: collapse;background-color: black;color: white;border-color: white;padding: 15px;text-align: left;font-weight: bold; '>Overall</th>  </tr>";
 
    $w("#repeater1").forEachItem( ($item, itemData, index) => {
        table_data+="<tr style='border: 1px solid black;border-collapse: collapse;'>    <td style='border: 1px solid black;border-collapse: collapse;padding: 15px;text-align: left;'>"+$item("#input4").value+"</td>    <td style='border: 1px solid black;border-collapse: collapse;padding: 15px;text-align: left;'>"+$item("#input5").value+"</td>    <td style='border: 1px solid black;border-collapse: collapse;padding: 15px;text-align: left;'>"+$item("#input6").value+"</td>    <td style='border: 1px solid black;border-collapse: collapse;padding: 15px;text-align: left;'>"+$item("#input7").value+"</td>  </tr>";
    } );

    table_data+="</table></body></html>";

    console.log(table_data);

 var data={
    name: name,
address: address,
email: email,
instrument: instrument_make,
comment: comment,
table_data: table_data,
}
let Recipient="myemail.com";
let body="<p>data</p>";
    sendEmail_with_temp_id("d-a31df45cf4a74af389f107a282cb3dxx",body, Recipient,data)
    .then(()=>{
        $w("#spinner").hide();

        console.log("response");

        $w("#success").show();
        update_repeater();
    });
 
 
}

function validate_measurements(){
    $w("#error").hide();
 let validated=false;
 let valueerror='Error in measurements'
    $w("#repeater1").forEachItem( ($item, itemData, index) => {
        console.log("checking the data");
 if($item("#input4").value===""){
      show_error("please add measurement value A at  number "+$item("#text13").text);
      validated=true;
 throw valueerror;
  }
 if($item("#input5").value===""){
      show_error("please add measurement value B at  number "+$item("#text13").text);
      validated=true;
 throw valueerror;
  }
 if($item("#input6").value===""){
      show_error("please add measurement value Core Ø at  number "+$item("#text13").text);
     validated=true;
 throw valueerror;
  }
 if($item("#input7").value===""){
      show_error("please add measurement value Overall Ø at  number "+$item("#text13").text);
     validated=true;
 throw valueerror;
  }
  end:
 return validated;
} );
console.log("all data checked successfuly");

}

Sendgrid.js

import {fetch} from 'wix-fetch'; 
export function SendInstruction_with_id(template_id,APIKey, Sender, RecipientEmail, Subject, body,data) {
 const url = "https://api.sendgrid.com/v3/mail/send";
 
 const MyHeaders = {
 "Authorization": "Bearer " + APIKey,
 "Content-Type": "application/json"
    };
 const MyBody = {
 "personalizations": [{
 "to": [{
 "email": RecipientEmail
            }],
 "dynamic_template_data":data
        }],
 "from": {
 "email": Sender
        },
 "subject": Subject,
 "content": [{
 "type": "text/html",
 "value": body
        }],
 "template_id" : template_id
    };

 return fetch (url, {
 "method": "POST",
 "headers": MyHeaders,
 "body": JSON.stringify(MyBody)
        })
        .then(Response =>Response.text);        
}


//email.jsw

import {SendInstruction_with_id} from 'backend/sendGrid';

export function sendEmail_with_temp_id(template_id,body, Recipient,data) {
 const key = "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";
 const sender = "exammple@mail.com";
 const Subject="New order request";
 return SendInstruction_with_id(template_id,key, sender, Recipient, Subject, body,data);
}

Any help will be highly appreciated!

2

Why don’t you use @sendgrid/mail npm? It would be easier.