Widgetarna

Allt man ser på en skärm är en widget. Paletten Widgetar, till vänster om canvasen, innehåller 32 medföljande widgetar — från den här sidan går du därifrån med vetskap om vad var och en är till för, och med de viktigaste förklarade i detalj. Om appen har widgetar som du själv har programmerat dyker de upp i samma palett, i avsnittet Anpassad.

#Katalogen, per kategori

#Formulärfält

Alla binds till ett fält i en post-datastore (avsnittet Databindning) och ingår i valideringen — se formulären.

Widget	Vad den är till för
Textruta	Text på en rad. Har Mask, läget Lösenord (dölj texten) och platshållare.
Textområde	Lång text, flera rader — anteckningar, beskrivningar.
Tal	Numeriska värden.
Ja/Nej	Ett booleskt reglage.
Listruta	Val bland alternativ: Fast lista, Enum från modellen eller Datastore; med Sökbar, Flerval och läget Träd (hierarkiskt).
Datum	Datum, Datum och tid eller bara Tid (fältet Typ avgör).
Färg	Val av en färg.
Fil	Uppladdning via dragning och/eller knapp, med förhandsvisning, storleksgräns och val av lagring. Gränsen går aldrig över Största fil (MB) i plattformsinställningarna, upp till 100 MB. Med I själva fältet (base64) följer filen med i begäran och gränsen är cirka 3 MB. Varje konto skickar upp till 300 filer och 3 GB per timme (och varje adress upp till 20 GB); över det säger widgeten att för många filer har skickats och ber dig försöka igen senare.

Varje fält med ett värde visar till höger ett diskret × som rensar det — i en Lista som används som filter är det sättet att gå tillbaka till "alla" utan att välja något. Den enkla Listan öppnar sina alternativ under fältet; med Sökbar öppnar den en sökruta och listan kortas när du skriver; med Flerval slås varje alternativ på och av med en bock.

Listrutan visar 10 alternativ åt gången. Egenskapen Synliga alternativ, under Beteende, ändrar det antalet (0 visar alla). När det finns fler alternativ får listan ett sökfält, även utan Sökbar, och en sidfot med totalen, till exempel ”10 av 245 · skriv för att söka”. Sökningen går igenom alla alternativ och ignorerar accenter och versaler. Vid Flerval visas de redan valda alternativen först i listan, och fältet visar de två första följda av ”+N”.

I sidfoten öppnar förstoringsglaset (Visa alla) ett fönster med alla alternativ i en tabell, med sökning och 50 rader per sida. När Alternativens källa är Datastore lägger Kolumner i valfönstret till fält bredvid etiketten (till exempel organisationsnumret, för att skilja två kunder med samma namn åt), och fönstret får ett filterfält för de fälten. Vid enkelval väljer ett klick på en rad alternativet. Vid Flerval har varje rad en kryssruta, Markera alla markerar resultaten på alla sidor, och bara Tillämpa sparar valet; Avbryt ändrar ingenting. Fönstret behåller alltid samma storlek, med få eller många resultat.

I KeplinGo öppnar Listrutan ett blad med samma regel: 10 alternativ, sökning och sidfoten med totalen. Visa alla visar alla alternativ i samma blad, med fälten från Kolumner i valfönstret under varje etikett, och Flerval sparas bara med Tillämpa.

När Laddning för Listrutans datastore är En sida i taget når bara den första sidan skärmen. Sökningen frågar då servern, totalen i sidfoten är serverns, valfönstret begär varje sida från servern, och fältet hämtar namnet på ett sparat värde som den första sidan inte tog med. I det här läget söker sökningen i etiketten (som måste vara ett textfält), versaler och accenter räknas som databasen räknar dem, och Markera alla visas inte, eftersom det skulle kräva att alla poster laddas.

#Åtgärder och navigering

Widget	Vad den är till för
Knapp	Den klassiska åtgärden. Visa: Ikon + text, Bara ikon eller Bara text; Åtgärd vid klick navigerar, öppnar en modal eller kör kod.
Knapp med meny	En knapp som öppnar fler alternativ. Utseende: Delad (kroppen agerar, pilen öppnar menyn), Meny eller Hamburgare. Varje alternativ kan döljas eller inaktiveras via villkor.
Länk	Klickbar text — Mål: Skärm i appen (med parametrar) eller Extern URL (med Öppna i ny flik).
Breadcrumb	”Du är här”-vägen, med klickbara nivåer och den sista nivån fast eller bunden till ett fält.
Exportera	En knapp som laddar ner data från en datastore som kalkylblad (.xlsx) — valda fält, valfri Rubrikrad och Filnamn med {date}.

