Navigasjonen i appen

Skjermene er sidene; navigasjonen er det som fører folk fram til dem. I Keplin bor den ikke inne i noen skjerm: den er et eget dokument i appen, tegnet i en visuell editor og servert rundt enhver skjerm som er åpen.

Og den tegnes per enhet: topplinjen på datamaskinen, skuffen på mobilen og handlingslinjen på nettbrettet er tre uavhengige design, hvert med sine menyer.

#Åpne editoren

I sidefeltet til appen, fanen UI, heter det første elementet Navigasjon. Klikk, og den åpnes i en fane i arbeidsområdet.

Det du ser i midten er ikke et skjema: det er siden i appen, tegnet slik den kommer til å se ut. Linjen øverst, innholdet på skjermen nederst (Innholdet på skjermen), merket til venstre. Du redigerer ved å røre den.

Under tittelen ligger kontrollene som styrer det du ser:

Kontroll	Hva den gjør
Web (1280px) / Nettbrett (768px) / Mobil (390px)	Velger enheten du tegner for.
Modus (bare nettbrett og mobil)	Formen på navigasjonen på den enheten.
Startmeny	Hvilken av menyene som åpnes når noen kommer inn i appen.

#Bevegelsene

Bevegelse	Hva som skjer
Klikk på en meny	Velger den (og, i en kontekst, viser sidefeltet dens).
Dobbeltklikk på en meny	Åpner vinduet Valgt element, der alt redigeres.
Dra en meny	Flytter den mellom soner eller endrer rekkefølgen. Den slipper bare der det er gyldig.
+	Legger til en meny på det stedet.
× i hjørnet av en meny	Fjerner den.
Klikk på merket	Åpner vinduet Appens logo.

#Menytypene

Knappen + i hver sone viser typene det stedet godtar:

Type	Hva det er
Meny	Fører til en skjerm i appen. Det er det vanlige elementet.
Undermeny	Grupperer andre menyer — i skuffen og i sidefeltene.
Kontekst (sidefelt)	En meny som, når den velges, slår på et eget sidefelt med barna sine. Det er som å dele appen i områder.
Skillelinje	En delestrek.
Brukermeny	Avataren til den som bruker appen, med sine oppføringer og Logg ut.
Varsler	Bjellen, med automatisk telling av uleste.

Ikke alle typer passer alle steder, og editoren tilbyr bare de gyldige: en kontekst kan ikke inneholde en annen kontekst, en undermeny tar bare elementer, brukermenyen tar bare elementer og skillelinjer, og skuffen på mobilen har ingen kontekster (bruk undermenyer).

#Sonene i linjen

I topplinjen ordner menyene seg i tre soner, og hintet i editoren sier det vesentlige: Dra menyene mellom sonene i linjen (venstre / midten / høyre) for å lage grupper.

Sone	Vanlig bruk
Gruppe til venstre	Hovednavigasjonen, rett etter merket.
Gruppe i midten	En framhevet gruppe. Blir den stående tom, tar den ingen plass.
Gruppe til høyre	Brukermenyen, bjellen, snarveier.

Inne i sidefeltet til en kontekst — og i skuffen — er sonene to: Gruppe øverst og Bunn (denne limer seg til bunnen, så «Innstillinger» og «Hjelp» blir liggende der man venter dem).

#Opprette en meny

1. Velg enheten i kontekstlinjen.
2. Klikk på + i sonen der du vil ha den.
3. Velg typen.
4. Menyen fødes med et generisk navn og blir stående valgt — gi den et dobbeltklikk for å åpne vinduet Valgt element.
5. Fyll inn:

Felt	Hva det er
Ikon	Et ikon fra biblioteket eller en SVG fra assetene i appen.
Navn på menyen	Teksten som vises. Det er en setning i appen — den går inn i oversettelsene.
Skjerm…	Målskjermen (bare i Meny).
(parametere)	Har målskjermen ruteparametere, dukker det opp ett felt per parameter der du gir den en fast verdi.
Bare ikon (navnet vises som verktøytips)	Lar bare ikonet stå igjen i linjen.

6. Lukk med Ferdig og lagre med Lagre.

Knappen Slett element, i samme vindu, sletter menyen.

#Kontekster og sidefelt

En Kontekst (sidefelt) er måten å gi et område av appen sin egen meny: du velger «Vendas» i topplinjen, og til venstre dukker sidefeltet med salgsskjermene opp. Barna til konteksten er elementene i det feltet.

I vinduet til konteksten finjusterer seksjonen Sidefeltet for denne konteksten det:

Felt	Alternativer
Oppførsel	Fast (alltid åpen) · Sammenleggbar (knapp minimerer til ikoner) · Mini (ikoner; utvides når du holder musen over) · Mini med panel (menytreet åpnes når du holder musen over)
Bredde	Mellom 180 og 400 piksler.
Ved utvidelse (bare i mini-modus)	Legger seg over innholdet eller Skyver innholdet.
Starter minimert (bare i sammenleggbar modus)	Hvordan det åpner første gang.

#Brukermenyen

Brukermenyen er et element som de andre — den kan stå i topplinjen, inne i en kontekst, i skuffen eller i den kompakte linjen. Å velge den åpner popup-en dens, og det er der du legger til oppføringer med + (Meny eller Skillelinje).

I vinduet ligger alternativene som ikke er visuelle:

Alternativ	Hva det gjør
Vis navnet	Navnet til den som bruker appen vises i toppen av menyen.
Vis brukernavnet (pålogging)	Også brukernavnet.
Alternativet «Logg ut»	Tar med utgangen nederst i menyen.
Tekst for «Logg ut»	En egen tekst; tom bruker Systemets eget (oversatt).

Uten ikon viser avataren initialene i navnet — og det er det ikonvelgeren kaller Uten ikon (initialer).

#Varsler

Elementet Varsler er bjellen: bare ikon, med merket for uleste som oppdaterer seg selv. Klikket åpner de siste varslene, og Se mer åpner panelet med alle. I vinduet bestemmer Varsler i nedtrekkslisten hvor mange som vises av gangen (mellom 1 og 20).

#Verdimerker

Enhver meny (unntatt skillelinjer og bjellen) kan vise et merke med et levende tall — de ubehandlede ordrene ved siden av «Encomendas», de ventende forespørslene ved siden av «Aprovações».

1. I vinduet til elementet, slå på Vis merke med verdi.
2. Velg API-en som leverer dataene (Velg API…).
3. Under Verdi, velg Antall (antall poster) eller Felt fra første post — i så fall, angi også Felt.
4. Skjul når verdien er tom eller null unngår et merke som sier «0».

Merket oppdateres i sanntid: når dataene endres, endres tallet — uten at noen laster siden på nytt.

#Appens logo

Klikk på merket, til venstre i linjen, for å åpne vinduet Appens logo:

Felt	Hva det gjør
Ikon eller bilde	Velg et ikon fra biblioteket eller en fil fra assetene i appen.
Vis navnet på appen	Navnet ved siden av merket.
Innramming i linjen	Bare for SVG: Skala, Bredde på boksen, og plasseringen ved å dra bildet.
Tilpass til boksen	Tilbakestiller skala og posisjon.
Ingen innramming	Slår av innrammingen.

Innrammingen er svaret på logoen som «ikke får plass»: du drar og skalerer til den sitter godt i linjen, og selve vinduet forsikrer at SVG-filen forblir uendret — beskjæringen er kun visuell og kan reverseres. For andre formater forklarer merknaden at innrammingen bare er tilgjengelig for SVG.

#Startmeny

Startmeny, øverst til høyre, avgjør hvor appen åpner. Du velger en av menyene (ikke en løs skjerm), og valget gjøres per enhet — mobilen kan åpne i et annet panel enn datamaskinen.

Har en enhet ikke noe eget valg, arver den fra den neste (mobil → nettbrett → web); og finnes det ikke noe i det hele tatt, åpner appen på den første menyen som fører til en skjerm.

#Ett design per enhet

Web er alltid en topplinje. Nettbrettet og mobilen har en velger Modus:

Modus	Hvordan det blir
Topplinje (bare nettbrett)	Som på datamaskinen: merke, menyer og kontekster i en linje.
Hamburgermeny	En kompakt linje med knappen ☰, som åpner skuffen med menytreet.
Handlingslinje	En linje i bunnen, i mobilapp-stil, med opptil 5 oppføringer — og uten skuff.

I de kompakte modusene finnes det i tillegg to egne rader:

• Headeren — opptil 4 handlinger ved siden av merket (brukermenyen og bjellen trives godt her).
• Handlingslinjen — opptil 5 oppføringer i bunnen, hver av dem en Knapp eller en Handlingsmeny.

Når grensen er nådd, sier plattformen hvorfor: Handlingslinjen har allerede 5 elementer (maks). / Headeren tar maks 4 handlinger.

#Hvem ser hva

Editoren tegner; den som avgjør hvem som ser hver meny er Appinnstillinger ▸ Tillatelser, i fanen Menyer — per rolle og per enhet.

Regelen er verdt å kunne: i motsetning til skjermene er en meny synlig som standard. Døren er skjermen, og den er allerede lukket; å skjule menyen er til for å ta en hel gruppe ut av syne, eller ta bjellen fra den som ikke mottar noe. Å skjule en gruppe tar barna med seg, og et element som peker på en utilgjengelig skjerm forsvinner av seg selv.

#Hvorfor ikke…?

• Hvorfor forsvant endringene mine? De ble ikke lagret. Navigasjonen har en Lagre-knapp — og varsler før du lukker en fane med ulagrede endringer.
• Hvorfor får jeg ikke sluppet menyen der jeg vil? Det stedet godtar ikke den typen. Ugyldige mål lyser ikke engang opp: en kontekst inne i en kontekst, en undermeny inne i en brukermeny, en skillelinje i topplinjen.
• Hvorfor ser jeg ikke menyene på mobilen? Mobilen har sitt eget tre, og det kan være tomt. Velg Mobil (390px) og tegn det.
• Hvorfor forsvant en meny i den publiserte appen? Enten ble den skjult under Innstillinger ▸ Tillatelser ▸ Menyer for den rollen, eller den peker på en skjerm den personen ikke har tilgang til.
• Hvorfor vises logoen avkuttet? Den har innramming. Åpne vinduet og bruk Tilpass til boksen, eller Ingen innramming.
• Hvorfor får jeg ikke endret typen til en meny? Den endres ikke. Slett og opprett med riktig type — det er den eneste operasjonen plattformen ikke lar deg gjøre halvveis.
• Hvorfor viser merket alltid 0? Slå på Skjul når verdien er tom eller null, eller sjekk at API-en du valgte faktisk gir tilbake poster.