Creating template document for deal or client

Sugester enables you to generate default documents (i.e. deals, offers etc) based on client or deal data (or on the client/deals). To generate such a document navigate to the client or deal card (or client/deals list) and in the top drop down menu click “Add your own print template”. Using the examples between the handlebars which are available on the ‘create template’ page you can create your own template. 1. Creating your own document template  The key for creating the proper tag with the handlebars below looks as follows; (in the case of a client)

"client": {
    "id": 49,
    "name": "test client",    
    "first_name": "John",    
    "email": "test@mail.io",  
    "last_name": "Test",    
    "string1": Green,

Using the above handlebars we can create the following: To display the email we add the prefix “client”, followed by a dot, we enter “email”. Everything is put between double brackets and we obtain tag {{client.name}], which will now display the client's email.  To display additional fields for a client we use the tags ‘string1’ (and additional numbers) obtaining i.e. {{client.string10}} (in the case of interest)

"deal": {
    "id": 10000,
    "name": "house building",

This looks analogical hence; we add the prefix “deal” add a dot, type in i.e. “name”. We engulf everything with double brackets and we obtain the tag {{deal.name}}, which will by default display to us the name of the deal.  If we want to generate a document (i.e. report) based on a customer list or deals list (in the ‘type’ field we have selected the option CLIENTS or DEALS)- in order to obtain additional positions on the field we use the example below;   

{{#each clients}}
    <h2>name: {{name}}</h2>
    E-mail: {{email}}
    First name: {{first_namel}}
    Last name: {{last_namel}}
{{/each}}

Please note: a list of all variables which can be used is available below in the ‘create new document template’ window.  2. Ready to use template and a CSS code example of a document template  In the article ‘Document templates’ we have described two examples of document templates - Offers and Deals/Agreements, that can be created in Sugester.  Template Document for an OFFER 1) Content

<div class="print_template">
    <div class="template_outline">
        <table class="clean to_half">
            <tbody>
                <tr>
                    <td>
                        <p><span id="document_type">Offer</span><br>
                        <span id="document_number">{{deal.string4}}</span></p>
                        <p>Date: {{deal.date}}<br></p>
                    </td>
                    <td class="logo_inside">
                        <div id="logo">
                            <div id="logo_place" style="display:inline-block; position:relative;"></div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <hr>
        <table class="clean split_half">
            <thead>
                <tr>
                    <th><span class="seller">Offer created by</span></th>
                    <th><span class="buyer">Offer for</span></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <p>
                            <strong>{{company_name}}</strong><br>                                                         
                             {{company_street}} {{company_street_number}}<br>            
                            {{company_postal_code}} {{company_city}}<br>
                            CIN: {{company_tax_no}}                                         
                        </p>
                    </td>
                    <td id="buyer">
                        <p>                            
                            <strong>{{client.name}}</strong><br/>        
                            {{client.street}}<br/>
                            {{client.post_code}} {{client.city}}<br/>
                            {{client.first_name}} {{client.last_name}}                                                        
                        </p>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <br>
            <p>In response to a query of {{deal.date}} we present our company's offer</p><br>
        </div>
        <table class="main_templ_table" id="pos_table">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>Product/service name</th>
                    <th>Price</th>
                    <th>Quantity</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>{{deal.name}}<span class="item_description" > {{deal.description}}</span></td>
                    <td>{{deal.price}}</td>
                    <td>{{deal.integer1}}</td>
                </tr>
            </tbody>
        </table>
        <div class="clear"></div>
        <div style="page-break-inside:avoid">
            <div class="additional-info">
                <br>
                <br>
                <p><strong>Conditions of delivery:</strong> <span> {{deal.string1}} </span></p><br>
                <p><strong>Conditions of payment:</strong> <span> {{deal.string2}} </span></p><br>
                <p><strong>Conditions of discount:</strong> <span> {{deal.string3}} </span></p><br>
                <p><strong>Offer valid until:</strong> <span> {{deal.date1}} </span></p>
            </div>
            <table class="full_width" style="margin-top:100px">
                <tbody>
                    <tr>
                        <td class="text_center half_width buyer_person" style="width:50%; text-align: center;">
                            {{client.first_name}} {{client.last_name}}
                        </td>
                        <td class="text_center half_width seller_person" style="width:50%; text-align: center;">
                            {{deal.responsible_name}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div><!-- /page break -->
        <br class="clear noprint">
    </div><!-- template_outline -->
</div>

  2) CSS Code

@media all {
    p {
        margin-bottom: 8px;
    }
    body {}
    body.pdf-printing .print_template {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .print_template {
        line-height: 12px;
        background-color: white;
        margin: auto auto 20px;
        min-width: 700px;
        overflow: visible;
        width: auto;
        border: 1px solid #ddd;
        box-shadow: 1px 3px 5px 0 rgba(0, 0, 0, 0.75);
        padding: 20px 20px 0;
        font-family: helvetica, "lucida grande", "lucida sans unicode";
        font-size: 12px;
    }
    .description_long {
        font-size: 8pt;
        font-family: helvetica, "lucida grande", "lucida sans unicode";
    }
    #document_type {
        font-size: 12pt;
        line-height: 1.25em;
        font-weight: bold;
    }
    #document_number {
        font-size: 26pt;
        line-height: 1em;
        font-weight: normal;
    }
    /*@page{size:A4 ;}*/
    .clear {
        clear: both;
    }
    table p {
        margin-bottom: 0.5em;
        line-height: 1.4em;
    }
    .split_three strong {
        display: block;
        margin-bottom: 5px;
    }
    .split_three br {
        display: none
    }
    #custom_stamp {
        background-position: 96% 87% !important
    }
    /*TABELE*/
    table {}
    tr {
        page-break-inside: avoid;
    }
    table {
        page-break-after: auto
    }
    tr {
        page-break-inside: avoid;
        page-break-after: auto
    }
    td {
        page-break-inside: avoid;
        page-break-after: auto
    }
    thead {
        display: table-header-group
    }
    .nobreak {
        page-break-inside: avoid;
    }
    table th, table td {
        margin: 0;
        padding: 0;
    }
    th.width0, td.width0 {
        min-width: 17px;
        width: 1%;
        white-space: nowrap
    }
    th.width1, td.width1 {
        width: 10%;
        min-width: 17px;
    }
    th.width2, td.width2 {
        width: 10%;
        min-width: 45px;
    }
    th.width3, td.width3 {
        min-width: 46px;
        width: 15%;
    }
    th.width4, td.width4 {
        width: 30%;
        min-width: 100px;
    }
    td.logo_inside, td.logo_inside {
        vertical-align: middle;
        text-align: center
    }
    td.logo_inside img {
        max-height: 187px;
        max-width: 250px;
    }
    td:empty {
        visibility: hidden;
    }
    table {
        border-collapse: collapse;
        empty-cells: hide;
    }
    html tr, html td {
        background-color: transparent;
        empty-cells: hide
    }
    table {
        margin: auto;
        clear: both;
        margin-top: 10px;
        border-collapse: collapse;
        empty-cells: hide;
        margin: 5px auto 5px auto;
        width: 100%;
    }
    table tr {
        vertical-align: top;
    }
    table, table th, table td {
        border: 0;
        background-color: transparent;
        text-align: left;
        vertical-align: top;
    }
    table.main_templ_table th, table.main_templ_table td, table.main_templ_table caption {
        text-align: right;
        border-collapse: collapse;
        border: 1px solid #d8d7d7;
    }
    table.main_templ_table th {
        font-weight: bold;
        background-color: #f1f1f1;
        border: 1px solid #bbbbbb;
    }
    table.main_templ_table th p, table td a {
        text-align: left;
    }
    table th {
        font-weight: bold;
    }
    table.to_right {
        float: right;
        width: 100%;
    }
    table.to_right th {
        text-align: right;
    }
    table.to_right td {
        width: 15%;
        text-align: right;
    }
    .split_half td {
        width: 50%;
    }
    .split_three td {
        width: 33%;
    }
    table.to_pay {
        margin: 40px auto 20px auto;
        background: transparent;
    }
    table.to_pay th, table.to_pay td {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    hr {
        margin: 10px auto;
    }
    .to_pay th {
        width: 120px;
    }
    .to_pay td, .to_pay th {
        padding: 10px 5px;
    }
    table th, table td {
        margin: 0;
        padding: 5px;
    }
    #exchange_currency {
        margin-top: 20px;
    }
    #exchange_currency td {
        border-top: 1px solid #ddd;
        padding-top: 10px !important;
    }
    #exchange_currency+table.clean.to_pay {
        margin-top: 0;
    }
    table td.empty {
        border: 0;
    }
    html body table tr:hover {
        background-color: transparent;
    }
    table.main_templ_table th.text_left, table.main_templ_table td.text_left, th.text_left, td.text_left {
        text-align: left;
        padding-left: 10px;
    }
    .number, .nowrap, td b, td.row1, td.row2, td.row3 {
        white-space: nowrap
    }
    th.width3+th.width1.nowrap {
        white-space: normal
    }
    html, body {
        margin: 0;
        padding: 0;
    }
    .nowrap, .no_wrap {
        white-space: nowrap !important;
    }
    .nowrap-lines {
        white-space: pre;
    }
}
@media print {
    body.pdf-printing .print_template, .print_template {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    @page :first {
        margin-top: 0in;
        margin-bottom: 0.5in;
    }
    @page {
        size: portrait;
        margin: 0in;
        padding: 0;
        margin-top: 0.5in;
        margin-bottom: 0.5in
    }
    .print_template {
        margin-top: 0.5in;
        margin-bottom: 0in;
        margin-left: 0.5in;
        margin-right: 0.5in;
    }
    table {
        page-break-inside: auto
    }
    td, tr {
        page-break-inside: avoid;
        page-break-after: auto
    }
    thead {
        display: table-header-group
    }
    tfoot {
        display: table-footer-group
    }
    .pull-right {
        float: right;
    }
}
@media screen {
    .print_template {
        width: 8.25in;
    }
}

Template Document for a DEAL 1) Content  

