Komponent

FWizard , FWizardStep

Status

Produktionsklar

Steg för steg-guide används för att dela upp en uppgift i några få steg som passar bra att hantera i en viss ordning.

<template>
    <div>
        <f-wizard v-model="current" header-tag="h2" @completed="onCompleted">
            <f-wizard-step key="foo" :use-error-list="false" title="Stegrubrik 1">
                <f-text-field v-validation.required.maxLength="{ maxLength: { length: 100 } }">
                    Etikett-rubrik
                </f-text-field>
                <f-text-field v-validation.maxLength="{ maxLength: { length: 100 } }">
                    Etikett-rubrik (frivillig)
                </f-text-field>
            </f-wizard-step>

            <f-wizard-step key="bar" :use-error-list="false" title="Stegrubrik 2">
                <f-datepicker-field v-model="date" v-validation.required>
                    Etikett-rubrik
                </f-datepicker-field>
                <f-select-field v-model="options" v-validation.required>
                    <template #label> Etikett-rubrik </template>

                    <option :disabled="true" value="">Välj</option>
                    <option value="ALTERNATIV1">Alternativ 1</option>
                    <option value="ALTERNATIV2">Alternativ 2</option>
                </f-select-field>
            </f-wizard-step>
            <f-wizard-step key="baz" :use-error-list="false" title="Stegrubrik 3">
                En informationstext
                <template #next-button-text> Klar </template>
            </f-wizard-step>
        </f-wizard>
        <p v-if="done">Allt är ifyllt</p>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FWizard, FWizardStep, FTextField, FDatepickerField, FSelectField } from "@fkui/vue";

export default defineComponent({
    name: "WizardExampleDefault",
    components: { FWizard, FWizardStep, FTextField, FDatepickerField, FSelectField },
    data() {
        return {
            current: null,
            visible: true,
            done: false,
            date: "",
            options: "",
        };
    },
    methods: {
        onCompleted() {
            this.done = true;
        },
    },
});
</script>

Använd steg för steg för att dela upp en större uppgift som användaren ska utföra. Då kan användaren fokusera på en sak i taget istället för att bli överöst med information och val.

• Använd så få steg som möjligt, helst inte fler än 5 eller 6.
• Ett steg ska innehålla en eller några få enkla val eller kortfattad information.
• Antalet steg ska vara fast och inte ändras beroende på val användaren gör i ett steg.
• Rubrikerna för stegen måste följa korrekt rubriknivå för sidan.
• Om ett steg innehåller ett formulär måste det vara komplett och rätt ifyllt innan användaren tillåtas att fortsätta till nästa steg.

Stegens storlek och omfattning

Ett steg ska innehålla en eller några få enkla val eller kortfattad information. Fokusera på en huvudfråga eller ett tydligt område. Ett steg bör ha en kort och konkret rubrik.

Innehåll och frågor som inte passar under en och samma rubrik ska inte placeras i samma steg. Om innehållet i ett steg behöver delas upp med underrubriker bör du antagligen dela upp steget i flera steg.

När steg för steg inte passar

• När uppgifterna vi presenterar inte har en naturlig följd.
• När vi har väldigt omfattande uppgifter som resulterar i många och långa steg.
• När något av stegen tar väldigt lång tid att fylla i, i kombination med att steget blir omfattande, till exempel att användarens val skapar långa listor eller tabeller.

Copyriktlinjer

Stegrubriker

• Syftar i första hand till att hjälpa till att dela in flödet i mindre delar.
• Ska ha relevant copy men inte bära hela innehållet i delen - det gör till exempel etikettrubrikerna om ett steg innehåller ett formulär.
• Ska ge användaren en snabb översikt över det enskilda steget och även en tydlig översikt över flödet.
• Ska vara så kortfattade som möjligt.
• Bör bestå av konkreta substantiv som till exempel Dagar, Bostad, Sjukdom och symtom.
• ”Kompletterande uppgifter” och ”Övrigt” ska undvikas. Om det är svårt att skriva en lämplig rubrik på grund av att innehållet spretar bör du se över indelningen i steg.

Knapptexter

• Standardtexten på primärknappen är Fortsätt, men det går att sätta en text på primärknappen i varje steg (next-button-text).
• Standardtexten på sekundärknappen är Avbryt, men det går att sätta en text på sekundärknappen i varje steg (cancel-button-text).

För utvecklare

En guide består av <f-wizard> och en eller fler guidesteg <f-wizard-step>.

<f-wizard header-tag="h2">
    <f-wizard-step key="unique-identifier" title="Beskrivande titel">
        <template #default>Innehåll</template>
    </f-wizard-step>
</f-wizard>

Inmatningsfälten valideras redan med vanlig validering, men om du behöver utföra extra validering (manuella steg, korsvalidering eller validering på backend osv) så kan du använda beforeSubmit:

<f-wizard header-tag="h1">
    <f-wizard-step
        key="step1"
        title="STEP1"
        :before-next="onBeforeNext"
    ></f-wizard-step>
</f-wizard>

Notera att det är metoden onBeforeNext som ska skickas in i sin helhelt, anropa inte metoden med :before-next="onBeforeNext()". I onBeforeNext har du möjlighet att sätta nya valideringsfel på inmatningsfält:

onBeforeNext(): void {
    const myField = getElementFromVueRef(this.$refs.myField);
    ValidationService.setError(myField, "This value is invalid!");
},

Vi rekommenderar att alla fel är kopplade till ett specifikt inmatningsfält men om du istället vill avbryta inskicket och presentera ett fel med exempelvis en meddeladeruta kan du returnera FWizardStepAction.CANCEL från onBeforeNext:

onBeforeNext(): FWizardStepAction {
    this.showErrorMessage = true;
    return FWizardStepAction.CANCEL;
},

Lägga till steg dynamiskt

<template>
    <div>
        <f-wizard
            v-model="current"
            header-tag="h2"
            disable-initial-focus
            @completed="onCompleted"
            @cancel="onCancel"
        >
            <f-wizard-step key="fruktkorg-antal" v-test="'myOrderStep'" title="Min beställning">
                <h3>Fruktkorg</h3>
                <button type="button" class="button button--discrete" @click="addBasket">
                    <f-icon class="button__icon" name="plus" /> Lägg till fruktkorg
                </button>
            </f-wizard-step>

            <f-wizard-step
                v-for="item in fruktkorgar"
                :key="'fruktkorg-' + item.id"
                :title="'Frukt korg ' + item.id"
                :data-test="'fruitBasketStep-' + item.id"
            >
                <f-text-field
                    v-model="item.namn"
                    v-validation.required.maxLength="{ maxLength: { length: 100 } }"
                >
                    Namn på presentkort
                </f-text-field>

                <f-fieldset id="frukt-checkbox-group" v-validation.required>
                    <template #label> Vad ska ingå i din fruktkorg? </template>

                    <f-checkbox-field
                        v-for="frukt in frukter"
                        :key="frukt.value"
                        v-model="item.valdaFrukter"
                        :value="frukt.value"
                    >
                        {{ frukt.text }}
                    </f-checkbox-field>
                </f-fieldset>

                <button type="button" class="button button--discrete" @click="removeBasket(item)">
                    <f-icon name="trashcan" /> Ta bort fruktkorg
                </button>
            </f-wizard-step>

            <f-wizard-step
                key="baz"
                v-test="'myInfoStep'"
                title="Mina uppgifter"
                @before-next="onBeforeNext"
            >
                <p>Min adress</p>
            </f-wizard-step>
        </f-wizard>

        <!-- [html-validate-disable-next no-inline-style] -->
        <p style="margin-top: 30px">
            Ett steg kan öppnas programatiskt, t.ex. man klickar 'ändra' i ett granska-steg.
            <button type="button" @click="current = 'baz'">Öppna sista steget</button>
        </p>
        <pre>v-model: {{ current }}</pre>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FWizard, FWizardStep, FTextField, FIcon, FFieldset, FCheckboxField } from "@fkui/vue";

export default defineComponent({
    name: "WizardExample",
    components: { FWizard, FWizardStep, FTextField, FIcon, FFieldset, FCheckboxField },
    data() {
        return {
            current: null,
            visible: true,
            fruktkorgar: [],
            n: 1,
            frukter: [
                { value: "BANAN", text: "Banan 🍌" },
                { value: "ÄPPLE", text: "Äpple 🍏" },
                { value: "MANDARIN", text: "Mandarin 🍊" },
                { value: "ANANAS", text: "Ananas 🍍" },
                { value: "VATTENMELON", text: "Vattenmelon 🍉" },
                { value: "ANDRA_FRUKTER", text: "Andra frukter" },
            ],
        };
    },
    methods: {
        addBasket() {
            this.fruktkorgar.push({
                id: this.n++,
                valdaFrukter: [],
            });
        },
        removeBasket(item) {
            const index = this.fruktkorgar.findIndex((it) => it.id === item.id);
            if (index >= 0) {
                this.fruktkorgar.splice(index, 1);
            }
        },
        onBeforeNext() {
            return new Promise((resolve) => {
                console.log("Här kanska man anropar backend för att kontrollera något?");
                setTimeout(resolve, 2000);
            });
        },
        onCompleted() {
            alert("Tack för din beställning! 🙏 Applikationsspecifik logik tar det vidare.");
        },
        onCancel() {
            alert(
                "Avbryt anropat av användaren. Applikationsspecifik logik tar hand om eventuell bekräftelse.",
            );
        },
    },
});
</script>

Props, Events & Slots

FWizard

Props

v-model: string Optional

‐

Default: null

headerTag: string

Element to render for the header element inside the wizard steps.

disableInitialFocus: boolean Optional

When the first wizard step is registered, it is opened and focused by default. Set this property to disable that behaviour.

Default: false

Events

cancel

Emitted when wizard is canceled, i.e. user pressing 'Avbryt' button.

Passes a boolean indicating if it was cancelled on the final step.

Arguments:

• <anonymous>: undefined

completed

Emitted when wizard is finished, i.e. user pressing 'Fortsätt' button in last step.

update:modelValue

V-model event.

Arguments:

• <anonymous>: FWizardKey

Slots

default

One or more <f-wizard-step> elements

FWizardStep

Props

title: string

‐

beforeNext: FWizardValidationCallback Optional

Supply this function in order to run actions before navigating to the next step.

It is possible to cancel the navigation by returning BeforeNextAction.CANCEL. When cancelled, the consumer is responsible to indicate why this happened.

Note that FWizardStep already checks validity of contained fields using v-validation before allowing navigation to the next step.

Default: function() { /* do nothing */ }

beforeValidation: FWizardValidationCallback Optional

Supply this function in order to run actions before FWizardStep checks validity.

beforeValidation is used by FValidationForm.

It is possible to cancel the navigation by returning BeforeNextAction.CANCEL. When cancelled, the consumer is responsible to indicate why this happened.

Default: function() { /* do nothing */ }

useErrorList: boolean Optional

Include the error list component.

Default: true

Slots

step-of

‐

Bindings:

• headerClass: unknown
• stepNumber: unknown
• totalSteps: unknown

error-message

‐

default

‐

next-button-text

‐

Bindings:

• stepNumber: unknown
• totalSteps: unknown

cancel-button-text

‐

Bindings:

• stepNumber: unknown
• totalSteps: unknown