Last updated: 05.06.2024

App.Design

You can customise the layout of the Opter Driver (classic) for Android at App.Design.

App.Design used for Opter Driver (classic) for Android. (App.Design can also be used for the other variants of Opter Driver, but then you cannot use all the new functionality.) For information on how to customise Opter Driver for iOS and Opter Driver Labs for Android, see Customising the layout and features of Opter Driver and Setting which fields are displayed in Opter Driver.

This article describes the basics and structure of App.Design. For more information, see 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. It is good to have some basic knowledge of XML to edit the file.

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.

Fabriksinställningar
<?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 mission lists on the tabs New, Todo and Done.

  • <expandedrows> = detail view.

  • <podrows> = POD view.

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

  • <scandetailrows> = 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.

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. You can have different settings 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. You can have different settings 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. You can have different settings 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

You customise the information displayed for the shipments by adding lines to the different sections with the tag pair <row></row>. Several elements can be added to the same row.

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

Visar orderdatum på en rad, och status, hämtningstid och leveranstid på nästa rad.
      <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).

Variabel/platshållare: ”CUSTOMER” hämtar kundens namn från ordern
        <item itemname="CUSTOMER" />
Ren text: Hela värdet inom dubbla citattecken, och texten som ska visas inom enkla citattecken
        <item itemname="'Lastas'" />

To write comma (,) and period (.) in the app, use the variables COMMA and DOT because comma and period 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 ('Lev' and 'info: '), but the variable DOT does not need any quotes. The space after the colon is to get a space before the value retrieved by the variable ADDRESSINFOTO. Finally, the entire value of itemname (the text string + the variable) is surrounded by double quotes.

En textsträng med punkt och ett värde från systemet.
      <row>
          <item itemname="'Lev',DOT,'info: ',ADDRESSINFOTO" />
      </row>

Returns

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

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

  • "false" = the value for itemname is truncated if it does not fit on a line. If you do not enter a value for multiline, it will be counted as 'false'.

In the example below, the information retrieved by the variables does not all fit on one line. Therefore, multiline="true" is set. Otherwise, the text would have been truncated after "18.05.2022".

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

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 width of the screen, the parts that do not fit are not displayed (see also multiline above). If no width is specified, the full screen width is used.

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

If you always want to be able to count the width as a percentage, make sure that the sum of all width in a row is always 100.

By specifying the same width for the elements of several rows, you can build up a table, as the information in the rows is placed one below the other. In the example below, the column header, "Collin:" 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. Notice that the values for width are the same on the second and third lines.

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 effectively a percentage.

Tre rader som bildar en tabell med en tabellrubrik.
      <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.

Exempel
    <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. Row 4 + 5: LARGEBOLD

  3. Row 8: No value for font = NORMAL

  4. Row 11: NORMAL

  5. Row 14 + 17: BOLD

Comments

Any text between <!-- and --> in the XML file will only appear in App.Design and will not affect the layout. Comments are displayed in green text in the editor. The text of the comment <!-- Dimensions --> in the example below is for info only.

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

If you want to restore the default settings for a section, you can comment it out by putting it between <!-- and --> instead of deleting your changes. This way it is possible to use them later on or in another section.

See also