1<div class="print_template">
    <div class="template_outline">
        <h1>Agreement no .......</h1>
        <div class="paragraph center">
            Agreement for <strong>{{deal.name}}</strong><br>
            concluded on ............... in {{company_city}} between:<br>
            <br>
            <strong>{{company_name}}</strong> based in {{company_city}}, {{company_postal_code}} at the street {{company_street}} {{company_street_number}}, Tax number: {{company_tax_no}}, hereinafter <strong>seller</strong><br>
            and<br>
            <strong>{{client.name}}</strong> based in {{client.city}}, {{client.post_code}} at the street {{client.street}}, Tax number: {{company_tax_no}}, represented by {{client.first_name}} {{client.last_name}}, hereinafter <strong>buyer</strong>.<br>
            <br>
            <br>
        </div>
        <h2>§1 Subject of the agreement</h2>
        <div class="paragraph">
            Paragraph content
        </div><br>
        <h2>§2 Statements</h2>
        <div class="paragraph">
            Paragraph content
        </div><br>
        <h2>§3 Settlement</h2>
        <div class="paragraph">
            Paragraph content
        </div><br>
        <h2>§4 Additional services</h2>
        <div class="paragraph">
            Paragraph content
        </div><br>
        <h2>§5 Additional provisions</h2>
        <div class="paragraph">
            Paragraph content
        </div><br>
        <div class="footer">
            <table class="signs_footer">
                <tr>
                    <td><strong>Buyer</strong><br>
                    {{client.first_name}} {{client.last_name}}</td>
                    <td><strong>Seller</strong><br>
                    {{deal.responsible_name}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

2) CSS Code  

body.pdf-printing .print_template{padding:0!important;margin:0!important;border:0!important;box-shadow:none!important}.print_template{line-height:22px;background-color:#fff;margin:auto auto 20px;min-width:700px;overflow:visible;width:835px;border:1px solid #ddd;box-shadow:1px 3px 5px 0 rgba(0,0,0,0.75);padding:20px 20px 0;font-family:helvetica,"lucida grande","lucida sans unicode";font-size:12px}h1{padding-top:12pt;color:#000;font-weight:700;font-size:16pt;padding-bottom:3pt;font-family:"Arial";line-height:1;page-break-after:avoid;orphans:2;widows:2;text-align:center}h2{padding-top:0;color:#000;font-size:12pt;padding-bottom:3pt;font-family:"Arial";line-height:1;page-break-after:avoid;orphans:2;widows:2;text-align:center}.center{text-align:center}li{color:#000;font-size:12pt}p{margin:0;color:#000;font-size:12pt}.footer{margin-top:80px}table.signs_footer td{width:48%}table.signs_footer{width:100%}table.signs_footer td,table.signs_footer{border:0;text-align:center;padding:20px 0}

Template for a C5 envelope (for an individual client) 1) Content

<div class="template_outline">
    <div id="seller">        
        <strong>{{../company_name}}</strong><br/>
        {{../company_street}} {{company_street_number}}<br />
        {{../company_postal_code}} {{../company_city}}
            
        <br/>tel. {{../company_phone}}
        <br/>{{../company_email}}
    </div>
    <div id="buyer">
        <strong>{{client.name}}</strong><br/>        
        {{client.street}}<br/>
        {{client.post_code}} {{client.city}}<br/>
        <br/>
        <span style="font-size:12px">{{client.first_name}} {{client.last_name}}</span>
    </div>
</div> <!-- template -->

2) CSS Code  

body {
    font-family: arial, helvetica, "lucida grande", "lucida sans unicode";
}
@media all {
    .template_outline {
        font-family: arial, helvetica, "lucida grande", "lucida sans unicode";
        width: 16.2cm;
        height: 21.5cm;
        max-width: 16.2cm;
        max-height: 21.5cm;
        border: 1px dotted black;
        margin: auto;
        margin-top: 0px;
        font-size: 10pt;
        padding: 1cm;
        position: relative;
    }
    #seller {
        display: block;
        font-size: 7.5pt;
        line-height: 1.25em;
        -ms-transform: rotate(-90deg);
        /* IE 9 */
        -webkit-transform: rotate(-90deg);
        /* Chrome, Safari, Opera */
        transform: rotate(-90deg);
        position: absolute;
        left: 0cm;
        top: 13.5cm;
        width: 8cm;
        height: 6cm;
    }
    #buyer {
        display: block;
        font-size: 13pt;
        line-height: 1.5em;
        font-weight: bold;
        -ms-transform: rotate(-90deg);
        /* IE 9 */
        -webkit-transform: rotate(-90deg);
        /* Chrome, Safari, Opera */
        transform: rotate(-90deg);
        position: absolute;
        left: 8cm;
        top: 3cm;
        width: 9cm;
        height: 6cm;
    }
    #logo {
        display: block;
        border: 0px;
        max-width: 5cm;
        max-height: 1cm;
        margin-bottom: 0.2cm;
    }
}
@media print {
    @page {
        size: portrait;
        margin: 0in;
        padding: 0;
        margin-top: 1.4cm;
        margin-bottom: 0.5in
    }
    .template_outline {
        border: 0px !important;
        width: 14cm;
        height: 19cm;
        max-width: 14cm;
        max-height: 19cm;
    }
    #seller {
        left: 0cm;
        top: 12cm;
    }
    #buyer {
        left: 8cm;
        top: 3cm;
    }
}
@media screen {
    .template_outline {
        font-family: helvetica, "lucida grande", "lucida sans unicode";
        height: 22.9cm;
        max-height: 22.9cm;
    }
    #seller {
        left: 0cm;
        top: 14.4cm;
    }
    #buyer {
        left: 8cm;
        top: 4.4cm;
    }
}
body.pdf-printing .template_outline {
    padding: 0!important;
    margin: 0!important;
    border: 0!important;
    box-shadow: none!important
}
body.pdf-printing .document-footer {
    display: none !important
}

Template for a C5 envelope (for a list of clients) 1) Content

<div class="template_outline">
    <div id="seller">
        
        <strong>{{../company_name}}</strong><br/>
        {{../company_street}} {{company_street_number}}<br />
        {{../company_postal_code}} {{../company_city}}
            
        <br/>tel. {{../company_phone}}
        <br/>{{../company_email}}
    </div>
    <div id="buyer">
        <strong>{{name}}</strong><br/>        
        {{street}}<br/>
        {{post_code}} {{city}}<br/>
                <br/>
               <span style="font-size:12px">{{first_name}} {{last_name}}</span>
    </div>
</div> <!-- template -->

2) CSS Code identical as in the example above.