Forum Discussion

AlexCouts1's avatar
AlexCouts1
Qrew Trainee
2 years ago

Email Notification Give Error About Javascript when there is no Javascript being used?

Currently trying to revamp the email notification template we are using to convey information about ETO requests to make them more readable. Wrote up some CSS and used a <style> tag to inject it rather than writing it directly inline. the <style> tag has a type of text/css, yet I am getting an error about using javascript? Is it the tag type that is triggering this error? 

<style type="text/css">.EmailBody__sectionTitle {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #1d1d1d;
        font-weight: 800;
        text-decoration: underline;
    }
    .subContainer__label {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 400;
        font-size: 1.2em;
        color: #0000FF;
    }
    .subContainer__data {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1em;
    }
    .subContainer__information {
        font-style: italic;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: .8em;
    }
    .EmailBody {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    .EmailBody__contentContainer {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        flex-wrap: wrap;
        padding-bottom: 2%;
    }
    .contentContainer__subContainer {
        height: 20%;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    #ETO {
        height: 80%;
        background-color: #ffffcc;
    }
    #employee {
        height: 40%;
        background-color: #ccffff;
    }
    #approval {
        height: 30%;
        background-color: #ccffcc;
    }
    #name {
        width: 45%;
    }
    #role {
        width: 45%;
    }
    #employeeEmail {
        width: 60%;
    }
    #LeaveStart {
        width: 50%;
    }
    #LeaveEnd {
        width: 50%;
    }
    #ETORequested {
        width: 30%;
    }
    #Manager {
        width: 40%;
    }
    #Reason {
        width: 100%;
        padding-left: 2%;
        flex-direction: column;
        align-items: flex-start;
    }
    #ETOinformation {
        flex-direction: column;
        padding: 0 2% 0 2%;
        justify-content: center;
        height: 20%;
        width: 100%;
        text-align: center;
    }
</style>
<div class="EmailBody">
<h1 class="EmailBody__sectionTitle">Employee Information</h1>

<div class="EmailBody__contentContainer" id="employee">
<div class="contentContainer__subContainer" id="name">
<p class="subContainer__label">Employee Name:</p>

<p class="subContainer__data">[Employee - Candidate - First & Last Name]</p>
</div>

<div class="contentContainer__subContainer" id="role">
<p class="subContainer__label">Employee Role:</p>

<p class="subContainer__data">[Record - Employee - Candidate - Positions - Title]</p>
</div>

<div class="contentContainer__subContainer" id="employeeEmail">
<p class="subContainer__label">Employee Email:</p>

<p class="subContainer__data">[Record - Employee - Company E-Mail]</p>
</div>
</div>

<hr />
<h1 class="EmailBody__sectionTitle">ETO Request</h1>

<div class="EmailBody__contentContainer" id="ETO">
<div class="contentContainer__subContainer" id="LeaveStart">
<p class="subContainer__label">Leave Starts:</p>

<p class="subContainer__data">[First Leave Day]</p>
</div>

<div class="contentContainer__subContainer" id="LeaveEnd">
<p class="subContainer__label">Leave Ends:</p>

<p class="subContainer__data">[Last Leave Day]</p>
</div>

<div class="contentContainer__subContainer">
<p class="subContainer__label" id="ETORequested">ETO Hours Requested:</p>

<p class="subContainer__data">[Number of ETO Hours Requesting to Use:]</p>
</div>

<div class="contentContainer__subContainer" id="Manager">
<p class="subContainer__label">Employee Manager Email:</p>

<p class="subContainer__data">[Record - Employee - Managers Email:]</p>
</div>

<div class="contentContainer__subContainer" id="Reason">
<p class="subContainer__label">Reason for Leave:</p>

<p class="subContainer__data">[Reason for Leave:]</p>
</div>

<div class="contentContainer__subContainer" id="ETOinformation">
<p class="subContainer__information">Supervisor to indicate approval below. Requests will be sent to HR for verification of eligibility. Approval or Disapproval will be sent to employee after HR action.</p>

<p class="subContainer__information">Eligible employees will recieve PTO for the following federal holidays: Memorial Day, Independence Day, Labor Day, Thanksgiving, Christmas Eve, Christmas Day.<br />
There is no need to submit PTO requests for these days.</p>
</div>
</div>

<hr />
<h1 class="EmailBody__sectionTitle">Approve or Decline</h1>

<div class="EmailBody__contentContainer" id="approval">
<p class="contentContainer__button" id="btn_approve">[Approve]</p>

<p class="contentContainer__button" id="btn_decline">[Decline]</p>
</div>
</div>


------------------------------
Alex Couts
------------------------------
  • I'm not 100% sure about the style tag being the issue but it would potentially line up. If you remove the <style> tag can you save it? It's nothing more than a hunch but I would imagine that Quickbase when sending the email is binding the HTML into their email processor but its the style tag would need to be inserted into the Header to be utilized which is likely causing your issue and potential flag. I've only ever seen rich-text support in-line style using emails. 



    ------------------------------
    Chayce Duncan
    ------------------------------
    • AlexCouts1's avatar
      AlexCouts1
      Qrew Trainee

      I ended up re-writing the email template using inline styling and it took. I also learned that email template engines do not support flex-box and other modern styling markup, so that was fun to unravel and fix. Thank you for the response, but I figured my own problems out. 



      ------------------------------
      Alex Couts
      ------------------------------