Sign in Subscribe
oracle

Oracle Responsive Email Templates

VincentMorneau

• 4 min read

Update: This project is no longer maintained.

Demo: https://apex.oracle.com/pls/apex/f?p=16371
Source: https://github.com/vincentmorneau/oracle-rwd-email-template-api

Update:

1.1.0

  • Templates are now parameterized
  • More code refactoring

1.0.0

  • Decoupled the API from the send mail feature. Now returns a CLOB value. Use your own email sending package.
  • Added new global variables
  • New comments / documentation all over the API
  • Huge refactoring
  • Added support for columns and sub columns from 1 to 12
  • Added more options to panels
  • Added more options to typography
  • Added more options to buttons

If your Oracle application has email capabilities, you probably had a hard time formatting your stuff. Most of the time, my applications were sending text-only based emails for the sake of developing simplicity.

BTW, why are emails so hard to design?

Truth is I have no idea. Even popular email clients such as Gmail or Outlook have their limitations... and I mean... IE6-like limitations.

That being said, the folks at ZURB created an email framework called Ink for making responsive email templates. It's basically just HTML, so I thought I'd transform it into a dynamic PL/SQL API for Oracle.

It comes with 4 predefined templates, but of course you can create your own.

Example:

The code...

The package's code is very heavy because we use inline CSS instead of <style></style> tags. For some reason, clients like Gmail strips out everything you put in the <head> tag (including <style></style>), so the only way to style a component within an email body is to use inline CSS.

All you need to know is how to replace your content, don't bother about the functions returning HTML.

How to customize

Global Constants

You can change a few constant in the package specification. I intend to add more in the coming weeks. These will affect the general look and feel.

Content (example with apex_mail)

You obviously need to adapt the template with your content. The package contains a record type that you need to fill out in order to call the templates functions.

DECLARE
    l_body     clob;
    l_content  rwd_email.t_content;
BEGIN    
    /******************************
    Initialize your content in here
    ******************************/
    l_content.logo_url := 'http://insum.ca/ia/swinsum/build/assets/img/logo-insum.png';    
    l_content.title := 'SIDEBAR HERO';
    l_content.welcome_title := 'Vincent,';
    l_content.sub_welcome_title := 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.';
    l_content.big_picture_url := 'http://insum.ca/ia/swinsum/build/assets/img/bg1.jpg';
    l_content.top_paragraph := 'Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.';
    l_content.bottom_paragraph := 'A small river named Duden flows by their place and supplies it with the necessary regelialia. <a href="#">This link! »</a>';
    l_content.bottom_paragraph_subtitle := ' This is a note.';
    l_content.bottom_paragraph := 'A small river named Duden flows by their place and supplies it with the necessary regelialia. <a href="#">This link! »</a>';
    l_content.left_paragraph := 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.';
    l_content.right_header := 'Header Thing';
    l_content.right_sub_header := 'Sub-head or something';
    l_content.social_title := 'Connect With Us:';
    l_content.contact_info := 'Contact Info:';
    l_content.contact_phone := 'Phone: <b>514.387.1670</b>';
    l_content.contact_email := 'Email: <a href="mailto:vmorneau@insum.ca">vmorneau@insum.ca</a>';
    l_content.footer_links := '<a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a>';

    /*l_body := rwd_email.basic(l_content);
    l_body := rwd_email.hero(l_content);
    l_body := rwd_email.sidebar(l_content);*/
    l_body := rwd_email.sidebar_hero(l_content);

    apex_mail.send (
        p_to        => 'to@email.com',
        p_from      => 'from@email.com',
        p_body      => l_body,
        p_body_html => l_body,
        p_subj      => 'This is a responsive email');
        
    apex_mail.push_queue;
END;

Other Examples:

Desktop Basic

Desktop Hero

Desktop Sidebar

Mobile (Basic & Hero)

Mobile (Sidebar & Sidebar Hero)