Sendgrip API - use html file as body of email?

[Nathaniel]

Hi everyone,

I don’t know if it’s related, but since Wappler move to phpMailer my Sengrid smtp relay has been failing well over 50% of the time, with no errors displayed anywhere - it’s just as if the request never reached their smtp relay.

I’m therefore attempting to move to their API, which is unchartered territory for me (I’m not a good coder and illiterate with Json). I’ve got the basics done in terms of calling the API and setting the headers:

My next step is to set-up the JSON data with personalization, which will include the sender’s email address from a dynamic source (I see the editor in wappler facilitates this fairly easily), the email subject, and particularly, and HTML body. For the latter, I am trying to achieve the same that the send mail step facilitated, which is to send an HTML file as the email body:

I have not found any documentation on how to achieve this through the sengrid API, and I’m also getting multiple formatting errors as I try to learn proper JSON, making the task more challenging for something that seems fairly simple.

I wonder if anyone had a sample that I could use for guidance?

Many thanks,
Nathaniel.

[max_gb]

If I were you I would look at creating a dynamic template over at SendGrid and then using an API connection to send the email.

I’ve done similar but with another provider (Postmark). I never use SMTP anymore, usually rely on a third-party mail provider/API.

[Nathaniel]

Thanks for the pointers @max_gb, I do need to send a file as a body as it has a dynamic repeat region, and the only way I found this can be done within the wappler ecosystem is by outputing a file .

[Nathaniel]

I’m going for this for now, it seems the only thing that may work is an attachment.
I’m facing an authentication error that requires some other troubleshooting, I will update to confirm if the below works, for further reference to anyone facing the same challenge(s):

  "personalizations": [
    {
      "to": [
        {
          "email": "{{ha_settings.hass_to}}"
        }
      ]
    }
  ],
  "from": {
    "email": "{{ha_settings.hass_username}}"
  },
  "subject": "' Daily Hot Accounts Report - {{NOW_UTC.formatDate('ddd dd MMM yyyy')}}",
  "content": [
    {
      "type": "text/html",
      "value": "If the email doesn't display, please check your attachments."
    }
  ], 
  "attachments": 
  [
    {
      "content": "BASE64_ENCODED_CONTENT",
      "type": "text/html",
      "filename": "/add_ons/hot_account/hot_account.html"
    }
  ]
}

[Nathaniel]

Does any body know why in the api action I’ve got authentication set to none, but then on the server action code, I see the sendgrid api set as password? It seems to be breaking what sendgrid is expecting (adding @George and @patrick :

                                      {
                                        "content": "BASE64_ENCODED_CONTENT",
                                        "type": "text/html",
                                        "filename": "/add_ons/hot_account/hot_account.html"
                                      }
                                    ]
                                  },
                                  "password": "SG.xxxxxxx4"
                                },
                                "output": true
                              },

[Quy]

Try temporarily switching Authorization to Username and clear the Password field.

[Nathaniel]

Thanks @Quy - it doesn’t work, the value remains there and is not clear, despite switching back and forth and clearing the password each time, and putting a different value and clearing it.

[max_gb]

@Nathaniel

I do need to send a file as a body as it has a dynamic repeat region

You can do this still by using the Set Value function. It has been mentioned previously on the forums…

One final attempt at eCommerce

Of course. Here’s a couple of screenshots to hopefully illustrate how I did it. [Screenshot 2020-09-01 at 17.42.24] The below code is what’s in the Set Value line in the loop. [Screenshot 2020-09-01 at 17.42.56] I missed the part which starts the variable which contains this: <table cellpadding="3" style="border: solid 1px #999999;"> <tr> <th>Category</th> <th>Product</th> <th>Colour</th> <th>Size</th> <th align="right">Price</th> <th align="right">Qty</th> <th align="right">Total</th> </…

Repeat in eMail body

[Capture] As there is no direct way to do this. I am doing in this alternative way, with the help of variable. Concatenating the required html into the variable inside the repeating region then using this variable in mail body.

[max_gb]

You can leave Authorization as None, and make sure Data Type is set to JSON.

Then if you scroll down to the bottom you need to set a header for the SendGrid Authorization (remember to include the word Bearer):

Name	Value
Authorization:	Bearer <<YOUR_API_KEY>>

[Nathaniel]

Yes, that’s how I have it set-up, including the other required header. Does anything seem missed on this screenshot?:

[max_gb]

Ah, I see you’ve spelled Authorisation (UK) where it needs to be Authorization (US). You also need to add a colon so it looks like: Authorization:

If you’re keeping Content-Type then that also needs a colon after.

[Nathaniel]

@max_gb

Authori z ation

Good catch @max_gb, thanks! It was the spelling of authorization with a Z, the colons actually break the functionality. I have a further error on my personalizations due to the enconding of the attachments, but the api call is now working, despite the password being on the server action file.

[Nathaniel]

It looks like I have to put the HTML file content into a variable and then input it to Sendgrid as the body - my HTML output is too complex to go for the suggestion from @max_gb, does anyone know how to put a file_get_contents('http://www.example.com/') into a session from the server action interface? Maybe @George or @patrick ?
Thanks!

[Nathaniel]

Okay,
for anyone with the same or close use case, this is the solution I came up with:

1.Create a custom server side module to import HTML files.

1. a) hsjon file

  type: 'html_import',
  module : 'html',
  action : 'import',
  groupTitle : 'Custom Actions',
  groupIcon : 'fas fa-lg fa-hammer comp-data',
  title : 'Html import',
  icon : 'fas fa-lg fa-file-code comp-data',
 
  dataPickObject: true,
  properties : [
    {
      group: 'import Properties',
      variables: [
        { name: 'actionName', optionName: 'name', title: 'Name', 
          type: 'text', required: true, defaultValue: ''},
        { name: 'actionPath', optionName: 'path', title: 'Path',
          type: 'file',  required: true, defaultValue: ''}
      ]
    }
  ]
}

1.b custom HTML import PHP file (html.php):

namespace modules;

use \lib\core\Module;
use \lib\core\Path;

class html extends Module
{
  public function import($options, $name) {
    $path= $this->app->parseObject($options->path);
    $html_imported = file_get_contents(Path::toSystemPath($path));
    return $html_imported;
   
	
  }
}

2. Add a corresponding step to your server side action:
   

   

3. Set the above to your sending personalisation json code:

{
  "personalizations": [
    {
      "to": [
        {
          "email": "{{ha_settings.hass_to}}"
        }
      ]
    }
  ],
  "from": {
    "email": "{{ha_settings.hass_username}}"
  },
  "subject": " Daily Hot Accounts Report - {{NOW_UTC.formatDate('ddd dd MMM yyyy')}}",
  "content": [
    {
      "type": "text/html",
      "value": "{{ha_import}}"
    }
  ]
}