Appens navigering

Skärmarna är sidorna; navigeringen är det som leder människor fram till dem. I Keplin bor den inte inuti någon skärm: den är ett eget dokument i appen, ritat i en visuell redigerare och serverat runt vilken skärm som än är öppen.

Och den ritas per enhet: datorns topplist, mobilens menylåda och surfplattans åtgärdsfält är tre självständiga designer, var och en med sina egna menyer.

#Öppna redigeraren

I appens sidofält, fliken UI, heter det första objektet Navigering. Klicka så öppnas det i en flik i arbetsytan.

Det du ser i mitten är inget formulär: det är appens sida, ritad som den kommer att bli. Listen upptill, skärmens innehåll nedanför (Skärmens innehåll), märket till vänster. Du redigerar genom att röra i den.

Under titeln finns kontrollerna som styr vad du ser:

Kontroll	Vad den gör
Webb (1280px) / Surfplatta (768px) / Mobil (390px)	Väljer enheten du ritar för.
Läge (bara surfplatta och mobil)	Navigeringens form på den enheten.
Startmeny	Vilken av menyerna som öppnas när någon går in i appen.

#Rörelserna

Rörelse	Vad som händer
Klick på en meny	Markerar den (och visar, i ett kontext, dess sidofält).
Dubbelklick på en meny	Öppnar modalen Valt objekt, där allt redigeras.
Dra en meny	Flyttar den mellan zoner eller ändrar ordningen. Den släpper bara där det är giltigt.
+	Lägger till en meny på det stället.
× i hörnet av en meny	Tar bort den.
Klick på märket	Öppnar modalen Appens logotyp.

#Menytyperna

Knappen + i varje zon visar de typer som platsen tar emot:

Typ	Vad det är
Meny	Leder till en skärm i appen. Det är det vanliga objektet.
Undermeny	Grupperar andra menyer — i menylådan och i sidofälten.
Kontext (sidofält)	En meny som, när den väljs, aktiverar ett eget sidofält med sina barn. Det är som att dela upp appen i områden.
Avdelare	En skiljelinje.
Användarmeny	Avataren för den som använder appen, med sina poster och Logga ut.
Aviseringar	Klockan, med automatisk räkning av olästa.

Alla typer passar inte på alla ställen, och redigeraren erbjuder bara de giltiga: ett kontext kan inte innehålla ett annat kontext, en undermeny rymmer bara objekt, användarmenyn rymmer bara objekt och avdelare, och mobilens menylåda har inga kontext (den använder undermenyer).

#Listens zoner

I topplisten ordnas menyerna i tre zoner, och tipset i redigeraren säger det väsentliga: Dra menyerna mellan listens zoner (vänster/mitten/höger) för att skapa grupper.

Zon	Vanlig användning
Grupp till vänster	Huvudnavigeringen, direkt efter märket.
Grupp i mitten	En framhävd grupp. Om den blir tom tar den ingen plats.
Grupp till höger	Användarmenyn, klockan, genvägar.

Inuti ett kontexts sidofält — och i menylådan — är zonerna två: Grupp överst och Nederst (den senare klistrar sig mot nederkanten, så att ”Inställningar” och ”Hjälp” hamnar där man väntar sig).

#Skapa en meny

1. Välj enheten i kontextlisten.
2. Klicka på + i zonen där du vill ha den.
3. Välj typen.
4. Menyn föds med ett generiskt namn och blir markerad — dubbelklicka på den för att öppna modalen Valt objekt.
5. Fyll i:

Fält	Vad det är
Ikon	En ikon ur biblioteket eller en SVG från appens assets.
Menyns namn	Texten som visas. Det är en fras i appen — den ingår i översättningarna.
Skärm…	Målskärmen (bara i Meny).
(parametrar)	Om målskärmen har ruttparametrar dyker ett fält per parameter upp, så att du kan ge den ett fast värde.
Bara ikon (namnet visas som verktygstips)	Lämnar bara ikonen kvar i listen.

6. Stäng med Klart och spara med Spara.

Knappen Ta bort objektet, i samma modal, raderar menyn.

#Kontext och sidofält

Ett Kontext (sidofält) är sättet att ge ett område i appen en egen meny: du väljer ”Försäljning” i topplisten och till vänster dyker sidofältet med försäljningsskärmarna upp. Kontextets barn är posterna i det fältet.

I kontextets modal finjusterar avsnittet Sidofältet för det här kontextet det:

Fält	Alternativ
Beteende	Fast (alltid öppet) · Infällbart (knapp fäller ihop till ikoner) · Mini (ikoner; expanderar vid hovring) · Mini med panel (hovring öppnar menyns träd)
Bredd	Mellan 180 och 400 pixlar.
Vid expandering (bara i mini-läget)	Läggs över innehållet eller Trycker undan innehållet.
Börjar hopfälld (bara i infällbart läge)	Hur det öppnas första gången.

#Användarmenyn

Användarmeny är ett objekt som alla andra — den kan sitta i topplisten, inuti ett kontext, i menylådan eller i den kompakta listen. Att markera den öppnar dess popup, och det är där man lägger till poster med + (Meny eller Avdelare).

I modalen ligger de alternativ som inte är visuella:

Alternativ	Vad det gör
Visa namnet	Namnet på den som använder appen visas i menyns rubrik.
Visa användarnamnet (inloggning)	Även användarnamnet.
Alternativet ”Logga ut”	Tar med utgången i slutet av menyn.
Text för ”Logga ut”	En egen text; tom använder Systemets (översatt).

Utan ikon visar avataren namnets initialer — och det är det som ikonväljaren kallar Ingen ikon (initialer).

#Aviseringar

Objektet Aviseringar är klockan: bara ikon, med pillen för olästa som uppdaterar sig själv. Klicket öppnar de senaste aviseringarna och Se mer öppnar panelen med alla. I modalen bestämmer Aviseringar i rullgardinen hur många som visas åt gången (mellan 1 och 20).

#Värdepiller

Vilken meny som helst (utom avdelare och klockan) kan visa ett piller med ett levande tal — obehandlade beställningar bredvid ”Beställningar”, väntande ansökningar bredvid ”Godkännanden”.

1. Slå på Visa pill med värde i objektets modal.
2. Välj det API som hämtar data (Välj API…).
3. Välj under Värde antingen Antal (antal poster) eller Fält i 1:a posten — i det senare fallet anger du också Fält.
4. Dölj när värdet är tomt eller noll undviker ett piller som säger ”0”.

Pillret uppdateras i realtid: när data ändras ändras talet — utan att någon laddar om sidan.

#Appens logotyp

Klicka på märket, till vänster i listen, för att öppna modalen Appens logotyp:

Fält	Vad det gör
Ikon eller bild	Välj en ikon ur biblioteket eller en fil bland appens assets.
Visa appens namn	Namnet bredvid märket.
Inramning i listen	Bara för SVG: Skala, Rutans bredd, och placeringen genom att dra bilden.
Anpassa till rutan	Återställer skala och position.
Ingen inramning	Stänger av inramningen.

Inramningen är svaret på logotypen som ”inte får plats”: du drar och skalar tills den sitter bra i listen, och modalen garanterar själv att SVG-filen förblir intakt — beskärningen är bara visuell och går att ångra. För andra format förklarar noteringen att inramning bara är tillgänglig för SVG.

#Startmeny

Startmeny, i det övre högra hörnet, avgör var appen öppnas. Man väljer en av menyerna (inte en lös skärm), och valet görs per enhet — mobilen kan öppnas i en annan panel än datorn.

Om en enhet inte har ett eget val ärver den nästa enhets (mobil → surfplatta → webb); och finns det inget alls öppnas appen i den första menyn som leder till en skärm.

#En design per enhet

Webb är alltid en topplist. Surfplattan och mobilen har en väljare för Läge:

Läge	Hur det blir
Topplist (bara surfplatta)	Som på datorn: märke, menyer och kontext i en list.
Hamburgarmeny	En kompakt list med knappen ☰, som öppnar menylådan med menyträdet.
Åtgärdsfält	En list längst ned, i mobilappsstil, med upp till 5 poster — och ingen menylåda.

I de kompakta lägena finns dessutom två egna rader:

• Header — upp till 4 åtgärder bredvid märket (användarmenyn och klockan trivs här).
• Åtgärdsfält — upp till 5 poster längst ned, var och en en Knapp eller en Åtgärdsmeny.

När gränsen nås säger plattformen varför: Åtgärdsfältet har redan 5 objekt (max). / Headern rymmer högst 4 åtgärder.

#Vem ser vad

Redigeraren ritar; det som avgör vem som ser varje meny är Appens inställningar ▸ Behörigheter, i fliken Menyer — per roll och per enhet.

Regeln är värd att känna till: till skillnad från skärmarna är en meny synlig som standard. Dörren är skärmen, och den är redan stängd; att dölja menyn tjänar till att ta bort en hel grupp ur synfältet, eller ta bort klockan från den som inte får något. Att dölja en grupp tar med sig barnen, och ett objekt som pekar på en otillgänglig skärm försvinner av sig självt.

#Varför inte…?

• Varför försvann mina ändringar? De sparades inte. Navigeringen har en Spara-knapp — och den varnar innan du stänger en flik med osparade ändringar.
• Varför kan jag inte släppa menyn där jag vill? Den platsen tar inte emot den typen. Ogiltiga mål tänds inte ens: ett kontext inuti ett kontext, en undermeny inuti en användarmeny, en avdelare i topplisten.
• Varför ser jag inga menyer på mobilen? Mobilen har ett eget träd, och det kan vara tomt. Välj Mobil (390px) och rita det.
• Varför försvann en meny i den publicerade appen? Antingen doldes den i Inställningar ▸ Behörigheter ▸ Menyer för den rollen, eller så pekar den på en skärm som personen inte har åtkomst till.
• Varför visas logotypen beskuren? Den har en inramning. Öppna modalen och använd Anpassa till rutan, eller Ingen inramning.
• Varför kan jag inte ändra typ på en meny? Det går inte. Ta bort den och skapa en med rätt typ — det är den enda operationen som plattformen inte låter dig göra halvvägs.
• Varför visar pillret alltid 0? Slå på Dölj när värdet är tomt eller noll, eller kontrollera att det valda API:et verkligen returnerar poster.