App.OpterDriver.Design

Note:

If you only want to set what information 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 XML file App.OpterDriver.Design. For more information, see Configuring which fields are displayed in Opter Driver for iOS.

If you want to have your own layout in Opter Driver for iOS and Opter Driver Labs for Android, you can create it either in App.OpterDriver.Design or App.Design, but if you want to be able to use all the features available in Opter Driver for iOS and Opter Driver Labs for Android, you must use App.OpterDriver.Design, not App.Design.For more information on how to customise Opter Driver, see Customising the layout and features of Opter Driver.

If you want to use different designs for certain customers, certain services and/or certain types of award vehicles, you must 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.

Change the layout of 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.

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: Co-loads 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: Co-loads 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 .

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

Note:

This feature 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.

You can choose to use different designs for certain customers, certain services and/or certain price vehicle types. You do this by using different conditions for different designs in App.OpterDriver.Design. If you have different designs in App.OpterDriver.Design, the design is selected at the order level, (not at, for example, the assignment level or driver level). It is therefore the customer, service and/or price vehicle type at order level that determines which design is displayed on the orders in Opter Driver.

If the conditions for a given design are customer code_1 and service_1 (service type code_1), then that design is only used for orders where both conditions match. The terms are written like this:

customerCodes="customercode_1" serviceTypeCodes="servicetypecode_1”

If you want a particular design for multiple customers, you can specify the customers in the terms and 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 you have not created any unconditional designs in your App.OpterDriver.Design, the default design will be selected.

For example, if you want a certain design for customer code_1, a design for customer code_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, if you want 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, then 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>