App.OpterDriver.Design

Note:

To only set up the information that is displayed in Opter Driver for iOS and Opter Driver Labs for Android, we recommend using the Design field for mobile window, as it is easier than editing the App.OpterDriver.Design XML file. For more information, see Configuring which fields are displayed in Opter Driver for iOS.

To have a custom layout in Opter Driver for iOS and Opter Driver Labs for Android, this can be created in either App.OpterDriver.Design or App.Design, but to be able to use all the features that are available, App.OpterDriver.Design needs to be used rather than App.Design.For more information on how to customise Opter Driver, see Customising the layout and features of Opter Driver.

To use different designs for certain customers, certain services and/or certain price vehicle types, use App.OpterDriver.Design. For more information, seeUsing different designs depending on the customer, service and/or price vehicle type below.

Conditions

The App.ForceOldDesign mobile data setting must be set to “false” (default) in order to follow the content of App.OpterDriver.Design.

Changing the layout in Opter Driver for iOS and Opter Driver Labs for Android

Tip

App.OpterDriver.Design opens in the Layout - apps window. All other windows in Opter are locked when that window is open, but you can switch between different windows that are already open. If you need to see information in other windows, you can open them before opening Layout - apps.

Open App.OpterDriver.Design by clicking on Settings > Mobile data > Settings mobile data, and then on Edit next to App.OpterDriver.Design.
Below are links to complete examples of what App.OpterDriver.Design looks like when the system is installed. We recommend starting from there and then making your changes.
Tags that can be used are described in Design field for mobile (window) and Text tags in App.OpterDriver.Design.
When the changes have been made, we recommend clicking on Check XML to check that the XML syntax is correct. If the syntax is correct, nothing happens. If the syntax is incorrect, the error is described in red text at the top of the window.
Close the editor by clicking on in the top-right corner. Click on Save in the Mobile data settings window. This will save the changes made in App.OpterDriver.Design.
The changes are displayed in the app once the driver has logged out and then logged back in.

The sections of App.OpterDriver.Design

The table below lists the different sections available in App.OpterDriver.Design and where the content of each section is displayed in the app. For example, the content between the <expanded> </expanded> pair of tags is displayed in the detail view in Opter Driver. To see what the detail view and similar pages look like in the app, see Design field for mobile (window).

Section in App.OpterDriver.Design	Where it is displayed in Opter Driver
<expanded> </expanded>	In the detail view.
<summary> </summary>	The shipment list.
<pod> </pod>	On the proof of delivery signature page.
<scanrows> </scanrows>	On the scan page (scan list).
<scandetailrows> </scandetailrows>	On the Scanning details page.
<expandedconsignment> </expandedconsignment>	In the detail view. This section contains information about consignments.
<summaryconsignment> </summaryconsignment>	On the shipment page. This section contains information about consignments.

Changing the sections

The image shows the Delivery (1), Customer (2), Order info (3) sections in the detail view of the app.

Use the <box> </box> pair of tags to add a section. Lines 1 to 20 in the code example below correspond to the section Customer (2) in the picture.

The name (1) (2) (3) of a section can also be changed by entering the desired name after headername, see line 1 of the code example below.

The content of a section can be changed by deleting or adding rows using the <row> </row> pair of tags. One or more information fields can be added between <row> and </row> using the item tag and the itemname parameter. See lines 2–7 in the code example below. After itemname, plain text or variables that retrieve information from the system can be used. The names of variables that can be used in App.OpterDriver.Design are described in Design field for mobile (window). For example, the variable CUSTOMER shows the name of the customer.

Use horizontalalignment to adjust the horizontal position of the field with START (far left of the row/section), CENTER (centre of row/section), or END (for right of the row/section). See lines 6 and 18 in the code example below.

Use verticalalignment to adjust the vertical position of the field with START (top of the row area), CENTER (centre of the row area), or END (bottom of the row area).

Use condition if there are conditions with regard to displaying the field. For example, on line 9 of the code example below, the customer reference (i.e. CUSTOMERREFERENCE) is only displayed on shipments/orders where the customer reference exists.

