Komponenter
Våra komponenter
Vi använder olika typer av standardkomponenter för utveckling av de olika delarna i ett inrapporteringsformulär eller på startsidor.
RCC-React
Vid utveckling av våra inrapporteringsformulär och startsidor använder vi React och främst vårt egna ramverk RCC-React. Vi har tagit fram gemensamma komponenter i RCC-React som effektiviserar vårt arbete och hjälper oss att skapa upp inrapporteringsformulär och startsidor snabbare. RCC-React är ett ramverk som kontinuerligt vidareutvecklas och uppdateras med nya versioner.
Utvecklare hittar information om de olika komponenterna i rcc-react storybook och i dess repo på Bitbucket.
I den här delprofilen informerar vi om hur de olika standardkomponenterna ska användas och vid vilka tillfällen.
Inrapporteringsformulär
Inrapporteringsformulären är till för att rapportera in data till det specifika registret. Formulären är responsiva med en maxbredd på 1200px. Vi placerar obligatoriska delar i en viss ordning som varje inrapporteringsformulär måste följa:
- Tumörpanel (För rollen monitor oftast i formulärtypen Anmälan).
- Registernamn – Formulärsnamn.
- Personuppgifter.
- Inrapporteringsuppgifter med kompletteringsruta som ligger sist i blocket.*
- Övriga registerspecifika block.
*Block benämns ibland som panel.
Inrapporteringsformulär för rollen inrapportör i Kolorektalcancerregistret.
Text och färg
Formulären använder sig av typsnittet Roboto. Rubrikerna har en tjocklek som är medium och använder textfärgen #333333.
Specifika funktioner för rollen monitor
En del funktionalitet och komponenter ska endast användas för rollen monitor.
Monitorkryssruta och specifika fält
För rollen monitor syns en kryssruta bredvid alla inputfält. Den används när monitor vill markera vilka fält som ska sparas ner i registret.
Monitor har även fält som syns endast för den rollen. Inputfältens labeltext har samma blå färg som monitorkryssrutan.
MarkeraAvmarkera
Monitor har en komponent som heter ”MarkeraAvmarkera” . Denna komponent markerar eller avmarkerar monitors kryssrutor.
Tumörpanelen
Komponenten Tumorpanel används för att mappa olika värden från variabler i formuläret till cancerregistret. Det här blocket syns endast för rollen monitor.
Exempelbild på Tumörpanelen från rcc-react:s storybook.
Huvudkomponenten
Komponenten Question är den vanligaste komponenten i ramverket.
Den används till datatyperna:
- Textfält
- Med knapp till vänster
- Och till höger
- Längre textfält
- Kryssruta
- Datum
- Heltal
- Decimaltal
Nedan ser vi flera Question-komponenter med olika datatyper. Vi har en regel att avståndet mellan inputfälten är 10px, vilket skapar mer överskådlighet.
Listkomponenter
Det finnns tre olika typer av listkomponenter.
DropdownList
En lista kan få en sökfunktion genom att lägga på en componentClass property på komponenten Question. Komponenten kan då också fungera fristående, vilket är användbart om utvecklare behöver modifiera komponenten.
Det finns även en sökfunktion i komponenten ReportingPositionSelector, men denna agerar som en egen komponent. Sökfälten ser likadana ut i både ReportingPositionSelector och DropdownList.
DropdownList används vid väldigt långa listor, och i regel alltid när en lista har fler än 15 listvärden.
ListButtonGroup
Den här typen av lista bör användas vid en "JaNej"-lista och andra korta listor. Den får inte användas vid längre listor, eller för listor med mycket långa beskrivningar på listvärden.
I komponenten ListbuttonGroup får ett valt värde en infoblå färg, men som skiljer sig något från knapptypen Info. Se färger nedan.
- Bakgrundsfärg hover: defaultgrå
- Bakgrundsfärg aktiv: info
- Borderfärg aktiv: #008FC4
Exempel ListButtonGroup
ListButtonGroup får inte användas vid långa listor eller där listvärdesbeskrivningarna är långa. I de här exemplen ser vi samma data presenterat på tre olika sätt. Eftersom att ett av listvärdena har en lång beskrivning gör det sig inte bra att använda en ListButtonGroup (exempel 3). Om vi däremot gör en vertikal ListButtonGroup istället fungerar det bra (exempel 2). Alternativt kan vi presentera data i en vanlig Question (exempel 1).
Exempel 1
Exempel 2
Exempel 3
Flervalskomponenter
Det finns två olika typer av MultiBoolkomponenter. Båda komponenterna består av flera bool-variabler. Användare kan välja flera alternativ i båda komponenterna.
MultiBoolGroup
Komponenten MultiBoolGroup är väldigt lik ListButtonGroup till utseendet, men de skiljer sig åt eftersom ListButtonGroup är en lista där användaren bara kan välja ett alternativ. MultiBoolGroup är flera bool-variabler som visas upp och användaren kan välja flera alternativ.
- Binjure
- CNS
- Lever
- Lunga
Ikryssat fält
- Bakgrundsfärg: info 20%
- Större kryssruta, info 20% shaded (mörkare)
- Textfärg: #333333
MultiBoolQuestion
Komponenten MultiBoolQuestion visar flera bool-variabler som en lista.
Questions nedan visas enbart för att demonstrera effekten av komponenten MultiBoolQuestion.
Hovrad rad
- Bakgrundsfärg: info 20%
- Borderfärg: primary 80%
- Textfärg: #333333
Importera data
Integrator
Komponenten Integrator kan användas för att importera och visa upp data från en extern källa i ett formulär.
Notera den gröna markeringsfärgen på fälten. Samma markeringsfärg ska användas till listkomponenter som har importerad data, såsom MultiboolGroup. Märk även ikonen, check (utan cirkel), som används när det inte rör sig om en knapp eller label (se Specialfall: circle-check) och som ligger utanför fälten och visar att data har importerats.
Fält med importerad data
- Markeringsfärg: success 20%
- Ibockad kryssruta: success
- Textfärg: #333333
Undertabellskomponenter
I denna delprofil beskrivs tre olika typer av undertabellskomponenter.
SubTableAccordion
Komponenten SubTableAccordion visar en undertabell som ett block. Den hämtar alla undertabeller och visar upp dess variabler i utfällbara block.
Rad: 431901
Rad: 431902
SubTableList
SubTableList liknar SubTableAccordion, men istället för flera separata block grupperas undertabellerna i olika sektioner i ett och samma block.
Rad: 431901
Rad: 431902
SubTableTabs
Komponenten SubTableTabs är en flikkomponent där varje flik är en undertabell.
SubTableTabs - Registerpostflikar
Varje register har en egen registerpost. En registerpost innehåller nedsparad data i ett register, oftast från flera olika formulär. Därför är det vanligt att vi använder komponenten SubTableTabs för registerposten, där varje flik motsvarar ett formulär.
Rad: 431901
Typ 1
Komponenten SubTableTabs med tillagd styling av registerpost.
Rad: 431901
Typ 2
Komponenten SubTableTabs med tillagd styling för statusstyrning.
Tabellkomponent
Grid
Komponenten Grid är en tabellkomponent som används för att visa upp viss data ur en registerpost. Användaren kan klicka var som helst på en vald rad och en aktivitet sker. Exempelvis kan en modal öppnas med mer information om den specifika registerposten.
Inrapporteringsdatum | ||
|---|---|---|
| Test | 2024-01-11 | |
| Test | 2024-01-15 |
Övriga standardkomponenter
Här beskrivs ytterligare ett antal komponenter som används i formulären.
Personuppgifter
Den här komponenten utgör ett informationsblock som visar patientdata hämtad från INCA. Användaren kan endast läsa informationen och behöver inte ange något själv.
En grön label används vid levande patient och en röd label vid avliden patient.
Completion
Completion är en komponent för att komplementera kompletteringsrutan.
Explanation
Explanation är en komponent som används om man vill specialanpassa hjälptexten för en info-ikon bredvid en specifik variabel. När man klickar på ikonen dyker hjälptexten upp.
ValidationGroup
ValidationGroup är en komponent som kan styra om det ska visas en inforuta eller ett valideringsmeddelande.
Exempel 1: Inforuta
Exempel 2: Valideringsmeddelande
IntegratedManualSelect
IntegratedManualSelect är en modal som visar en lista där användaren kan få mer information och välja ett listvärde.
FontAwesome
FontAwesome är en komponent som används för att visa ikoner.