Exportera läser data i samma stund som klicket, i block, upp till 50 000 rader; över det innehåller filen de första 50 000 och en varning visas. Händelsen onExport säger om filen kortades (truncated).

I KeplinGo blir filen CSV; text som Excel skulle läsa som en formel (som börjar med = eller @, till exempel) får en apostrof framför.

#Struktur

Widget	Vad den är till för
Panel	En behållare med ram och titel — samlar widgetar som sedan flyttas tillsammans.
Flikar	En behållare med flikar; varje barnwidget hör till en flik. Flikarnas stil: Ruta, Piller eller Understruken.
Fast list	En list i full bredd, fäst Överst eller vid skärmens Sidfot — för åtgärdsfält som alltid ska synas.
Linje	En avdelande linje, Horisontell eller Vertikal — färgen och strecket kommer från Utseende.

#Innehåll och media

Widget	Vad den är till för
Etikett	Enkel text — rubriker, bildtexter, lösa värden. Tar emot Värden i texten ({n} i texten).
Markdown	Rik text skriven i Markdown — fast eller hämtad från ett fält.
Bild	En bild via Fast URL, en Asset i appen eller Fält (dynamiskt); Anpassning: Innesluta, Fylla eller Sträcka.
Extern sida	Bäddar in en sida utifrån (en karta, en video, BI från tredje part) eller HTML som du skrivit. Den körs isolerat: den ser varken sessionen eller appens data.

#Data

Widget	Vad den är till för
Tabell	Rutnätet med poster — typade kolumner, sortering, markering och åtgärdsknappar. Detaljer nedan.
Lista	Poster i en lodrät lista, med fält i roller (Titel, Underrubrik, Brödtext, Undertext) och valfri bild.
Kort	Samma mall som Lista, men i ett rutnät av kort med N Kolumner.
Diagram	Uppritade serier — staplar, linjer, cirklar och mer. Detaljer nedan.
KPI	En rad numeriska indikatorer med trender, mål och sparkline. Detaljer nedan.
Filterfält	Villkor som chips (fält, operator, värde) som filtrerar en Tabell, Lista, Kort, Kanban eller ett Diagram på skärmen. Detaljer nedan.

#Tavlor och planering

Widget	Vad den är till för
Kanban	Kort som dras mellan statuskolumner. Detaljer nedan.
Kalender	Händelser i vyerna Dag/Vecka/Månad/År. Detaljer nedan.
Gantt	Staplar från start→slut med framsteg, grupper och beroenden. Detaljer nedan.

#Dokument och processer

Widget	Vad den är till för
Rapport	Visar en rapport från appen (PDF) inuti skärmen, med parametrar bundna till det som finns på skärmen och Åtgärdsfält för att uppdatera och ladda ner.
Processens status	Historiken och det aktuella steget i en posts arbetsflöden, med beslutsknappar när den öppna uppgiften tillhör den som tittar.
Mina uppgifter	Inkorgen med arbetsflödesuppgifter för den inloggade användaren — den öppnar uppgiftens skärm och beslutar därifrån.

#Tabell

Tabell är plattformens mest använda widget: den binds till en list-datastore och visar posterna i ett rutnät, med sidindelning, sortering och markering.

Sidfoten med totalen och sidpilarna visas bara när posterna inte får plats på en sida. Detsamma gäller widgetarna Lista och Kort.

Datum som kommer från API:t visas på appens språk, och en kolumn med bara dagen visar bara dagen.

#Kolumner

När du binder datastoren föds kolumnerna, en per fält. Sedan finjusterar du: under Kolumner använder du + kolumn för att lägga till, och du klickar på en kolumn på canvasen för att redigera den — inspektorn byter till den.

Varje kolumn har Rubrik, Bredd, Sorterbar via rubriken, Dold — och en Typ:

