Flytteformular – Dokumentation

Denne side beskriver det komplette flow for flytteformularen i Modstrøm-appen, inklusiv de tre formflows, deres fields, betingede sektioner og de Bemærkninger som kun fremgår af eksempel-JSON'erne (ikke fra live endpoints).

1. Overblik – tre formflows

2. GetFormData endpoint

Formdata hentes fra dette endpoint – skift formGuid til det relevante guid:

GET https://dev.modstroem.dk/umbraco/api/ModstroemApp/GetFormData
    ?formGuid=d62e6f71-2299-4e37-8336-fc1c75bb3d3f

3. Step 1 – Vælg adresse og fraflytningsdato

Adresserne hentes fra kundens eksisterende aftaler via GetAgreements.

4. Flow A – Jeg ønsker at fortsætte min aftale hos Modstrøm

5. Flow B – Jeg ønsker at opsige min aftale hos Modstrøm

6. Flow C – Jeg er allerede kunde på min nye adresse

7. Fælles elementer på tværs af flows

Label-felter (ikke brugerinput — vises som informationspaneler)

Ikoner

8. Succes-skærm

Vises efter succesfuld indsendelse for alle tre flows:

CTA-knap: Tilbage til Aftaler

9. cURL-eksempler – GetFormData

# Flow A – Fortsætte
curl "https://dev.modstroem.dk/umbraco/api/ModstroemApp/GetFormData \
     ?formGuid=d62e6f71-2299-4e37-8336-fc1c75bb3d3f"

# Flow B – Opsige
curl "https://dev.modstroem.dk/umbraco/api/ModstroemApp/GetFormData \
     ?formGuid=47b0bfc4-8194-43e3-9af1-c379814d248b"

# Flow C – Allerede kunde
curl "https://dev.modstroem.dk/umbraco/api/ModstroemApp/GetFormData \
     ?formGuid=fbae8332-0e86-4558-8845-90150e953a72"

10. SubmitForm – indsendelse til endpoint

Når brugeren klikker Send, POSTes data til:

POST {saveUrl}/umbraco/api/ModstroemApp/SubmitForm
Content-Type: application/json

Payload-struktur:

{
  "formGuid": "<det valgte flow's formGuid>",
  "values": {
    "<alias>": "<value>",
    ...
  }
}

Flow A – Fortsætte (ejer-eksempel)

curl -X POST "https://dev.modstroem.dk/umbraco/api/ModstroemApp/SubmitForm" \
  -H "Content-Type: application/json" \
  -d '{
    "formGuid": "d62e6f71-2299-4e37-8336-fc1c75bb3d3f",
    "values": {
      "kundenummer":          "174777",
      "kontraktnummer":       "885162",
      "kundetype":            "privat",
      "fraflytningsadresse":  "Tåsingegade 64 4. tv, 2100 København Ø",
      "fraflytningsdato":     "2026-10-24",
      "product":              "E19F93CC-8A31-4432-AB10-9398C1022444",
      "tilflytningsadresse":  "Egemosevej 40, 4571 Grevinge",
      "tilflytningsdato":     "2026-10-25",
      "streetName":           "Egemosevej",
      "houseNumber":          "40",
      "floor":                "",
      "door":                 "",
      "subCity":              "",
      "zipCode":              "4571",
      "cityName":             "Grevinge",
      "ejer":                 "true",
      "udlejer":              "false",
      "ejerName":             "Hans Hansen",
      "ejerTelefon":          "12345678",
      "ejerEmail":            "hans@example.dk"
    }
  }'

Flow A – Fortsætte (udlejer-eksempel, virksomhed)

curl -X POST "https://dev.modstroem.dk/umbraco/api/ModstroemApp/SubmitForm" \
  -H "Content-Type: application/json" \
  -d '{
    "formGuid": "d62e6f71-2299-4e37-8336-fc1c75bb3d3f",
    "values": {
      "kundenummer":          "174777",
      "kontraktnummer":       "885162",
      "kundetype":            "privat",
      "fraflytningsadresse":  "Tåsingegade 64 4. tv, 2100 København Ø",
      "fraflytningsdato":     "2026-10-24",
      "product":              "E19F93CC-8A31-4432-AB10-9398C1022444",
      "tilflytningsadresse":  "Egemosevej 40, 4571 Grevinge",
      "tilflytningsdato":     "2026-10-25",
      "streetName":           "Egemosevej",
      "houseNumber":          "40",
      "zipCode":              "4571",
      "cityName":             "Grevinge",
      "ejer":                 "false",
      "udlejer":              "true",
      "udlejerValg":          "Virksomhed",
      "udlejerFirmanavn":     "Firma A/S",
      "cVR":                  "12345678",
      "udlejerTelefon":       "87654321",
      "udlejerEmail":         "firma@example.dk"
    }
  }'

Flow B – Opsige (tilbud afvist)

curl -X POST "https://dev.modstroem.dk/umbraco/api/ModstroemApp/SubmitForm" \
  -H "Content-Type: application/json" \
  -d '{
    "formGuid": "47b0bfc4-8194-43e3-9af1-c379814d248b",
    "values": {
      "kundenummer":          "174777",
      "kontraktnummer":       "885162",
      "kundetype":            "privat",
      "fraflytningsadresse":  "Tåsingegade 64 4. tv, 2100 København Ø",
      "fraflytningsdato":     "2026-10-24",
      "rabat":                "-500",
      "tilbud":               "false",
      "arsag":                "Jeg har fundet en udbyder med lavere pris pr. kWh",
      "ejer":                 "true",
      "udlejer":              "false",
      "ejerName":             "Hans Hansen",
      "ejerTelefon":          "12345678",
      "ejerEmail":            "hans@example.dk"
    }
  }'

Flow B – Opsige (tilbud accepteret → tilflytning)

curl -X POST "https://dev.modstroem.dk/umbraco/api/ModstroemApp/SubmitForm" \
  -H "Content-Type: application/json" \
  -d '{
    "formGuid": "47b0bfc4-8194-43e3-9af1-c379814d248b",
    "values": {
      "kundenummer":          "174777",
      "kontraktnummer":       "885162",
      "kundetype":            "privat",
      "fraflytningsadresse":  "Tåsingegade 64 4. tv, 2100 København Ø",
      "fraflytningsdato":     "2026-10-24",
      "rabat":                "-500",
      "tilbud":               "true",
      "tilflytningsadresse":  "Egemosevej 40, 4571 Grevinge",
      "tilflytningsdato":     "2026-10-25",
      "streetName":           "Egemosevej",
      "houseNumber":          "40",
      "zipCode":              "4571",
      "cityName":             "Grevinge",
      "ejer":                 "true",
      "udlejer":              "false",
      "ejerName":             "Hans Hansen",
      "ejerTelefon":          "12345678",
      "ejerEmail":            "hans@example.dk"
    }
  }'

Flow C – Allerede kunde

curl -X POST "https://dev.modstroem.dk/umbraco/api/ModstroemApp/SubmitForm" \
  -H "Content-Type: application/json" \
  -d '{
    "formGuid": "fbae8332-0e86-4558-8845-90150e953a72",
    "values": {
      "kundenummer":          "174777",
      "kontraktnummer":       "885162",
      "kundetype":            "privat",
      "fraflytningsadresse":  "Tåsingegade 64 4. tv, 2100 København Ø",
      "fraflytningsdato":     "2026-10-24",
      "ejer":                 "false",
      "udlejer":              "true",
      "udlejerValg":          "Privatperson",
      "udlejerNavn":          "Hans Hansen",
      "udlejerTelefon":       "12345678",
      "udlejerEmail":         "hans@example.dk"
    }
  }'

JS payload-regler

11. Bygghistorik – prompts brugt til at generere flytteform.html

Nedenstående er de prompts der blev brugt til at generere og iterere på flytteform.html, i kronologisk rækkefølge:

1. "create new page called: flytteform.html and place link to it in top along with: dokumentation and download example application"
2. "stop, its an entire new page, which is unrelated to existing pages"
   Præcisering: siden skal bygges fra bunden uden relation til tilmeldingsformularen.
3. (Upload af 6 filer: Flyttefomular.docx, 3 JSON-filer, adresser.png, formflow.png)
   "setup according to spec in word file. first step is adresse.png, use dummy addresses for options. Add hidden fields for kundetype, kontraktnummer, kundenummer, product. when selecting an address show a datepicker. when clicking Næste show options.png. then get form data from endpoint, differentiate on specified formguids and show flow like shown on formflow.png. The json for each formguid has fields like these, capture values from first step addresses and fill in these hidden fields. build rest of form flow based on elements from json"
4. "for first form flow, dont show: Alias: produktion, Alias: energitjek — for Opsig din aftale. I cant select name=tilbud"
5. "still cant click them [tilbud options]. If an icon exists use it like this: add domain https://www.modstroem.dk — and use these images [heart.svg, hustype.svg with hover variants]"
6. "for option Jeg ønsker at fortsætte — use attached image [hover SVGs from /assets/images/svg/Flytteblanket/]"
   Specificerede de tre billedpar for step 2-kortene med CSS hover-swap effekt.
7. "use word and jsons, notice the Bemærkninger under elements to create specific dokumentation for flytteformular"
   Resulterede i denne fil: flytning-dokumentation.html.
8. "could we not prefix fields [hidden fields like h3b-kundenummer] — if needed its okay to create 3 different pages, but I prefer one page"
   Løsning: wrappede hvert step i en <form id="form3x"> og brugte form.querySelector('[name="alias"]') i stedet for getElementById med præfiks.
9. "in order to submit we have endpoint like this — curl POST SubmitForm — we need to make sure that the fields we send dont have prefixes so they can be picked up in our umbraco form flow"
   Upload af C#-workflow-koden (FlytteblanketMinSideFlow.cs). Resulterede i collectFormValues-funktionen og SubmitForm POST-kaldet.
10. "adressevaelger CORS error + form submitting to query string instead of endpoint — i dont get any error but when i submit i am returned to first step"
    Fix: tilføjede e.preventDefault() og type="button" på Send-knapperne for at forhindre native form POST.
11. "i tested this endpoint and it works [curl med ejer:true] — getting 400 Bad Request"
    Fix: backenden forventer to separate booleanske felter (ejer og udlejer) — ikke ét kombineret felt. Tilføjede begge hidden inputs og satte dem korrekt i setupEjerforhold.