Source mode for custom emails

The email editor offers an easy way to customize content. Use source mode when you need direct control over HTML.

Open source mode

Select Source from the controls in the email editor. 

To exit source mode, select Source again. 

Work in source mode

Learn more about HTML tags supported by Quickbase.

Email elements, fields, and markers added in the editor have the following translations in source mode:

Functionality available only in source mode

Source mode allows you to add reports to your email from any related table in your app. Reports will be inserted as a table with simple formatting. Then you can customize the table, just like the Report as a customizable table element available in document templates. 

Here's an example of the code for a table like this in source mode:

<h1>Project Tasks</h1>
<figure class="table">
  <table qb-wrapper-tag="qb-run-report" data-report-id="32" 
data-table-id="bqn7eauji" data-report-link-field-id="35" width="100%">
    <thead>
      <tr>
        <th>Task Name</th>
        <th>Assigned To</th>
      </tr>
    </thead>
    <tbody>
      <tr qb-wrapper-tag="qb-run-report-repeat">
        <td>
          <qb-field field-id="6" source="report"></qb-field>
        </td>
        <td>
          <qb-field field-id="125" source="report"></qb-field>
        </td>
      </tr>
    </tbody>
  </table>
</figure>

To create the table in source mode:

1. Use the <figure> HTML tag, with a class of table class="table".
2. Add a table tag and include:
   • qb-wrapper-tag="qb-run-report" 
   • data-report-id="x" – substitute "x" with the report ID of the report you want to include
   • data-table-id="dbid" – substitute "dbid" with the table ID where the report is located
   • data-report-link-field-id="x" – substitute "x" with the field ID of the report link field on the table
3. Code an HTML table with a heading row <thead> and a body row <tbody>. In the heading row, add labels for the columns. The labels will likely match the field names from the report you intend to pull in. For example:

    <thead>
         <tr>
           <th>Task Name</th>
           <th>Assigned To</th>
         </tr>
       </thead>    

4. Add a table body. Make sure:
   • Table rows contain qb-wrapper-tag="qb-run-report-repeat"
   • Table data references report fields by using qb-field field-id="x" source="report", where "x" is replaced by the field ID you want to reference.
     For example:

        <tbody>
           <tr qb-wrapper-tag="qb-run-report-repeat">
             <td>
               <qb-field field-id="6" source="report"></qb-field>
             </td>
             <td>
               <qb-field field-id="125" source="report"></qb-field>
             </td>
           </tr>
         </tbody>

5. Double check your work—did you add all the necessary closing tags? Then close source mode. In the editor, there will be a table that looks like this: