Modifying interface + added functionality


#1

My company is using this tool for work and to streamline the integration process with an email application, they would like to modify this email builder to add an additional button to pass the exported HTML markup back to a parent window.

Can this be done? If possible, they would like the button to be added within the Export panel or replace the export HTML button. Where in the code would I find this?


#2

Hi there, thanks for your choice.
Can I have a screen about what you want to do?

You should edit HTML markup from here -> app/builder/layouts/layout you did choose/builder.html.
You may need some additional programing functions, there’re all -> app/builder/builder.js.


#3

This is what I’m trying to do. The red square is where I’m trying to put the additional button.


Edit: different question
I have figured out most of the problem on the backend code, but there is one sticking out: the email builder works fine on its own, but it does not show up when opened as a child window from a window.open() call. After a refresh, it can’t call its opener’s function, or having information of the opener at all, despite having the opener reference not null. Please help, I need this email builder functional as a popup window.

Code in builder.js:

$scope.downloadHtml = function () {
    if (window.opener == null) {
        var a = document.createElement('a');
        a.target = '_blank';
        utils.trackEvent('Email', 'export', 'HTML');
        a.href = 'data:attachment/html,' + encodeURI($scope.Email.html);
        a.download = utils.uid('export') + '.html';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    } else {
        utils.trackEvent('Email', 'export', 'HTML');
        window.alert($scope.Email.html);
        window.opener.insertEditor($scope.Email.html);
        window.close();
    }
};

Markup in parent page:

<script type="text/javascript">
function openBuilder() {
    var c = window.open("localhost:12000"); // email builder hosted here
}
function insertEditor(HTMLContent) {
    window.alert(HTMLContent);
}
</script>
<input type="button" value="Open Template Builder" onClick="openBuilder()" />

#4

Oh, I understood, after refresh you loose reference with window.opener, I think it isn’t better idea to do that, maybe you can do that with anchor targets.

<a href="email builder path" target="_top">Open Email Builder</a>

I forgot how, but as I remember, you can manipulate it whether target is _top or something like that!


#5

For technical reason, I will need to open the email builder from a script (we need the reference to the popup window for a later script) so an <a> tag wouldn’t do the job here. But anyway, I figured out that you can get the email builder to load right away is changing its URL into “http://localhost:12000/#!/”.

The problem with window.opener remains though. But for a different reason that makes it quite hard to integrate into our email application. Our email app runs on a PHP server whereas Angular Email Builder runs on a NodeJS server. Interactions between these 2 servers constitutes Cross-Site Scripting and so they trigger a SecurityError. This pretty much necessitates us running Angular Email Builder on the same server as our email app (which is a PHP server), but how would that work out? Please give suggestion.


#6

You don’t need a NodeJS server to run this builder, you can run it also in PHP. Just upload all files from app in your apache server, and open index.html from your server, there can be some issues with assets right path, but you can change them where you want, from index.html.

Or you can do another way:

  1. Run it locally with nodejs.
  2. Make all your changes and run gulp in terminal - that command allow you to compress and minify all files for production mode.
  3. Upload all files from _dist folder to your apache server.
  4. Make sure there are right assets path.

That needs to work for you. Also you have to add your MJML api credentials in config.js to generate output HTML remotely.

Let me know whether is OK for you!