Examples, box, headername, item and itemname

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
      <box headername="$Design_Customer" bgcolor="OpterGray0">
        <row>
          <item itemname="CUSTOMER" font="LARGEBOLD" />
          <item itemname="' - '" condition="CUSTOMERNUMBER != "/>
          <item itemname="CUSTOMERNUMBER" />
          <item itemname="CUSTOMERLOGOTYPE" horizontalalignment="END" height="20" />
        </row>
        <row>
          <item itemname="CUSTOMERREFERENCE,'  '" condition="CUSTOMERREFERENCE != " />
          <item itemname="CUSTOMERREFERENCEMOBILEPHONE,'   '" condition="CUSTOMERREFERENCEMOBILEPHONE != " />
          <item itemname="CUSTOMERREFERENCEPHONE" />
        </row>

        <seperator height="1" condition="CUSTOMER != | CUSTOMERNUMBER != | CUSTOMERREFERENCE != | CUSTOMERREFERENCEMOBILEPHONE != | CUSTOMERREFERENCEPHONE != " />

        <row>
          <item itemname="CUSTOMERPROJECT" />
          <item itemname="CUSTOMERCODE" horizontalalignment="END" />
        </row>
      </box>

Changing the name and width of columns and fields

The name of a field or column can be changed by changing itemname. For example, to ensure that the column displaying ExtraID2 (package) in the Packages section is called “LoW-avfallskod” (waste code) instead of “Ex. ID 2”, change the code within the <box headername="$Design_Packages" ... </box> pair of tags (i.e. in the Packages section) from the following:

Standardnamn, itemname

<item itemname="'$Design_PackageExtraId2_Short'" condition="PACKAGECOUNT > 0" width="65" font="SMALL" color="OpterGray2.5" savewidth="true" />

To the following:

Eget namn, itemname

<item itemname="'LoW-avfallskod'" condition="PACKAGECOUNT > 0" width="65" font="SMALL" color="OpterGray2.5" savewidth="true" />

To change the width of the column, change the number after width. For example, to get a wider column, change from width="65" to width="75".

Changing the font style and size

The image shows examples of different font styles and sizes in the Delivery section of the app’s detail view.

Use font to select the font style and size. In order to obtain the right size for the app, we recommend using the predefined font styles and sizes LARGEBOLD (1), BOLD (3), SMALL (2), SMALLER (4), SMALLEST, SMALLBOLD and NORMALLARGEBOLD.

The text (1) in the image above is defined on line 3 of the code example below, i.e. font=“LARGEBOLD”. The text (2) in the image defined on line 27, (3) in the image is defined on line 33 and (4) is defined on line 34 in the code example below.

Example: fonts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<box headername="$Design_Delivery" bgcolor="OpterMint">
        <row>
          <item itemname="ADDRESSTO" bgcolor="OpterGray-3"  font="LARGEBOLD" />
        </row>

        <row>
          <item itemname="ADDRESS2TO" font="SMALL" />
        </row>

        <row>
          <item itemname="ADDRESS3TO" font="SMALL" />
        </row>

        <row multiLine="True">
          <item itemname="STREETTO,' ',STREETNOTO" />
          <item itemname="'$Design_Comma',' ',ZIPCODETO,' ',CITYTO" font="SMALL" />
          <item itemname="ZONETO" horizontalalignment="END" />
        </row>

        <row>
          <item itemname="COMPANYTO"/>
        </row>

        <seperator condition="ADDRESSTO != | ADDRESS2TO != | ADDRESS3TO != | STREETTO != | ZIPCODETO != | ZONETO != | COMPANYTO != "/>

        <row>
          <item itemname="'$Design_Earliest'" font="SMALL" color="OpterGray2.5" condition="EARLIESTDELIVERYTIME != | EARLIESTDELIVERYDATE != " />
          <item itemname="'$Design_Estimated'" font="SMALL" color="OpterGray2.5" horizontalalignment="CENTER" condition="ESTIMATEDDELIVERYTIME != " />
          <item itemname="'$Design_Latest'" font="SMALL" color="OpterGray2.5" horizontalalignment="END" condition="LATESTDELIVERYTIME != | LATESTDELIVERYDATE != " />
        </row>

        <row>
          <item itemname="EARLIESTDELIVERYTIME,'  '" font="BOLD" condition="EARLIESTDELIVERYTIME != " />
          <item itemname="EARLIESTDELIVERYDATE" font="SMALLER" verticalalignment="CENTER" />

          <item itemname="ESTIMATEDDELIVERYTIME" horizontalalignment="CENTER" />

          <item itemname="LATESTDELIVERYDATE" font="SMALLER" horizontalalignment="END" />
          <item itemname="'  ',LATESTDELIVERYTIME" font="BOLD" horizontalalignment="END" condition="LATESTDELIVERYTIME != " />
        </row>

        <row>
          <item itemname="DELIVERYDATE" font="SMALLER" horizontalalignment="END" />
          <item itemname="'  ',DELIVERYTIME" font="BOLD" horizontalalignment="END" condition="DELIVERYTIME != " />
        </row>

        <seperator condition="EARLIESTDELIVERYTIME != | EARLIESTDELIVERYDATE != | LATESTDELIVERYTIME != | LATESTDELIVERYDATE != "/>

        <row>
          <item itemname="'$Design_Contact'" font="SMALL" color="OpterGray2.5" condition="PHONETO != | RECEIVERREFERENCE != " />
          <item itemname="'$Design_PortCode'" font="SMALL" color="OpterGray2.5" horizontalalignment="END" condition="ENTRECODETO != " />
        </row>

        <row>
          <item itemname="RECEIVERREFERENCE,'  '" condition="RECEIVERREFERENCE != " />
          <item itemname="PHONETO" />

          <item itemname="ENTRECODETO" horizontalalignment="END" />
        </row>

        <row>
          <item itemname="'$Design_Fax', ' '" color="OpterGray2.5" Font="SMALL" condition="FAXTO != "  />
          <item itemname="FAXTO" />
        </row>

        <seperator condition="PHONETO != | ENTRECODETO != | RECEIVERREFERENCE != "/>

        <row>
          <item itemname="'$Design_Note'" font="BOLD" condition="ADDRESSINFOTO != " />
        </row>
        <row>
          <item itemname="ADDRESSINFOTO" multiLine="True" />
        </row>

        <seperator condition="ADDRESSINFOTO != ,DRIVERMESSAGETO != "/>

        <row>
          <item itemname="'$Design_DriverMessage'" font="BOLD" condition="DRIVERMESSAGETO != " />
        </row>
        <row>
          <item itemname="DRIVERMESSAGETO" multiLine="True" />
        </row>
      </box>

Changing the colours

The colour of the shadow (1) can be changed by setting bgcolor to the desired colour, for example “#FF3344” or one of the predefined colours “OpterBlue”, “OpterYellow”, “OpterMint”, “OpterWhite”, “OpterGray0”, “OpterGreenTransparent”, “OpterYellowDark”, “OpterMintDark” or “OpterOrange”. See line 1 in the code example below, where the colour of the section shadow is set to “OpterMint”.

The colour of the text (2) and (3) can be changed by setting color to the desired colour, for example #F5F5F5 or one of the predefined colours “OpterGray2.5” or “OpterGray1.5”. See lines 27 and 29 in the code example.

Examples: bgcolor and color

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<box headername="$Design_Delivery" bgcolor="OpterMint">
        <row>
          <item itemname="ADDRESSTO" bgcolor="OpterGray-3"  font="LARGEBOLD" />
        </row>

        <row>
          <item itemname="ADDRESS2TO" font="SMALL" />
        </row>

        <row>
          <item itemname="ADDRESS3TO" font="SMALL" />
        </row>

        <row multiLine="True">
          <item itemname="STREETTO,' ',STREETNOTO" />
          <item itemname="'$Design_Comma',' ',ZIPCODETO,' ',CITYTO" font="SMALL" />
          <item itemname="ZONETO" horizontalalignment="END" />
        </row>

        <row>
          <item itemname="COMPANYTO"/>
        </row>

        <seperator condition="ADDRESSTO != | ADDRESS2TO != | ADDRESS3TO != | STREETTO != | ZIPCODETO != | ZONETO != | COMPANYTO != "/>

        <row>
          <item itemname="'$Design_Earliest'" font="SMALL" color="OpterGray2.5" condition="EARLIESTDELIVERYTIME != | EARLIESTDELIVERYDATE != " />
          <item itemname="'$Design_Estimated'" font="SMALL" color="OpterGray2.5" horizontalalignment="CENTER" condition="ESTIMATEDDELIVERYTIME != " />
          <item itemname="'$Design_Latest'" font="SMALL" color="OpterGray2.5" horizontalalignment="END" condition="LATESTDELIVERYTIME != | LATESTDELIVERYDATE != " />
        </row>

        <row>
          <item itemname="EARLIESTDELIVERYTIME,'  '" font="BOLD" condition="EARLIESTDELIVERYTIME != " />
          <item itemname="EARLIESTDELIVERYDATE" font="SMALLER" verticalalignment="CENTER" />

          <item itemname="ESTIMATEDDELIVERYTIME" horizontalalignment="CENTER" />

          <item itemname="LATESTDELIVERYDATE" font="SMALLER" horizontalalignment="END" />
          <item itemname="'  ',LATESTDELIVERYTIME" font="BOLD" horizontalalignment="END" condition="LATESTDELIVERYTIME != " />
        </row>

        <row>
          <item itemname="DELIVERYDATE" font="SMALLER" horizontalalignment="END" />
          <item itemname="'  ',DELIVERYTIME" font="BOLD" horizontalalignment="END" condition="DELIVERYTIME != " />
        </row>

        <seperator condition="EARLIESTDELIVERYTIME != | EARLIESTDELIVERYDATE != | LATESTDELIVERYTIME != | LATESTDELIVERYDATE != "/>

        <row>
          <item itemname="'$Design_Contact'" font="SMALL" color="OpterGray2.5" condition="PHONETO != | RECEIVERREFERENCE != " />
          <item itemname="'$Design_PortCode'" font="SMALL" color="OpterGray2.5" horizontalalignment="END" condition="ENTRECODETO != " />
        </row>

        <row>
          <item itemname="RECEIVERREFERENCE,'  '" condition="RECEIVERREFERENCE != " />
          <item itemname="PHONETO" />

          <item itemname="ENTRECODETO" horizontalalignment="END" />
        </row>

        <row>
          <item itemname="'$Design_Fax', ' '" color="OpterGray2.5" Font="SMALL" condition="FAXTO != "  />
          <item itemname="FAXTO" />
        </row>

        <seperator condition="PHONETO != | ENTRECODETO != | RECEIVERREFERENCE != "/>

        <row>
          <item itemname="'$Design_Note'" font="BOLD" condition="ADDRESSINFOTO != " />
        </row>
        <row>
          <item itemname="ADDRESSINFOTO" multiLine="True" />
        </row>

        <seperator condition="ADDRESSINFOTO != ,DRIVERMESSAGETO != "/>

        <row>
          <item itemname="'$Design_DriverMessage'" font="BOLD" condition="DRIVERMESSAGETO != " />
        </row>
        <row>
          <item itemname="DRIVERMESSAGETO" multiLine="True" />
        </row>
      </box>

Changing lines

Use the <seperator/> tag or the <seperator> </seperator> pair of tags to add a horizontal line. A line can be useful for splitting the information into different parts to make it clearer in the app. Use height to specify how thick the line should be. Use condition if there are conditions for allowing the line to be displayed.

In the image above and the code example below, the line (1) will be displayed with a 5 pixel thickness and the line will only be displayed if the customer has any Cus.Proj./Proj.No (2) and/or any Customer code (3).

Example, separator

<seperator height="5" condition="CUSTOMERPROJECT != | CUSTOMERCODE != " />

Comments

Comments can be added in the XML file. Any text between  is only displayed in App.OpterDriver.Design and does not affect the layout in the app.

The comment  is for information only.

1
2
3
4
5
      <!-- Current status and the time when the current status was set -->
        <row>
          <item itemname="CURRENTSTATUS" horizontalalignment="START" font="LARGEBOLD" />
          <item itemname="'  ',CURRENTSTATUSTIME" horizontalalignment="START" />
        </row>

Tip

For example, to test different layouts, sections can be marked as comments by putting the section between .

Different designs depending on the customer, service and/or price vehicle type

