App.OpterDriver.Design

Gælder for Opter Driver til iOS og Opter Driver Labs til Android.

Hvis du kun vil indstille, hvilke oplysninger der vises i Opter Driver til iOS og Opter Driver Labs til Android, anbefaler vi, at du anvender vinduet Designfelt til mobil, da det er nemmere end at redigere XLM-filen App.OpterDriver.Design. Du kan finde yderligere oplysninger i Indstilling af, hvilke felter der vises i Opter Driver.

Hvis du vil have dit eget layout i Opter Driver for iOS og Opter Driver Labs til Android, kan du oprette det i enten App.OpterDriver.Design eller App.Design. Hvis alle funktioner, der er tilgængelige, skal kunne anvendes, skal du dog bruge App.OpterDriver.Design, ikke App.Design. Få flere oplysninger om, hvordan du tilpasser Opter Driver, i Tilpas layout og funktioner i Opter Driver.

Hvis I ønsker at anvende forskellige designs for bestemte kunder, bestemte tjenester og/eller bestemte prisbiltyper, skal I bruge App.OpterDriver.Design. Du kan finde yderligere oplysninger i App.OpterDriver.Design nedenfor.

Forudsætninger

Mobildataindstillingen App.ForceOldDesign skal være sat til "false" (standard), for at indholdet i App.OpterDriver.Design kan følges.

Rediger layoutet i Opter Driver

App.OpterDriver.Design åbnes i vinduet Layout på mobile applikationer. Alle andre vinduer i Opter er låst, når det vindue er åbent, men du kan skifte mellem forskellige vinduer, der allerede er åbne. Hvis du har brug for at se oplysninger i andre vinduer, kan du åbne dem, inden du åbner Layout på mobile applikationer.

Åbn App.OpterDriver.Design ved at klikke på Indstillinger > Mobildata > Indstillinger for mobildata og derefter på Rediger ved siden af App.OpterDriver.Design.

Nedenfor finder du links til fuldstændige eksempler på, hvordan App.OpterDriver.Design ser ud, når Opter-systemet installeres, altså appens standardlayout. Vi anbefaler, at du tager udgangspunkt i kodeeksemplet med standardlayoutet og derefter foretager dine ændringer.

De tags, der kan bruges, er beskrevet i Designfelt til mobil (vindue) og Teksttags i App.OpterDriver.Design.
Når du er færdig med at foretage ændringer, anbefaler vi, at du klikker på Check XML for at tjekke, at XML-syntaksen er korrekt. Hvis syntaksen er korrekt, sker der ikke noget. Hvis syntaksen er forkert, beskrives fejlen med rød tekst øverst i vinduet.
Luk editoren ved at klikke på i øverste højre hjørne. Klik derefter på Gem i vinduet Mobildataindstillinger. Dette vil gemme de ændringer, du har foretaget i App.OpterDriver.Design.

Ændringerne vises først i appen, når brugeren har logget ud og ind igen.

Afsnittene i App.OpterDriver.Design

Tabellen nedenfor viser de forskellige afsnit, der findes i App.OpterDriver.Design, og indholdet af de forskellige afsnit vises i appen. For eksempel vises det, der ligger mellem tagparret <expanded> </expanded>, i detaljevisningen i Opter Driver. Hvis du vil se, hvordan detaljevisningen og de forskellige sider ser ud i appen, kan du se Sider, faner og menuer i Opter Driver og Designfelt til mobil (vindue).

Afsnit i App.OpterDriver.Design	Viser hvor i Opter Driver
<expanded> </expanded>	I detaljevisningen.
<summary> </summary>	Opgavelisten.
<pod> </pod>	På signatursiden for leveringsbevis.
<scanrows> </scanrows>	På scanningssiden (scanningslisten).
<scandetailrows> </scandetailrows>	På siden Scanningsdetaljer.
<expandedconsignment> </expandedconsignment>	I detaljevisningen. Afsnittet indeholder information om samlastninger.
<summaryconsignment> </summaryconsignment>	På opgavesiden. Afsnittet indeholder information om samlastninger.

Ændr sektionerne

Billedet viser sektionerne Levering (1), Kunde (2), Ordreinfo (3) i appens detaljevisning.

Brug tagparret <box> </box> til at tilføje et afsnit. Række 1-20 i kodeeksemplet nedenfor svarer til sektionen Kunde (2) i billedet.

Du kan også ændre navnet (1) (2) (3) på et afsnit ved at indtaste det ønskede navn efter headername; se linje 1 i kodeeksemplet nedenfor.

Du kan ændre indholdet i et afsnit ved at slette eller tilføje linjer ved hjælp af tagparret <row> </row>. Mellem <row> og </row> kan du tilføje et eller flere informationsfelter ved hjælp af tagget item og parameteren itemname. Se række 2-7 i kodeeksemplet nedenfor. Efter itemname kan man bruge ren tekst eller variabler, der henter oplysninger fra systemet. Variabelnavnet, som kan anvendes i App.OpterDriver.Design, beskrives i Designfelt til mobil (vindue). For eksempel viser variablen CUSTOMER kundens navn.

