MaxOptra system provides the variety of printing forms, each of them is intended for a specific purpose and has its specific template of data display. We suggest two templates for each form. However, MaxOptra system provides the functionality of editing such forms. Printing form editor is available for system administrators, it should be enabled in Execution section of the Settings tab (to enable printing form editor, please contact the MaxOptra Support Team). As soon as the template editor becomes available for work, on the document editing page, select the template you need and create the template copy Create from example or Clone as). For details, see Proof of Delivery Template and Driver Manifest Template. Open the created template and select the Edit mode:
The templates of printing forms are presented with the use of HTML layout. To set necessary template, you can contact your sales manager to discuss the possibility to customize necessary form by efforts of the MaxOptra Support Team. The principle of form editing is valid both for Driver manifest and Proof of Delivery.
On the right pane of the screen, there is the list of available parameters (tags) to add to the template structure. Click the tag to add the parameter. The parameter spelling corresponds to the name of the parameter in the database and is used to facilitate the input of values and the avoiding the input errors.
The Dynamic attributes are the parameters unique for certain accounts. When created they will be added to the list of available parameters that should be added to template.
The detailed description of possible styles and functions is available by reference:
https://www.w3schools.com/colors/colors_names.asp-THE TABLE OF HTML COLORS
https://developer.mozilla.org/en-US/docs/Web/HTML/Element- the examples of application of blocks of styles in CSS
Structure
Table heading: <h1>_value_</h1>
To replace the value, it is necessary to replace the routing Report value with the required name. Here, the name of attribute existing in the system will be attached. It is being localized automatically. If the name is typed manually it will be displayed as indicated.
Example:translate('Visit points') = Visit points
The description of a table with the run start and end points
The table**<table class="main-info">**includes the run parameters._<tr>_- the description of table row_<td>_- the description of row cell_<td>{{translate('date')}}</td> -_it is necessary to insert _Date_ parameter to the cell. To select other parameter, it is necessary to write the required name instead of 'date'. If a parameter exists in the system, a tooltip will appear. _<td>{{format(startTime, 'DD/MM/YYYY')}}</td> -_indicate the format the date should be represented in. If you need to insert the parameter other than the date, the row should be deleted. _<td class="divider"></td> -_delimiter, it is represented as an empty cell in the table. _<td>{{translate('onTimeReportLoading')}}</td>_ _<td>{{format(loadingStartTime, 'HH:mm')}} - {{format(loadingEndTime, 'HH:mm')}}</td>_The table**<table class="orders-info">**includes the order list._<tr>_- the description of table row_<td>_-the description of row cell_<th> -_headerIn the first part of table description, the headings and the columns names are described. _<th>#</th> - _here, it is described what should be contained in the heading. In this case, it is the # symbol.<th style="width: 10%">{{translate('**name**')}}</th> - **value that will be displayed in the heading**<th style="width: 15%">{{translate('**clientName**')}}</th>- **value that will be displayed in the heading**<th style="width: 30%">{{translate('**address**')}}</th>- **value that will be displayed in the heading**<th style="width: 15%">{{translate('**postcode**')}}</th>- **value that will be displayed in the heading****...**The part enclosed in the </td> -</td> tags describes the parameters, the values of which should be displayed in the cell.<td>**{{clientName}}**</td> -**value that will be displayed in the cell**
<td>**{{address}}**</td> -**value that will be displayed in the cell **
<td>**{{postcode}}**</td> -**value that will be displayed in the cell**
<td>**{{this.capacity}}**</td> -**value that should be displayed in the cell**
The Description of Tables' Style
The section starts with the <style/> tag Let us consider the description of the existing tables. It is easier to create them on the model of the existing tables.
Let us specify the table clas table.main-info
{Method of displaying the table's border
border-collapse: collapse; width: 100%; margin-bottom: 10px; }
table.main-info td { border: 1px solid #222B35; -The frame around the table padding: 2px 5px; -Margins around the text white-space: nowrap; -this parameter specifies how to display the spaces between words.Spaces are not considered, word wraps are ignored in the HTML code, the whole text is displayed by one string; at the same time, the <br /> tag addition carries over text to a new line. text-align: left; -text alignment }
table.main-info td:nth-child(1), - Pseudo class:nth-childis used to add a style to the elements basing on the enumeration in the tree of elements. table.main-info td:nth-child(4) { width: 8%; font-weight: bold; - specifies font weight. The value is set from 100 to 900 with the intervals equal to 100.
table.main-info td.divider { border: none; width: 5%; }
Adding a Column with a Parameter
To add a column to the table, follow the procedure:
Find the description of a table you need to add a column to.
In the heading description, add the row with the description of a column heading.!A column will be added according to its place in the list!
In the parameter description, add the row with parameter description.!It should correspond to the collation order of column name!
Example:
Let us add the Phone number column to the order list table. We will add the column between the Client and Address columns.
In the section of headings description, we will add the name of a parameter for the required column:
<tr>
<th>#</th>
<th style="width: 10%">{{translate('name')}}</th>
<th style="width: 15%">{{translate('clientName')}}</th>**<th>{{translate('clientPhone')}}</th>**<th style="width: 30%">{{translate('address')}}</th>
<th style="width: 15%">{{translate('postcode')}}</th>
<th>{{translate('weight')}}</th>
<th style="width: 5%">{{translate('distance')}}</th>
<th>{{translate('stopTimes')}}</th>
<th>{{translate('jobType')}}</th> </tr>
width: 30% -percentage of a column width of the overall table width
In the section of parameter values description, we add the name of a parameter:
</td>
<td>{{clientName}}</td>
**<td>{{clientPhone}}</td>**
<td>{{address}}</td>
<td>{{postcode}}</td>
<td>{{this.capacity}}</td>
<td>{{#if distance}}{{Math.round(distance * 10) / 10}}{{/if}}</td>
<td><span class="nowrap">{{format(startTime, 'HH:mm')}} - {{format(endTime, 'HH:mm')}}</span></td>
<td class="camelcase">
<span class="nowrap">
{{#if jobType == "BEGIN"}}
{{translate('startAddress')}}
{{elseif jobType == "END"}}
{{translate('endAddress')}}
{{elseif jobType == "BREAK"}}
{{translate('break')}} ({{format(endTime - startTime, 'HH:mm', true)}})
{{else}}
{{translate(jobType)}}
{{/if}}
</span>
</td>
Look at the result:
Adding a New Table
To add a new table, it is necessary to create a table class.
Describe table headings, i.e. specify the parameters that will be contained in the column.
Describe the parameter values for the columns.
Example: Let us create a vehicle description table
<table class="vehicle">
Describe table headings
<thead> <tr>
Names listed below will be inserted from the base
<th style="width: 10%">{{translate(**'resourceNumber'**)}}</th>
<th style="width: 15%">{{translate('**driverName'**)}}</th>
<th>{{translate('**capacity'**)}}</th>
It is possible to create non-filled columns as well. In the example, we added column headings not from the base.
<th>{{translate('Temp at run start')}}</th>
<th>{{translate('Temp at run end')}}</th>
</tr> </thead>
Specify the parameters, the values of which will be displayed in the table
<tr>
Headings that are inserted from the base
<td>**{{resourceNumber}}**</td>
<td>**{{driverName}}**</td>
<td>**{{capacity}}**</td>
Columns that should not be filled in by the system are created with a blank value
<td></td> <td></td> </tr> <tfoot> </tfoot> </table>
Look at the result:
Specifying Table Style
In the order list table, white and gray rows alternate. Consider a specific example how to change the color and remove color highlighting.
Changing the Background Colour of Rows
Find the description of a table with the orders-info class. In the rows with the preudo class description, change the value **background ** in the HTML colors table https://www.w3schools.com/colors/colors_names.asp, select the color value HEX - for example,#C71585
table.orders-info tr:nth-child(odd) td{ background:#C71585;
Look at the result:
Changing heading background
Find the table heading description, the th tag should be.
table.orders-inf th{ background:#F0E68C; -specify background color color:#4B0082; -heading font color
Table border/frames
After creating a table it is necessary to specify its borders or, in other words, to add the table grid.
Describe the table class
table.vehicle {_table size and stroke style_
width: 100%;
margin: 10px 0;
border-collapse: collapse;
border: 1px solid #000000;}
table.vehicle th { _heading background_
background: #F0E68C;
color: #4B0082; -_heading font color_}
table.vehicleth,
table.vehicletd {
padding: 2px 5px;_Margins around the text_}
below, the table borders are described
table.vehicle tr {
border-top: 1px solid #222B35; } table.vehicle td {
border-right: 1px solid #222B35; }table.vehicle tfoot {
border-top: 1px solid #222B35; }
Look at the result:
Adding a Company Logo
If you want to add a company logo to the POD template, first you need to make some preparation steps.
Compress the image file size (approx. 50k). To do it, you can use any image compression service you find suitable, for example:https://www.imgonline.com.ua/eng/compress-image-size.php
Next, convert the image to code64. Use the image converter you find suitable, for example:https://www.browserling.com/tools/image-to-base64
Now paste the code inside the "Main Info" part of the POD editor and then paste the code64 in the location specified:
“”<th style="width: 218px; text-align: justify;"> </th><img src="data:image/jpeg;base64,***PASTE-HERE***" width="804" height="244" />
Here is an example of the full POD template description with company logo included:
Look at the result:
Working with Helpers
Helpers are special attributes that help to aggregate different functions in POD or Manifest templates to show additional parameters. The Helper block is located at the bottom of the parameters section on the template edit screen.
The list of helpers is the same for both POD and Manifest templates. It includes the following parameters:
sum - shows the specific quantity of any listed elements (items, runs etc.). For instance, the planned/actual quantity of order items.
avg - shows the average quantity of any listed elements (items, runs etc.).
count - shows the total quantity of any listed elements (items, runs etc.)
range - use this helper, if you need some data to be repeated several times (text, numbers etc.). It accepts up to three parameters: from, to, step.
format - customises the date and time format. For instance, if you want to set the time in hours and minutes'HH:mm'or in hours, minutes and seconds'HH:mm:ss'.
translate - shows the specified parameter in its proper localisation.
For detailed description of each helper's usage, see the Examples below.
Example 1. sum
For example, we want the quantity of planned and actual order items to be displayed on our POD. To do it:
Go to the Edit form and find the section, where you want the helpers to be inserted (for instance, Order info section)
Insert a blank line in the required place.
Select the sum helper. Inside the parentheses, indicate the data array (order items) and the required field name ('quantity'). The field name is selected from the list of parameters in the right pane. Also add 'true' after field name. This is required to avoid system errors in case the stated data array does not possess the parameter (or parameters) you selected for it.
Then select the sum helper again and indicate the same data array (order items), but another field name ('actualQuantity'). The field name is selected from the list of parameters in the right pane. Also add 'true' after field name.
Optional Separate the two helpers with a slash for proper reading.
Optional You can also insert the translate helper to set the title of the data (Planned items/Actual items).
Then click Preview to see the result. The planned vs actual quantity of items is displayed in its selected place separated with slash.
Example 2. avg
For example, we want to show the average quantity of items in all orders of the run. To do it:
Go to the Edit form and find the section, where you want the helpers to be inserted (for instance, Order info section)
Insert a blank line in the required place.
Select the avg helper. Inside the parentheses, indicate the data array (order items) and the required field name ('quantity'). The field name is selected from the list of parameters in the right pane. Also add 'true' after field name. This is required to avoid system errors in case the stated data array does not possess the parameter (or parameters) you selected for it.
Optional You can also insert the translate helper to set the title of the data (Average items).
Then click Preview to see the result. The average quantity of items is displayed in its selected place
Example 3. count
This helper shows the total quantity of any listed elements. For example, the number of order items, number of runs, etc.
To set the count of elements, find the place in the template and insert the count helper. Then fill in the array (orderItems).
You can also insert the translate helper to set the title of the data (Count of items).
Preview the result:
Preview the result:
Example 4.range
If you need some data to be repeated several times on the template (some text or numbers), use the range helper.
Range used for text
For example, we want the phrase "Proof of delivery" to be repeated all along the top of the template. To do it:
Go to the Edit form and find the section, where you want the helpers to be inserted. In our case it is just before the Main info block.
Insert a blank line in the required place.
Write the following syntax (see below), where Proof of delivery is the phrase to be displayed, range (10) is the number of its iterations.
Preview the results:
Range used for numbers
The range helper accepts up to three parameters: from, to, step. It may be useful if we want to display ranges of numbers or only certain numbers.
For instance, we want to show the numbers of order items from first to last. To do it:
Go to the Edit form and find the section, where you want the helpers to be inserted.
Insert a blank line in the required place.
Select the range helper and fill out the from, to, step parametersas 0, 5, 1 respectively (see below). This syntax means that we want the order items from 0 to 5 to be displayed with step 1, i.e., each item.
Preview the results:
If we change the step to 2, only every second item will be displayed.
Example 5.format
Using this helper you can customise the date and time formats.
For instance, we want to set the Actual arrival date as 'DD.MM.YYYY' and time as 'HH:mm'. Write the following syntax and preview the result (see below):
Or, for example, we want to set the Actual arrival date as 'MM.DD.YYYY' and time as 'HH:mm:ss'. The result will be as follows:
Or, for example, we want to set the Actual arrival date as 'MM.DD.YYYY' and time as 'HH:mm:ss'. The result will be as follows:
