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 available in Opter Driver for iOS and Opter Driver Labs for Android, 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, see Using 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 Layout - apps 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 in Opter’s internal editor, click on Settings > Mobile data > Settings mobile data, and then on Edit next to App.OpterDriver.Design.
Tip
Below is a complete example of what App.OpterDriver.Design might look like. We recommend starting with the complete example for the Opter version and then make the desired changes.
The tags that can be used in App.OpterDriver.Design are described below.
The names of variables that can be used in App.OpterDriver.Design are described in Design field for mobile (window). For example, the STREETFROM variable shows the street name of the pickup address in the app.
When the desired changes to App.OpterDriver.Design have been made, we recommend that pressing the Check XML button in the Layout - apps window 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.
When the desired changes have been made in App.OpterDriver.Design, close the editor by clicking on the cross in the top right-hand 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 after the user has logged out and then logged back in. If the user has selected Automatic login in Settings in the app, the changes will appear in the app after the user has closed the app and then started it again.

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>	On the shipment page.
<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. Note: Consignments are supported in Opter Driver for iOS version 2.3.3 or later, all versions of Opter Driver Labs for Android, and Opter 2023.04.00 or later.
<summaryconsignment> </summaryconsignment>	On the shipment page. This section contains information about consignments. Note: Consignments are supported in Opter Driver for iOS version 2.3.3 or later, all versions of Opter Driver Labs for Android, and Opter 2023.04.00 or later.

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.

Copy code

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:

Copy code

Standardnamn, itemname

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

To the following:

Copy code

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 if a wider column is required, change from width="65" to width="75".

Code example item name for Opter 2022.12.00 to 2023.06.00 inclusive

Copy code

Standardnamn, itemname

<item itemname="'$Design_PackageExtraId2_Short'" condition="PACKAGES > 0,EnabledProperties IN PACKAGE_EXTRAID2" width="65" font="SMALL" color="OpterGray2.5" savewidth="true" />

To the following:

Copy code

Eget namn, itemname

<item itemname="'LoW-avfallskod'" condition="PACKAGES > 0,EnabledProperties IN PACKAGE_EXTRAID2" width="65" font="SMALL" color="OpterGray2.5" savewidth="true" />

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 already 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.

Copy code

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>

Code example fonts for Opter 2022.12.00 to 2023.06.00 inclusive

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 24, (3) in the image is defined on line 30 and (4) is defined on line 31 in the code example below.

Copy code

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
<box headername="$Design_Delivery" bgcolor="OpterMint">
        <row>
          <item itemname="ADDRESSTO" 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" horizontalalignment="START" verticalalignment="END" font="SMALL" condition="EnabledProperties IN ZIPCODETO | EnabledProperties IN CITYTO" />
          <item itemname="ZONETO" horizontalalignment="END" />
        </row>

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

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

        <row>
          <item itemname="EARLIESTDELIVERYTIME,'  '" font="BOLD" condition="EARLIESTDELIVERYTIME != ,EnabledProperties IN 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 != ,EnabledProperties IN LATESTDELIVERYTIME" />
        </row>

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

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

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

        <row>
          <item itemname="RECEIVERREFERENCE,'  '" condition="RECEIVERREFERENCE != ,EnabledProperties IN RECEIVERREFERENCE" />
          <item itemname="PHONETO" horizontalalignment="START" />

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

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

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

        <item itemname="'$Design_Note'" font="BOLD" condition="(ADDRESSINFOTO != | DRIVERMESSAGETO != ),(EnabledProperties IN ADDRESSINFOTO | EnabledProperties IN DRIVERMESSAGETO)" />
        <item itemname="ADDRESSINFOTO" multiLine="True" />
        <seperator condition="ADDRESSINFOTO != " />
        <item itemname="DRIVERMESSAGETO" multiLine="True" />
      </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.

Copy code

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>

Code examples bgcolor and color for Opter 2022.12.00 to 2023.06.00

Copy code

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
<box headername="$Design_Delivery" bgcolor="OpterMint">
        <row>
          <item itemname="ADDRESSTO" 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" horizontalalignment="START" verticalalignment="END" font="SMALL" condition="EnabledProperties IN ZIPCODETO | EnabledProperties IN CITYTO" />
          <item itemname="ZONETO" horizontalalignment="END" />
        </row>

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

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

        <row>
          <item itemname="EARLIESTDELIVERYTIME,'  '" font="BOLD" condition="EARLIESTDELIVERYTIME != ,EnabledProperties IN 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 != ,EnabledProperties IN LATESTDELIVERYTIME" />
        </row>

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

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

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

        <row>
          <item itemname="RECEIVERREFERENCE,'  '" condition="RECEIVERREFERENCE != ,EnabledProperties IN RECEIVERREFERENCE" />
          <item itemname="PHONETO" horizontalalignment="START" />

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

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

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

        <item itemname="'$Design_Note'" font="BOLD" condition="(ADDRESSINFOTO != | DRIVERMESSAGETO != ),(EnabledProperties IN ADDRESSINFOTO | EnabledProperties IN DRIVERMESSAGETO)" />
        <item itemname="ADDRESSINFOTO" multiLine="True" />
        <seperator condition="ADDRESSINFOTO != " />
        <item itemname="DRIVERMESSAGETO" multiLine="True" />
      </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).

Copy code

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.

Copy code

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 .

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

Note:

This function works in Opter version 2023.12-01.203 and later, Opter Driver for iOS 2.4.4 and later, and all versions of Opter Driver Labs for Android.

It is possible to select to use different designs for certain customers, certain services and/or certain price vehicle types. This is done by using different conditions for different designs in App.OpterDriver.Design. If there are different designs in App.OpterDriver.Design, the design is selected at the order level, (not at, for example, the shipment level or driver level). It is thus the customer, service and/or price vehicle type at the order level that determines which design is displayed on shipments in Opter Driver.

If the conditions for a certain design are customercode_1 and service_1 (service typecode_1), that design is only used for orders for which both conditions match. The conditions are written like this:

customerCodes="customercode_1" serviceTypeCodes="servicetypecode_1”

To have a specific design for multiple customers, specify the customers in the conditions like this:

customerCodes="customercode_1,customercode_2,customercode_5"

If the conditions for customer code, service and price vehicle type are not met for an order, the design with no conditions is selected (see line 11 in the code example below). If no designs have been created without conditions in App.OpterDriver.Design, the default design is selected.

For example, to have a certain design for customercode_1, a design for customercode_2 and a third design for the rest of the customers, it might look like this in App.OpterDriver.Design:

Copy code

Example, select design depending on customer code

1
2
3
4
5
6
7
8
9
10
11
12
13
 <?xml version="1.0" encoding="UTF-8"?>
<designs>
  <design designname="multidesign_customercode_1" customerCodes="customercode_1">
    <!-- Design for customer with customercode_1 -->
  </design>

  <design designname="multidesign_customercode_2" customerCodes="customercode_2">
    <!-- Design for customer with customercode_2 -->
  </design>
  
  <design designname="multidesign_default">
    <!-- Design for the rest of the customers -->
  </design>

For example, to have a certain design for customer code_1, but only in combination with certain services (servicetypecode_1 and servicetypecode_2), another design for customer code_2, but only in combination with certain price vehicle types (vehicletypecode_1 and vehicletypecode_2) and a third design for all other combinations of customers, services and price vehicle types, it could look like this in App.OpterDriver.Design:

Copy code

Example, select design depending on customer code, service type and price vehicle type

1
2
3
4
5
6
7
8
9
10
11
12
13
   <?xml version="1.0" encoding="UTF-8"?>
<designs>
  <design designname="multidesign_customercode_1" customerCodes="customercode_1" serviceTypeCodes="servicetypecode_1,servicetypecode_2">
    <!-- Design for customer with customercode_1 if servicetypecode is servicetypecode_1 or servicetypecode_2 -->
  </design>

  <design designname="multidesign_customercode_2" customerCodes="customercode_2" vehicleTypeCodes="vehicletypecode_1,vehicletypecode_2">
    <!-- Design for customer with customercode_2 if vehicletypecode is vehicletypecode_1 or vehicletypecode_2 -->
  </design>
  
  <design designname="multidesign_default">
    <!-- Design for all other cases -->
  </design>