Index
Layout och element i Fillet-webbappen
Förstå appens gränssnitt
Layout och element i Fillet-webbappen
Lär dig om layouten i Fillet-webbappen och de olika elementen du kan interagera med.
Layout
Navigeringsfält
Högst upp på skärmen finns navigeringsfältet. Det innehåller Fillet:s logotyp, flikknappar och navigeringsknappar som ”Dokumentation” och ”Logga ut”.
Flikar
Fillet-webbappen har följande flikar:
- Ingredienser
- Recept
- Meny
- Leverantörer
- Arbetskraft
- Lager
- Synka
Dessa flikar baseras på de typer av objekt du kan arbeta med i Fillet: ingredienser, recept, menyalternativ, leverantörer och aktiviteter.
Klicka på en flik i navigeringsfältet för att välja den.
Vyer
Generellt är varje flik i webbappen uppdelad i dessa delar:
- Listvy
- Detaljvy
- Sidopanel Nytt
På större skärmar, som en datorskärm, visas listvyn som ett sidofält och detaljvyn upptar den större delen av skärmen.
För mindre skärmar, som smartphones, visas en av de två delarna i helskärmsläge, beroende på vilken som är aktiv. När du väljer en flik visas listvyn i helskärmsläge som standard. När du väljer ett objekt från listan visas detaljvyn i helskärmsläge.
Mobil, listvy
Mobil, detaljvy
Listvy
Listvyn innehåller vanligtvis följande element:
- Primärknapp
- Listtabell
- Sökfält för listtabell
Detaljvy
Detaljvyn innehåller vanligtvis följande element:
- Widgetar
- Detaljsektion
- Detaljtabell
- Sökfält för listtabell
Sidopanel
I vissa flikar finns en sidopanel som du kan använda för att navigera mellan olika paneler.
Dessa paneler är specifika för den valda fliken.
Element
Varje flik i webbappen innehåller någon kombination av dessa element:
- Standardknapp
- Varningsknapp
- Listruteknapp
- Primärknapp
- Alternativknapp
- Listtabell
- Sökfält för listtabell
- Widget
- Detaljsektion
- Detaljtabell
- Sökfält för detaljtabell
- Sidnumrering
Definitioner
Standardknapp
En standardknapp som används för att utföra vanliga åtgärder i appen som inte kräver extra försiktighet.
Dessa knappar är antingen blå eller grå.
Exempel: Redigera-knappVarningsknapp
En knapp som visar när en åtgärd kräver extra försiktighet.
De hjälper dig att veta att du är på väg att göra en viktig ändring, som att ta bort ett objekt.
Dessa knappar är alltid röda.
Exempel: Ta bort-knappListruteknapp
En knapp som öppnar en meny med alternativ när du väljer den.
De låter dig välja en av flera åtgärder från en lista.
Exempel: ÅtgärdsknappPrimärknapp
En tydlig knapp som är lätt att se på skärmen.
Dessa används för viktiga uppgifter, som att skapa ett nytt objekt.
Dessa knappar är vanligtvis blå
Exempel: På fliken Ingredienser är primärknappen ”Skapa ingrediens”.Alternativknapp
Denna knapp visar ytterligare åtgärder du kan vidta.
Dessa knappar är vanligtvis grå.
Exempel: FilteralternativListtabell
Tabellen i listvyn.
Den visar en lista med objekt för den valda fliken.
Exempel:På fliken Ingredienser visar listtabellen alla dina ingredienser: ”Alla ingredienser”
Sökfält för listtabell
Sökfältet ovanför listtabellen.
Det används för att söka efter namn på objekt i listtabellen.
Exempel: På fliken Ingredienser, sök i listan ”Alla ingredienser” för att hitta ingredienser efter namn.Widget
Ett kortliknande element som fokuserar på ett specifikt ämne eller funktionalitet.
Det visar relevant information och erbjuder ämnesspecifika åtgärder.
Exempel: På fliken Ingredienser visar widgeten Ätlig andel (EP) EP-procenten för den valda ingrediensen och innehåller en knapp för att ändra denna inställning.Detaljsektion
Del av detaljvyn för den valda fliken, vanligtvis placerad under widgetarna.
Varje flik har flera sektioner, och varje sektion fokuserar på ett specifikt syfte.
Den består av olika element som detaljtabeller, textrutor och datavisualiseringar.
Exempel:I huvudpanelen på fliken Ingredienser finns dessa tillgängliga sektioner:
- Priser
- Abstrakta enheter
- Anteckningar
- Ursprungsland
- Etiketter
- Grupper
Detaljtabell
En tabell som är en del av en detaljsektion.
Det finns vanligtvis flera detaljtabeller i en vald flik, organiserade per sektion.
Den visar information och ger alternativ för att redigera eller ta bort information.
Exempel: På fliken Ingredienser innehåller sektionen Priser tabellen Priser. Den visar alla priser för den valda ingrediensen.Sökfält för detaljtabell
Sökfältet ovanför en detaljtabell.
Det används för att söka efter namn på objekt i den detaljtabellen.
Exempel: På fliken Ingredienser, sök i tabellen Priser för att hitta en leverantör efter namnSidnumrering
Dessa är kontroller som används för att navigera genom flera sidor med innehåll.
Den har knappar för Nästa och Föregående för att gå framåt och bakåt, samt sidantal.
Den blir synlig när en tabell har fler än 10 rader.
Kontrollpanel
När du startar Fillet-webbappen ser du Kontrollpanelen.
Den består av olika widgetar som ger dig en översikt över alla olika objekt och statusuppdateringar.