Brug horizontalalignment til at justere feltets vandrette placering, START (længst til venstre i rækken/sektionen), CENTER (midt i rækken/sektionen) eller END (længst til højre i rækken/sektionen). Se række 6-18 i kodeeksemplet nedenfor.

Brug verticalalignment til at justere feltets lodrette placering, hvor START (øverst i rækkeområdet), CENTER (midt i rækkeområdet) eller END (nederst i rækkeområdet).

Brug condition, hvis der er betingelser for, om feltet skal vises. For eksempel vises kundenummeret (dvs. CUSTOMERREFERENCE) i linje 9 i kodeeksemplet nedenfor kun på opgaver/ordrer, hvor der er angivet et kundenummer.

Exempel, box, headername, item och 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>

Ændre navn og bredde på kolonner og felter

Du kan ændre navnet på et felt eller en kolonne ved at ændre itemname. Hvis du for eksempel ønsker, at kolonnen, der viser Extraid2 (kolli) i afsnittet Kolli, skal hedde »LoW-affaldskode« i stedet for »Eks.-ID 2«, skal du ændre koden inden for tagparret <box headername="$Design_Packages" ... </box> (dvs. i afsnittet Kolli) fra følgende:

Standardnamn, itemname

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

Til følgende:

Eget namn, itemname

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

Hvis du vil ændre kolonnens bredde, skal du ændre tallet efter width. Hvis du for eksempel har brug for en bredere kolonne, ændrer du width="65" til width="75".

Skift skrifttype og -størrelse

Billedet viser eksempler på forskellige skrifttyper og -størrelser i sektionen Levering i appens detaljevisning.

Brug font til at vælge skrifttype og skriftstørrelse. For at de får den rette størrelse til appen, anbefaler vi, at du bruger de foruddefinerede skrifttyper og skriftstørrelser LARGEBOLD (1), BOLD (3), SMALL (2), SMALLER (4), SMALLEST, SMALLBOLD og NORMALLARGEBOLD.

Teksten (1) på billedet ovenfor defineres på linje 3 i kodeeksemplet nedenfor, det vil sige font=”LARGEBOLD”. Teksten (2) i billedet er defineret på række 27, (3) i billedet er defineret på række 33, og (4) er defineret på række 34 i kodeeksemplet nedenfor.

XML

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>

Ændr farverne

Du ændrer farven på skyggen (1) ved at indsætte bgcolor med den ønskede farve, for eksempel »#FF3344« eller en af de foruddefinerede farver »OpterBlue«, »OpterYellow«, »OpterMint«, »OpterWhite«, »OpterGray0«, »OpterGreenTransparent«, ”OpterYellowDark”, ”OpterMintDark” eller ”OpterOrange”. Se række 1 i kodeeksemplet nedenfor, hvor farven på sektionens skygge er indstillet til "OpterMint".

Du ændrer farven på teksten (2) og (3) ved at indsætte color med den ønskede farve, for eksempel #F5F5F5 eller en af de foruddefinerede farver »OpterGray2.5« eller »OpterGray1.5«. Se række 27 og 29 i kodeeksemplet.

XML

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>

Rediger linjer

Brug tagget <seperator/> eller tagparret <seperator> </seperator> for at indsætte en vandret linje. En linje kan være nyttig til at dele informationer op i forskellige dele for at gøre dem mere overskuelige i appen. Brug height til at angive, hvor tyk linjen skal være. Brug condition, hvis der er betingelser for, at linjen skal vises.

På billedet ovenfor og i kodeeksemplet nedenfor kommer linjen (1) til at være 5 pixel bred, og den vises kun, hvis kunden har et Kundeprojekt/Projektnummer (2) og/eller en Kundekode (3).

XML

<seperator height="5" condition="CUSTOMERPROJECT != | CUSTOMERCODE != " />

Kommentarer

Du kan tilføje kommentarer i XML-filen. Al tekst mellem  vises kun i App.OpterDriver.Design og påvirker ikke appens layout.

XML

1
2
3
4
5
      <!-- Currents status and the time when the current status was set -->
        <row>
          <item itemname="CURRENTSTATUS" horizontalalignment="START" font="LARGEBOLD" />
          <item itemname="'  ',CURRENTSTATUSTIME" horizontalalignment="START" />
        </row>

Hvis du for eksempel vil afprøve forskellige layout, kan du kommentere afsnit ud ved at placere afsnittet mellem .

Forskellige designs afhængigt af kunde, tjeneste og/eller prisbiltype

