Last updated: 2024-06-05
Applies from: Opter 2023.12.00
App.Design
In App.Design you can set the information to 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 until Opter 2022.11.xx. For more information on how to set up the views in Opter Driver for iOS, see Configuring which fields are displayed in Opter Driver for iOS.
(As of Opter 2022.12.00, we recommend using the Design field for mobile or App.OpterDriver.Design window for Opter Driver for iOS and Opter Driver Labs for Android. 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 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> = 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
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 (,).
itemnameText 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 Placeholders 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
multilineCan 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
widthThe 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
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
fontThe 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:
Row 3: LARGE
Rows 4 + 5: LARGEBOLD
Row 8: No value for font = NORMAL
Row 11: NORMAL
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
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.