Last updated: 05.06.2024

Valid from: Opter 2023.12.00

App.Design

In App.Design it is possible to define the information that can be displayed on the tabs and detail views in Opter Driver for Android (classic).

App.Design is used for Opter Driver for Android (classic). App.Design is also used for Opter Driver for iOS up until Opter 2022.11.xx.For more information on how to define views in Opter Driver for iOS, see Configuring which fields are displayed in Opter Driver for iOS.

(From Opter 2022.12.00, we recommend using the Design field for mobile or App.OpterDriver.Designwindow for Opter Driver for iOS och Opter Driver Labs for Android. 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 for iOS and Opter Driver Labs for Android, see Customising the layout and features of Opter Driver).

This article describes the basics and structure of App.Design. For more information, see the special articles:

To open App.Design in Opter’s internal editor, click on Settings > Mobile data > Settings mobile data, and then on Edit next to App.Design.

Tip

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.

In a clean installation of Opter, App.Design looks like this.

Factory settings

<?xml version="1.0" encoding="utf-8"?>
<designs>
  <design designname="Standard" default="true">
    <summaryrows>
      <row>
        <item itemname="CURRENTSTATUS" width="60" />
        <item itemname="EARLIESTPICKUPTIME" width="20" />
        <item itemname="LATESTDELIVERYTIME" width="20" />
      </row>
      <row>
        <item itemname="ADDRESSFROM,' / ',STREETFROM,' ',STREETNOFROM,' / ',CITYFROM" width="100" />
      </row>
      <row>
        <item itemname="ADDRESSTO,' / ',STREETTO,' ',STREETNOTO,' / ',CITYTO" width="100" />
      </row>
    </summaryrows>
    <expandedrows>
      <row>
        <item itemname="CURRENTSTATUS" width="50" font="LARGE" />
        <item itemname="CUSTOMER" width="50" font="LARGE" />
      </row>
      <row>
        <item itemname="SERVICETYPE" width="50" font="LARGE" />
        <item itemname="ORDERDATE" width="50" font="LARGE" />
      </row>

      <!-- Sender -->
      <row>
        <item itemname="'Lastas'" width="50" font="LARGEBOLD" />
        <item itemname="EARLIESTPICKUPTIME" width="25" font="LARGEBOLD" />
        <item itemname="'-'" width="5" font="LARGEBOLD" />
        <item itemname="LATESTPICKUPTIME" width="25" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="ADDRESSFROM" multiline="false" width="100" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="STREETFROM,' ',STREETNOFROM" width="100" font="LARGE" />
      </row>
      <row>
        <item itemname="ADDRESS2FROM" width="100" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="ADDRESS3FROM" width="100" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="ZIPCODEFROM,' ',CITYFROM" width="100" font="LARGE" />
      </row>
      <row>
        <item itemname="PHONEFROM" width="100" font="LARGE" />
        <item itemname="'PK: ',ENTRECODEFROM" condition="ENTRECODEFROM" width="100" font="LARGE" />
      </row>
      <row>
        <item itemname="SENDERREFERENCE" width="100" font="LARGE" />
      </row>


      <!-- Mottaker oppdrag -->
      <row>
        <item itemname="'Lossas'" width="50" font="LARGEBOLD" />
        <item itemname="EARLIESTDELIVERYTIME" width="25" font="LARGEBOLD" />
        <item itemname="'-'" width="5" font="LARGEBOLD" />
        <item itemname="LATESTDELIVERYTIME" width="25" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="ADDRESSTO" multiline="false" width="100" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="STREETTO,' ',STREETNOTO" width="100" font="LARGE" />
      </row>
      <row>
        <item itemname="ADDRESS2TO" width="100" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="ADDRESS3TO" width="100" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="ZIPCODETO,' ',CITYTO" width="100" font="LARGE" />
      </row>
      <row>
        <item itemname="PHONETO" width="100" font="LARGE" />-->
        <item itemname="'PK: ',ENTRECODETO" condition="ENTRECODETO" width="100" font="LARGE" />
      </row>
      <row>
        <item itemname="RECEIVERREFERENCE" width="100" font="LARGE" />
      </row>
      <row>
        <item itemname="CUSTOMERPROJECT" width="50" font="LARGE" />
        <item itemname="PROJECTNUMBER" width="50" font="LARGE" />
      </row>

      <!-- Avsender/Mottaker ordre -->
      <row>
        <item itemname="'Avsändare'" width="60" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="DELIVERYADDRESSFROM" width="100" font="LARGE" />
      </row>
      <row>
        <item itemname="DELIVERYSTREETFROM" width="100" font="LARGE" />
        <item itemname="DELIVERYCITYFROM" width="100" font="LARGE" />
      </row>
      <row>
      </row>

      <row>
        <item itemname="'Mottagare'" width="60" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="DELIVERYADDRESSTO" width="100" font="LARGE" />
      </row>
      <row>
        <item itemname="DELIVERYSTREETTO" width="100" font="LARGE" />
        <item itemname="DELIVERYCITYTO" width="100" font="LARGE" />
      </row>
      <row>
      </row>

      <!-- Dimensions -->
      <row>
        <item itemname="PACKAGES,' kli'" condition="PACKAGES" width="40" font="LARGEBOLD" />
        <item itemname="WEIGHT,' kg'" condition="WEIGHT" width="60" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="VOLUME,' m3'" condition="VOLUME" width="33" font="LARGEBOLD" />
        <item itemname="LOADMETER,' flm'" condition="LOADMETER" width="33" font="LARGEBOLD" />
        <item itemname="AREA,' ppl'" condition="AREA" width="33" font="LARGEBOLD" />
      </row>

      <row>
        <item itemname="'Tillägg:'" condition="ADDSERVICECOUNT" width="100" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="ADDSERVICE.QUANTITY" width="20" />
        <item itemname="ADDSERVICE.NAME" width="80" />
      </row>

      <row>
        <item itemname="'Lösaföremål:'" condition="LOOSEITEMCOUNT" width="100" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="LOOSEITEM.NAME" width="20" />
        <item itemname="LOOSEITEM.STARTINGQUANTITY" width="80" />
        <item itemname="LOOSEITEM.ENDINGQUANTITY" width="80" />
      </row>

      <row>
        <item itemname="'Kollin:'" condition="PACKAGECOUNT" width="100" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="'A'" condition="PACKAGECOUNT" width="5" />
        <item itemname="'KT" condition="PACKAGECOUNT" width="12" />
        <item itemname="'VIKT'" condition="PACKAGECOUNT" width="18" />
        <item itemname="'L'" condition="PACKAGECOUNT" width="11" />
        <item itemname="'B'" condition="PACKAGECOUNT" width="11" />
        <item itemname="'H'" condition="PACKAGECOUNT" width="11" />
        <item itemname="'KLI ID'" condition="PACKAGECOUNT" width="32" />
      </row>
      <row>
        <item itemname="PACKAGE.QUANTITY" width="5" />
        <item itemname="PACKAGE.PACKAGETYPE" width="12" />
        <item itemname="PACKAGE.WEIGHT" width="18" />
        <item itemname="PACKAGE.DEPTH" width="11" />
        <item itemname="PACKAGE.WIDTH" width="11" />
        <item itemname="PACKAGE.HEIGHT" width="11" />
        <item itemname="PACKAGE.PACKAGEID" width="32" />
      </row>

      <row>
        <item itemname="'POD:'" condition="PODCOUNT" width="100" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="POD.DATE" width="25" />
        <item itemname="POD.TIME" width="25" />
        <item itemname="POD.NAME" width="50" />
      </row>

      <row>
        <item itemname="'Avvikelser:'" condition="DAMAGECOUNT" width="100" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="DAMAGE.TYPE" width="35" />
        <item itemname="DAMAGE.COMMENT" width="65" />
      </row>

      <row>
        <item itemname="'Artiklar:'" condition="PRICEITEMCOUNT" width="100" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="PRICEITEM.UNIT1QUANTITY" width="25" />
        <item itemname="PRICEITEM.UNIT1NAME" width="25" />
        <item itemname="PRICEITEM.DESCR" width="50" />
      </row>

      <!-- Message -->
      <row>
        <item itemname="SENDERINSTRUCTION" width="100" font="LARGE" />
      </row>
      <row>
        <item itemname="DRIVERMESSAGEFROM" width="100" font="LARGE" />
      </row>
      <row>
        <item itemname="DRIVERMESSAGETO" width="100" font="LARGE" />
      </row>
      <row>
        <item itemname="DRIVERMESSAGE" width="100" font="LARGE" />
      </row>
    </expandedrows>
    <podrows>
      <row>
        <item itemname="CUSTOMER" width="50" />
        <item itemname="CUSTOMERLOGOTYPE" width="40" />
      </row>
      <row>
        <item itemname="'$from;',': ',DELIVERYADDRESSFROM"/>
      </row>
      <row>
        <item itemname="'$to;',': ',ADDRESSTO"/>
      </row>
      <row>
        <item itemname="'$package_quantity;',': ',PODPACKAGECOUNT" condition="PODPACKAGECOUNT"/>
      </row>
    </podrows>
    <scanrows>
      <row>
        <item font="BOLD" itemname="CREDITEDTOOTHERRESOURCEBLOCK"/>
      </row>
      <row>
        <item font="BOLD" itemname="CREDITEDTOOTHERRESOURCEWARNING"/>
      </row>
      <row>
        <item font="BOLD" itemname="CREDITEDTOOTHERRESOURCE"/>
      </row>
      <row>
        <item itemname="STATUS,' ',PACKAGECOUNT"/>
      </row>
      <row>
        <item itemname="PACKAGE.PACKAGEID,' ',PACKAGE.STATUS,' ',PACKAGE.SCANTIME,' ',PACKAGE.RESOURCE,' ',PACKAGE.HUBNAME,' ',PACKAGE.DIMENSIONS" multiline="true"/>
      </row>
      <row>
        <item itemname="ADDRESSINDEXTITLE,ADDRESSINDEX"/>
      </row>
      <row>
        <item itemname="FREIGHTBILLTITLE,FREIGHTBILL"/>
      </row>
      <row>
        <item itemname="PACKAGEIDTITLE,PACKAGEID"/>
      </row>
      <row>
        <item itemname="ADDRESSFROMTITLE,ADDRESSFROM"/>
      </row>
      <row>
        <item itemname="ADDRESSTOTITLE,ADDRESSTO"/>
      </row>
    </scanrows>
    <scandetailrows>
      <row>
        <item font="BOLD" itemname="CREDITEDTOOTHERRESOURCEBLOCK"/>
      </row>
      <row>
        <item font="BOLD" itemname="CREDITEDTOOTHERRESOURCEWARNING"/>
      </row>
      <row>
        <item font="BOLD" itemname="CREDITEDTOOTHERRESOURCE"/>
      </row>
      <row>
        <item itemname="STATUS,PACKAGECOUNT"/>
      </row>
      <row>
        <item itemname="ORDERIDTITLE,ORDERID"/>
      </row>
      <row>
        <item itemname="FREIGHTBILLTITLE,FREIGHTBILL"/>
      </row>
      <row>
        <item itemname="PACKAGEIDTITLE,PACKAGEID"/>
      </row>
      <row>
        <item itemname="ADDRESSTOTITLE"/>
      </row>
      <row>
        <item itemname="ADDRESSTO"/>
      </row>
      <row>
        <item itemname="STREETTO,STREETNOTO"/>
      </row>
      <row>
        <item itemname="ZIPCODETO,CITYTO"/>
      </row>
      <row>
        <item itemname="ADDRESSFROMTITLE"/>
      </row>
      <row>
        <item itemname="ADDRESSFROM"/>
      </row> 
      <row>
        <item itemname="STREETFROM,STREETNOFROM"/>
      </row>
      <row>
        <item itemname="ZIPCODEFROM,CITYFROM"/>
      </row>
    </scandetailrows>
  </design>
</designs>

The sections of App.Design

Each part of Opter Driver corresponds to a section of App.Design. The sections can be minimised and maximised by using and in the editor. If one of the sections is not in your App.Design, a standard view is used.

  • <summaryrows> = the shipment lists on the New, Todo and Done tabs.

  • <expandedrows> = the detail view.

  • <podrows> = the POD view.

  • <scanrows> = the scan list on the Scan tab.

  • <scandetailrows> = the detail view for scans.

Changes made in App.Design are saved when Save is clicked in the Mobile data settings window, and are visible in the app once the drivers have logged out and back in again.

Tip

Tip

If any section to be customised is missing in App.Design, it can be copied from the factory setting above in order to start from there instead of building the section from scratch.

<summaryrows>, the shipment lists on the New, Todo and Done tabs

This is where to set what should be displayed on the shipments in the shipment lists. Conditions, colours and calculations can be used. Different settings can be used for different customers, vehicle types and services.

<expandedrows>, detail view

This is where to set what is displayed when the driver opens a shipment by tapping on it in one of the shipment lists. Conditions, colours and calculations can be used. Different settings can be used for different customers, vehicle types and services.

<podrows>, the POD view

This is where to set what is displayed when the receiver signs the proof of delivery after a shipment has been unloaded. Conditions, colours and calculations can be used. Different settings can be used for different customers, vehicle types and services.