Du kan anvende forskellige designs på ordrer med specifikke kunder, servicetyper og/eller prisbiltyper. Det gør du ved at skabe et alternativt design i samme App.OpterDriver.Design og derefter sætte betingelser på det design. Designet vælges på ordreniveau, ikke på f.eks. opgaveniveau eller chaufførniveau. Det er altså kundekode, service- og/eller prisbiltypen på ordren, der afgør, hvordan opgaverne vises i Opter Driver.

Du behøver ikke at kopiere hele standarddesignet for at foretage justeringerne. Det er nok bare at kopiere det afsnit, som du ønsker at ændre designet på. Hvis du for eksempel vil vise vægten direkte i ordrelisten for ordrer fra en bestemt kunde, er det nok at tilføje afsnittet summary i det kundespecifikke design.

Sådan gør du:

Start med at tilføje et nyt designafsnit. Du kan klikke på yderst til venstre for at minimere de forskellige afsnit. På billedet nedenfor er vi begyndt at føje et design til kundekoden "IKEA", som kan ses i bunden.

Kopier det afsnit, du vil ændre, fra standarddesignet – i vores tilfælde opgavelisten (summary) – og foretag ændringerne. I eksemplet nedenfor har vi tilføjet en linje, der viser ordrens vægt i opgavelisten, se linje 24-26 i eksemplet. Andre afsnit er hentet fra standarddesignet "OpterDriver2Master".

Taggen $Design_PackageWeight_Short henter teksten Vægt.
Kundekodevilkåret "IKEA" er blevet tilføjet til linje 1.

XML

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
  <design designname="Design for IKEA orders" customerCodes="IKEA">
    <summary>
      <box>
        <item itemname="ADDRESSFROM" newrow="false" font="NORMALLARGEBOLD" />
        <item itemname="CURRENTSTATUS" newrow="false" font="SMALL" color="OpterGreenTransparent" bgcolor="OpterGray-3" horizontalalignment="END" verticalalignment="START" />

        <row>
          <item itemname="STREETFROM,' ',STREETNOFROM" />
          <item itemname="EARLIESTPICKUPTIME,'-',LATESTPICKUPTIME" font="SMALLER" color="OpterGray2.5" horizontalalignment="END" />
        </row>

        <seperator height="1" />

        <row>
          <item itemname="ADDRESSTO" font="NORMALLARGEBOLD" />
          <item itemname="EARLIESTDELIVERYTIME,'-',LATESTDELIVERYTIME" font="SMALLER" color="OpterGray2.5" horizontalalignment="END" />
        </row>

        <row>
          <item itemname="STREETTO,' ',STREETNOTO" />
          <item itemname="CUSTOMERLOGOTYPE" horizontalalignment="END" height="20" color="OpterGray2.5" />
          <item itemname="'  #',ORDERID" font="SMALL" color="OpterGray1.5" horizontalalignment="END" verticalalignment="END" />
        </row>
        <row>
          <item itemname="'$Design_PackageWeight_Short',': ',WEIGHT" />
        </row>
      </box>
    </summary>
  </design>

Luk Layout på mobile applikationer og klik på Gem i vinduet Mobildataindstillinger. Ændringerne er først synlige i appen, når chaufføren har logget ud og ind igen.

Flere betingelser

Hvis du opsætter betingelser for både kundekode og servicekode på et givet design, så bruges det design kun til ordrer, hvor begge betingelser stemmer overens. Dette tilbud gælder for bestillinger hos IKEA med tjenesten »Timkörning«.

XML

1
<design designname="Design for IKEA orders" customerCodes="IKEA" serviceTypeCodes="TI">

Hvis designet skal anvendes for flere kunder, skal du afgrænse kundekoderne med kommaer. Dette design gælder for ordrer fra IKEA, Opter og Kastrup.

XML

1
<design designname="Design for IKEA orders" customerCodes="IKEA,OPTER,KASTRUP">

Flere designs

Du kan selvfølgelig tilføje flere design med forskellige kombinationer af vilkår.

XML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<designs>
    <!-- Default design -->
    <design designname="OpterDriver2Master">
        ...
    </design>
    <!-- Design for IKEA orders with hourly rate -->
    <design designname="IKEA with TI" customerCodes="IKEA" serviceTypeCodes="TI">
        ...
    </design>
    <!-- Design for IKEA (with other services than TI), Opter and Kastrup -->
    <design designname="IKEA, Opter, Kastrup" customerCodes="IKEA,OPTER,KASTRUP">
        ...
    </design>
    <!-- Design for orders with price vehicle type TL -->
    <design designname="Heavy truck" vehicleTypeCodes="TL">
        ...
    </design>
</designs>

Komplette eksempler

Hvis du vil have appen i standardlayoutet eller vil tage udgangspunkt i standardlayoutet og derefter foretage dine egne ændringer, kan du kopiere det komplette kodeeksempel fra en af følgende artikler (afhængigt af hvilken version af Opter du bruger):

App.OpterDriver.Design

Forudsætninger

Rediger layoutet i Opter Driver

Sådan gør du:

Flere betingelser

Flere designs

Komplette eksempler

Se også