Typ	Vad den gör
Text	Värdet som det är, med valfri Mask (# = tecken).
Tal	Formaterar värdet: Tal (regionalt) (med Decimaler, Tusentalsavgränsare, Kompakt — 1,2 M i stället för 1 234 567 —, Prefix och Suffix) eller Mask (# = siffra).
Länk	Cellen blir klickbar. Mål: Skärm i appen (med parametrar från Fält från raden, URL-parameter eller Fast värde) eller Skript — din egen kod som körs vid klicket. Det är rätt kolumn för att öppna en post från listan: kolumnen som identifierar raden (namn, beskrivning, datum) leder till postens skärm med radens id; en skärm i modal- eller sidopanelläge öppnas ovanpå, och när den stängs laddas listan om.
Bild	Visar bilden vars adress eller innehåll ligger i fältet.
Fil	En nedladdningslänk till filen som fältet pekar på.
Sparkline	Ett litet diagram per rad, som Linjer eller Staplar, utan axlar eller etiketter. Serien kommer från ett Fält med lista (en lista av tal i JSON eller från API:et, eller en text som 3,5,4) eller från Flera fält på raden, en punkt per fält. Du kan välja Färg, Visa sista värdet bredvid, och en fast Skala (minimum och maximum) för att jämföra rader med varandra. Den här kolumnen sorteras inte från rubriken.

En kolumn för ett relationsfält (kund.namn) sorterar inte via rubriken: sorteringen körs på servern, som bara känner till tabellens egna fält.

#Tabellens åtgärder

I kategorin Beteende skapar åtgärdsavsnittet CRUD-knapparna: Uppdatera, Lägg till ny, Redigera post, Ta bort post och Ta bort flera. Varje påslagen åtgärd skapar en fristående knapp på canvasen, kopplad till tabellen — du placerar och stylar den knappen som vilken annan som helst.

• Lägg till ny och Redigera post öppnar en skärm eller en modal som du väljer (vanligtvis postens formulär), med parametrarna ifyllda från raden.
• Redigera post och Ta bort post blir bara aktiva när en rad är markerad; Ta bort flera arbetar mot Flerval (reglaget som lägger till kryssrutornas kolumn).
• De åtgärder som skriver kräver att datastoren har en primärnyckel — inspektorn varnar: Datastoren behöver en primärnyckel.

#Formulär (inmatningsfält + post + validering)

Det finns ingen ”formulär”-widget: ett formulär är summan av tre delar, och det är den friheten som låter dig rita kortet precis som du vill.

1. Skapa en post-datastore på skärmen (se Datastorer och data) — till exempel conta, laddad via nyckeln som kommer från ruttens parameter id.
2. Dra dit formulärfälten (Textruta, Listruta, Datum…) och bind i vart och ett Databindning till rätt fält i datastoren.
3. Sätt dit en Knapp ”Spara” vars händelse sparar datastoren — den fördefinierade åtgärden Spara datastore i händelseredigeraren skriver koden åt dig (se Händelser och SDK:t).

Valideringen bor i varje fält, i kategorin Validering:

• Obligatoriskt — fältet måste vara ifyllt.
• Standardreglerna: Min tecken, Max tecken, Är e-post, Är telefonnummer, Är tal, Min värde, Max värde, Mönster (regex) och Lika med fältet (lösenordsbekräftelse, till exempel).
• Validering med skript — för din egen logik: koden tar emot value (fältets aktuella värde) och returnerar true om det är giltigt, eller felmeddelandet. Ett organisationsnummer, ett IBAN, en affärsregel.

Vid sparning körs hela valideringen: obligatoriska först, sedan reglerna, sedan skriptet. Posten går bara vidare om allt passerar.

Ett fält med fel får en röd kant, och meddelandet visas under det, i utrymmet mellan widgetarna. Fältet och dess etikett stannar på sin plats. För att meddelandet ska synas helt, lämna minst 16 pixlar mellan ett fält och widgeten under det, och mellan ett fält och nederkanten på panelen eller fliken som innehåller det.

#Diagram

Diagram binds till en datastore och ritar serier. Under Diagramtyp väljer du: Staplar, Linje, Yta, Cirkel/Donut, Punkt, Radar, Mätare, Tratt eller Värmekarta.

Det väsentliga är mappningen, i kategorin Data:

• Kategorifält (X-axel/sektorer) — det som skiljer staplarna eller sektorerna åt.
• Värdefält — ett eller flera numeriska fält; vart och ett är en serie.
• Seriefält (gruppering) — ett alternativ till flera värden: det pivoterar på det första värdefältet och skapar en serie per distinkt värde (utan värden räknas poster).

Och sedan finishen:

Alternativ	Vad det gör
Staplat, Horisontell, Mjuka linjer, Värden vid punkterna	Variationer på ritningen, beroende på typen.
Förklaring, Förklaringens position, Verktygstips	Diagrammets ram. Förklaringen går också att dra direkt i diagrammet för att placera den.
Värdeformat	Samma format som tabellens Tal-kolumner, applicerat på axlar, etiketter och verktygstips.
Värdeskala	Linjär eller Logaritmisk — den logaritmiska hjälper när serierna har olika storleksordningar.
Använd en andra axel	En axel till höger med egen skala — för att sätta en summa i kronor och ett antal i samma diagram.
Serier	Typ per serie (kombinationer av staplar och linjer) och vilka serier som går till den andra axeln.
Avancerade alternativ	En kodredigerare med alla egenskaper i diagrammotorn, med autokomplettering — de läggs ovanpå konfigurationen, för de fall som fälten inte täcker.

#KPI

KPI är en rad indikatorer — fyra tal sida vid sida görs med en widget med fyra indikatorer, inte med fyra widgetar: justeringen och avstånden blir då garanterade.

Varje indikator (under Indikatorer ▸ Lägg till indikator) har:

• Etikett och ikon, med Etikettens placering (Ovanför värdet / Under värdet).
• Värde (fält) + Aggregering (Summa, Medelvärde, Antal, Max, Min, Första, Sista) över datamängden — eller ett Manuellt värde när det inte finns några bundna data.
• Trender (Lägg till trend) — jämförelser under talet, med Referensfält, formatet Procent eller Absolut värde, och Lägre är bättre (kastar om färgerna): på en växande skuld måste pilen vara röd.
• Mål — Inget mål, Manuellt värde eller Fält från datakällan, med valfri Förloppsindikator.
• Visa sparkline — historikens minilinje, med Seriefält.
• Period (från fält) — vilket bokslut talet gäller (ett ISO-datum visas som MM/ÅÅÅÅ).

Datamängden delas av widgeten, men varje indikator kan ha en Egen datamängd.

#Kanban

Kanban visar posterna som kort i kolumner — pipelinen med affärsmöjligheter i Kundhantering är en kanban per status.

1. Bind datastoren och välj Statusfält (kolumn) — fältet som säger vilken kolumn varje kort ligger i.
2. Ange Kolumnernas källa: Statisk (du lägger till varje kolumn med Etikett, Värde och färg) eller Enum (kolumnerna kommer från värdena i en enum i modellen).
3. Komponera Kortmallen — fälten och rollerna, som i Lista.

Med Tillåt att kort dras påslaget sparar en flytt av ett kort den nya statusen i posten direkt. Ordningsfält (ett numeriskt fält) gör ordningen inom kolumnen bestående. Kolumn för utan kategori fångar upp de poster vars status inte matchar någon kolumn; Antal kort visar totalen i rubriken.

Åtgärderna: Klick på ett kort (redigera) och Skapa kort (knapp i kolumnen) — var och en kan navigera till en skärm, öppna en modal (med parametrar från raden och kolumnen) eller utlösa en händelse för din egen kod.

#Kalender

Kalender visar poster med datum som händelser, i vyerna Dag, Vecka, Månad och År.

• Fält: Datumfält (start), Slutfält (valfritt) (flerdagshändelser), Titelfält.
• Händelsernas färg: En färg eller Per fält — med en karta värde → färg (en typ-enum, till exempel).
• Vy: Startvy, Tillgängliga vyer, Veckans första dag (Måndag/Söndag), Max händelser per dag i månadsvyn, klockslag för Start/Slut i dags- och veckovyerna, Navigeringsfält och Knappar för att byta vy.
• Åtgärder: Klick på en händelse (redigera) och Val av dag eller intervall (skapa) — start och slut följer med till målskärmen som parametrar, redo att förifylla skapandeformuläret.

Kalendern laddar bara posterna i det synliga intervallet — att byta månad hämtar den nya månaden, inte hela tabellen.

#Gantt

Gantt ritar staplar från start→slut på en tidslinje — projektplanering, kampanjer, kundintroduktion.

• Fält: Startfält, Slutfält, Etikettfält, Framstegsfält (0–100) och Grupperingsfält (grupperar rader).
• Beroendefält — föregångarnas id (primärnyckel), som JSON-lista eller kommaseparerade; Gantt ritar pilarna.
• Startzoom (Dag, Vecka, Månad), Linje för idag och Skugga helger.
• Åtgärder: Klick på en stapel (redigera) och Klick på tom yta (skapa) — det klickade datumet följer med som parameter.

Gantt är till för att läsas: staplarna dras inte — datumen ändras i postens formulär.

#Filterfältet

Filterfältet låter de som använder appen filtrera en lista på vilket fält som helst, utan att du ritar ett filterfält per kolumn. Det ligger ovanför en Tabell, Lista, Kort, Kanban eller ett Diagram och skriver villkoren som chips.

1. Dra Filterfältet till skärmen och välj under Data Målwidget — listwidgeten vars datastore tar emot villkoren.
2. Under Filtrerbara fält väljer du de fält som ska erbjudas. Utan val erbjuder fältet alla enkla fält i målets datastore; tabellens kolumnrubriker används som etiketter. Relationsfält (kund.namn) erbjuds inte: filtret körs på servern, som bara känner till tabellens egna fält.
3. Valfritt: under Synliga värden väljer du hur många föreslagna värden listan visar åt gången (10 som standard; 0 visar alla). Sökningen går alltid igenom alla värden, och en sidfot anger hur många de är. I värdesteget öppnar förstoringsglaset i sidfoten valfönstret med alla fältets värden.

I appen skrivs varje villkor i tre steg, alltid synliga: fältet, operatorn och värdet. Nästa stegs alternativ visas av sig själva; att skriva filtrerar dem. Föreslagna värden kommer från den laddade datan, men det du skriver räknas alltid, även om det inte finns i listan.

Operatorerna beror på fälttypen: text (innehåller, lika med, börjar med…), tal och datum (jämförelser) samt listor (lika med, inte lika med). Någon av och ingen av tar flera värden i samma chip: varje val läggs till, och Enter eller Tillämpa stänger villkoret. Ett chips × tar bort det villkoret; fältets × rensar allt.

När ett villkor stängs öppnas listan inte igen av sig själv: fältet står redo för skrivning. För ett filter till, skriv, klicka på fältet eller tryck på ↓.

Villkoren läggs till målets datastore-villkor (Filter (where)) och begäran går till servern med sidindelning — filtrering hämtar aldrig hela tabellen. Widgetbundna filter (en Lista kopplad till ett datastore-villkor) finns kvar och kan leva på samma skärm: den snabba rullgardinsmenyn för det mest använda filtret, fältet för allt annat.

I datumfält skriver du värdet som det läses: ”26/09/2026”, ”26-09-2026”, ”26.09.2026” eller ”2026-09-26”, med eller utan tid. När dag och månad kan förväxlas kommer dagen först. Ett datum utan tid gäller hela dagen: högst 2026-09-26 tar med den dagens poster, och större än 2026-09-26 börjar dagen efter. Inte lika med och ingen av tar med poster där fältet är tomt.

#Varför inte…?

• Varför dyker avsnittet Validering inte upp i min widget? Bara formulärfält validerar — en Knapp eller en Etikett har inget värde att validera.
• Varför syns widgeten i paletten men grå på canvasen? Den är inaktiverad (reglaget Aktiv i kategorin Layout) eller så har en regel eller händelse inaktiverat den.
• Varför ser jag inga data på canvasen? Canvasen visar exempeldata — de riktiga data dyker upp i förhandsgranskningen och i den publicerade appen. Kontrollera bindningen i kapitlet Datastorer och data.
• Varför säger Filterfältet "Ingen målwidget"? Målwidget saknas under Data — bara widgetar med en list-datastore (Tabell, Lista, Kort, Kanban, Diagram) kan vara mål.