<scanrows>, the scan list on the Scan tab

This is where to set what is shown in the list when the driver has scanned packages or freight bills. Conditions, colours and calculations cannot be used. For more information, see The scan list in Opter Driver.

<scandetailrows>, the detail view for scans

This is where to set what is displayed when the driver opens a scan by giving a long press on a scan in the list and selecting More information. Conditions, colours and calculations cannot be used.

Syntax

Customise the information that is displayed about the shipments by adding rows to the different sections using the <row></row> pair of tags. Several elements can be added to the same row.

All information and layout is added in <item> tags within the <row> tags.

Displays the order date on one line, and the status, pickup time and delivery time on the next line.

      <row>
        <item itemname="ORDERDATE" width="50" font="LARGE" />
      </row>
      <row>
        <item itemname="CURRENTSTATUS" font="NORMAL" />
        <item itemname="EARLIESTPICKUPTIME" font="NORMAL" />
        <item itemname="LATESTDELIVERYTIME" font="NORMAL" />
      </row>

Parameters for <item>

The values of all parameters must be enclosed within straight double quotes ("), see code example. Multiple values for the same parameter are delimited by commas (,).

Text and numbers that are displayed in the app. May be plain text or variables that retrieve information from the system. For more information about variables, see Placeholder in App.Design. Plain text must be enclosed in single quotes (in addition to the value itself being enclosed in double quotes).

Variable: CUSTOMER retrieves the customer’s name from the order.

        <item itemname="CUSTOMER" />

Plain text: the entire value in double quotes, and the text to be displayed in single quotes.

        <item itemname="'Lastas'" />

To type a comma (,) and dot (.) in the app, use the COMMA and DOT variables because commas and dots are used to delimit different values within a parameter.

For example, to type "Del.info: ", proceed as shown in the example below. Each part of "Del.info: " is counted as a single value, and is therefore delimited by commas. The plain text must be written in single quotes ('Del' and 'info: '), but the DOT variable does not need any quotes. The space after the colon is used to create a space before the value retrieved by the ADDRESSINFOTO variable. Finally, the entire value of itemname (the text string + the variable) is enclosed in double quotes.

A text string with a dot and a value from the system.

      <row>
          <item itemname="'Lev',DOT,'info: ',ADDRESSINFOTO" />
      </row>

Returns

Can only be used in <expandedrows>, <scanrows> and <scandetailrows>.

  • "true" = the value for itemname continues on the next line instead of being cut if it does not fit on a line.

  • "false" = the value for itemname is cut if it does not fit on a line. If no value is entered for multiline, it will be counted as "false".

The information from the variables does not fit on a line.

      <row>
        <item itemname="PACKAGE.PACKAGEID,' ',PACKAGE.STATUS,' ',PACKAGE.SCANTIME,' ',PACKAGE.RESOURCE,' ',PACKAGE.HUBNAME,' ',PACKAGE.DIMENSIONS" multiline="true"/>
      </row>

Returns

The width of the elements. If there are several elements in a row, they are positioned one after the other. If the total width exceeds the maximum screen width, the parts that do not fit will not be displayed (see also multiline above). If no width is specified, the full screen width is used.

The width is specified as a fraction of the sum of all values for width on a row. If the sum of all values for width in a row is 100 and an element has width="5", that element takes up 5% of the total width of the row. If the sum of all values for width in a row is 50 and an element has width="5", that element takes up 10% of the total width of the row.

Tip

Tip

To ensure that the width can always be calculated in percent, make sure that the sum of all values for width in a row is always 100.

By specifying the same width for the elements on several rows, a table can be created, because the information elements are lined up one below the other. In the example below, the "Pkgs:" column heading takes up the entire width of the first row (no value has been specified for width). The second row is the table header with headings in plain text (single quotes). The third row contains values retrieved from the system. Note that the values for width are the same on the second and third rows.

The first column, "A", is 5 units wide, the next column, "KT", is located directly to the right of column "A", and is 12 units wide. In total, the whole row is 100 units wide (5+12+18+11+11+11+32), which means that the values for width are essentially percentages.

Three rows forming a table with a table heading.

      <row>
        <item itemname="'Kollin:'" font="LARGEBOLD" />
      </row>
      <row>
        <item itemname="'A'" width="5" />
        <item itemname="'KT'" width="12" />
        <item itemname="'VIKT'" width="18" />
        <item itemname="'L'" width="11" />
        <item itemname="'B'" width="11" />
        <item itemname="'H'" width="11" />
        <item itemname="'KLI ID'" width="32" />
      </row>
      <row>
        <item itemname="PACKAGE.QUANTITY" width="5" font="SMALL" />
        <item itemname="PACKAGE.PACKAGETYPE" width="12" font="SMALL" />
        <item itemname="PACKAGE.WEIGHT" width="18" font="SMALL" />
        <item itemname="PACKAGE.DEPTH" width="11" font="SMALL" />
        <item itemname="PACKAGE.WIDTH" width="11" font="SMALL" />
        <item itemname="PACKAGE.HEIGHT" width="11" font="SMALL" />
        <item itemname="PACKAGE.PACKAGEID" width="32" font="SMALL" />
      </row>

Returns

The predefined size and style of text in the app.

  • NORMAL: font size 14. Also used if font is not specified at all.

  • LARGE: font size 20.

  • BOLD: bold in normal font size (14).

  • LARGEBOLD: bold, font size 20.

Example

    <summaryrows>      
      <row>
        <item itemname="CURRENTSTATUS" font="LARGE" />
        <item itemname="EARLIESTPICKUPTIME" font="LARGEBOLD" />
        <item itemname="LATESTDELIVERYTIME" font="LARGEBOLD" />
      </row>
      <row>
          <item itemname="'Lev',DOT,'info: ',ADDRESSINFOTO" condition="ADDRESSINFOTO" />
      </row>
      <row>
          <item itemname="'Hämtn',DOT,'info: ',ADDRESSINFOFROM" condition="ADDRESSINFOFROM" font="NORMAL" />
      </row>
      <row>
        <item itemname="ADDRESSFROM,' / ',STREETFROM,' ',STREETNOFROM,' / ',CITYFROM" width="100" font="BOLD" />
      </row>
      <row>
        <item itemname="ADDRESSTO,' / ',STREETTO,' ',STREETNOTO,' / ',CITYTO" width="100" font="BOLD" />
      </row>
    </summaryrows>

The above code produces the following fonts:

  1. Row 3: LARGE

  2. Rows 4 + 5: LARGEBOLD

  3. Row 8: No value for font = NORMAL

  4. Row 11: NORMAL

  5. Rows 14 + 17: BOLD

Comments

Any text between <!-- and --> in the XML file is only displayed in App.Design and does not affect the layout. Comments are displayed in green text in the editor.

The comment <!-- Dimensions --> is for information only.

      <!-- Dimensions -->
      <row>
        <item itemname="PACKAGES,' kli'" condition="PACKAGES" width="40" font="LARGEBOLD" />
        <item itemname="WEIGHT,' kg'" condition="WEIGHT" width="60" font="LARGEBOLD" />
      </row>
Tip

Tip

To restore the default settings for a section, the changes can be marked as comments by putting them between <!-- and --> instead of deleting them. This way it is possible to use them later on or in another section.

See also