Different designs can be used for orders with specific customers, services and/or price vehicle types. This is done by creating an alternative design in the same App.OpterDriver.Design and then defining conditions for that design. The design is selected at the order level, rather than at, for example, the shipment level or driver level. It is therefore the customer code, service and/or price vehicle type for the order that determines how the shipments are displayed in Opter Driver.

The entire default design does not have to be copied to make the adjustments. Simply copy the section you want to redesign. For example, if you want to show the weight directly in the shipment list for orders from a specific customer, it is sufficient to add the summary section to the customer-specific design.

Proceed as follows

Start by adding a new design section. You can click on on the far left to minimise the various sections. In the image below, we have started to add a design for the customer code "IKEA", which is visible at the bottom.

Copy the section you want to modify from the default design, in our case the shipment list (summary), and make the changes. In the example below, we have added a line showing the weight of the order in the shipment list, see lines 24–26 in the example. Other sections are taken from the standard design "OpterDriver2Master".

The $Design_PackageWeight_Short tag retrieves the Weight text.
The “IKEA” customer code condition has been added to line 1.

Alternative design based on customer code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
  <design designname="Design for IKEA orders" customerCodes="IKEA">
    <summary>
      <box>
        <item itemname="ADDRESSFROM" newrow="false" font="NORMALLARGEBOLD" />
        <item itemname="CURRENTSTATUS" newrow="false" font="SMALL" color="OpterGreenTransparent" bgcolor="OpterGray-3" horizontalalignment="END" verticalalignment="START" />

        <row>
          <item itemname="STREETFROM,' ',STREETNOFROM" />
          <item itemname="EARLIESTPICKUPTIME,'-',LATESTPICKUPTIME" font="SMALLER" color="OpterGray2.5" horizontalalignment="END" />
        </row>

        <seperator height="1" />

        <row>
          <item itemname="ADDRESSTO" font="NORMALLARGEBOLD" />
          <item itemname="EARLIESTDELIVERYTIME,'-',LATESTDELIVERYTIME" font="SMALLER" color="OpterGray2.5" horizontalalignment="END" />
        </row>

        <row>
          <item itemname="STREETTO,' ',STREETNOTO" />
          <item itemname="CUSTOMERLOGOTYPE" horizontalalignment="END" height="20" color="OpterGray2.5" />
          <item itemname="'  #',ORDERID" font="SMALL" color="OpterGray1.5" horizontalalignment="END" verticalalignment="END" />
        </row>
        <row>
          <item itemname="'$Design_PackageWeight_Short',': ',WEIGHT" />
        </row>
      </box>
    </summary>
  </design>

Close Layout - apps and click on Save in the Mobile data settings window. The changes are not visible in the app until the driver has logged out and in again.

Several conditions

If you set conditions for both the customer code and the service code on a particular design, that design is only used for orders for which both the conditions are fulfilled.

The design applies to orders from IKEA with the "Hours" service

1
<design designname="Design for IKEA orders" customerCodes="IKEA" serviceTypeCodes="TI">

If the design is to be used for several customers, the customer codes are comma-delimited.

The design applies to orders from IKEA, Opter and Kastrup

1
<design designname="Design for IKEA orders" customerCodes="IKEA,OPTER,KASTRUP">

Several designs

You can of course add more designs with different combinations of conditions.

Several different designs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<designs>
    <!-- Default design -->
    <design designname="OpterDriver2Master">
        ...
    </design>
    <!-- Design for IKEA orders with hourly rate -->
    <design designname="IKEA with TI" customerCodes="IKEA" serviceTypeCodes="TI">
        ...
    </design>
    <!-- Design for IKEA (with other services than TI), Opter and Kastrup -->
    <design designname="IKEA, Opter, Kastrup" customerCodes="IKEA,OPTER,KASTRUP">
        ...
    </design>
    <!-- Design for orders with price vehicle type TL -->
    <design designname="Heavy truck" vehicleTypeCodes="TL">
        ...
    </design>
</designs>

Complete examples

Reference Materials

Configuring which fields are displayed in Opter Driver for iOS

Customising the layout and features of Opter Driver

Design field for mobile (window)

Mobile data settings (window)