Template with photos from scanner

Use the camera on device, take photos while picking/receiving etc. and send them in a formatted e-mail

BxLogistics Pro support taking photos in various modules on the device, receiving, picking, stock transfer and delivery. The photos can be used in our template system. The report can be sent as e-mail, printed or as basis for a PDF document attached to an e-mail or to an order in Visma Business.

This document covers the configuration in BxAdmin for sending the image as an e-mail. The feature requires a BxLogistics Pro license.

1. Enable the image button.

Set showimagebutton = true in the Configuration -> Client Profile for the module you want to take photos.
Config sample for pickinglist:


[{"id":5458,"profileid":2,"routine":"pickinglist","name":"showimagebutton","value":true,"comment":null}]

2. Configure e-mail server

The e-mail will need an SMTP server (outgoing e-mail server). The settings for smtp is found under Configuration -> Company Profiles, under area: report.
Search for smtp. Required fields are dependent on the SMTP server. smtpserver is always required. If the SMTP server is local and private, standards are often fine. For public SMTP servers like O365 user/password and usually port and ssl needs to be changed.
Sample settings for O365 SMTP server:

smtpserver	smtp.office365.com
smtpserverblindcopy
smtpserverpassword	YourO365Password
smtpserverportno	587
smtpserverreplyaddress	YouO365Mail@example.com
smtpserveruser	YouO365Mail@example.com
smtpserverusessl	true

3. Enable custom template report in picking module

Since we are configuring picking we look at the area: Pickinglist

Configure where to send the e-mail, set printmailto = "ReceiverMailAddress@example.com"
What template/report to use, we need to use the same name when creating the template. Set printtemplate = "PickingWithPhotos"
Set a e-mail subject, set printmailsubject = "Pictures from Order #orderno#"
#orderno# will be replaced with the actual order number, you may also use e.g:
"Picking done - {orderno} {customername}"
If you like to send the report as a PDF Attachement, set printmailattachment = true

4. Creating a template

Go to Templates, and create a new template. Set name to "PickingWithPhotos" - make sure it's the name you used in 3.2

Templates are based on HTML5, and supports both CSS and Javascript. Templates also support including other sub templates, conditions, sorting etc.
The data used in the template can be directly from the web request from the hand terminal, when completing the picking, or each template can call a query to merge database data with data from the picked order.

Sample template:

<HTML>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Picking template</title>
    <style>
      @page {
        size: A4;
      }

      @media print, screen {
        body {
          font-size: 14pt;
        }

        .body {
          margin-top: 20px;
        }

        table {
          width: 100%;
          border-spacing: 0;
          border-collapse: collapse;
        }

        td {
          vertical-align: top;
        }

        .body {
          margin-left: 30px
        }
        
         .body table thead th {
            border-bottom: solid black 1px;
        }

        .body table th {
            text-align: left;
        }

        .body table td.productno, .body table th.productno {
          width: 15%;
        }
        
      
        .body table td.productname, .body table th.productname{
          width: 45%;
        }

        .body table td.qty, .body table th.qty{
          width: 15%;
          text-align: right;
          padding-right: 20px;
        }
        
      }
    </style>
  </head>
  <BODY class="body">
    <h1>Order number: #Orderno#</h1>
    <h2>Info</h2>
    <ul>
      <li>Customer Nr: #Customerno#</li>
      <li>Customer Name: #Customername#</li>
    </ul>
    <table border="3">
      <thead>
        <tr>
          <th class="productno"> Product no.</th>
          <th class="productname"> Product Name</th>
          <th class="qty"> Quantity</th>
          <th> Unit name</th>
          <th class="qty"> Price</th>          
        </tr>
      </thead>
      <tbody> #lines.PickingWithPhotosLines# </tbody>
    </table>

    {images.ImageTemplate}
  </BODY>
</HTML>

Template uses simple formatting and includes a reference to a subtemplate, called PickingWithPhotosLines. The sub-template will be called one time for each "line" on the order we pick.
We also include another sub template called ImageTemplate (both ## and {} references are valid).
Lets save this template and create the two sub templates:

PickingWithPhotosLines:

<tr>
    <td class="productno"> #productno#</td>
    <td class="productname"> #productname#</td>
    <td class="qty"> #quantity#</td>
    <td> #unitname#</td>
    <td class="qty"> #price#</td>
</tr>

ImageTemplate:

<img src="{image}" style="width:275px; padding-right: 20px;">

5. Test

On the device update settings on the device configured to your profile.
Open Picking, select an order.

Hit the More (3 lines) button.

You should now se a line called "Image", select the line and the camera should activate. You can take one or more photos, then hit back, finish picking the order end send complete the picking.

After completion an e-mail should be send to the address you selected in printmailto. The e-mail will contain a PDF (if you enabled it) looking something like this:

emailpdfreport

6. Make it pretty

You can use standard html to design and the layout. The above sample is simple to easier see the functionality.