Setup Flow

Overview

Setup flows, also known as creation or add flows, are an important part of user tasks. It includes the creation of a completely new resource or adding to an existing set. They have clearly defined goals, with varying degrees of contextual help and value proposition.

Use Cases

Use Case

Option(s)

Quick, single step setup

Modal, Drawer, Takeover, or in the Layout

2+ steps, overview of information is important

Flow Card

2+ steps, flows have complex data interaction

Takeover + Progress Tracker

Simple, Quick Setups

When setups require minimal guidance and steps, different layouts can be used, each with its own advantages.

Use a Modal layout when content is limited and context underneath a Modal is not needed.

<Modal
    open
    closable
    title="Add Business Unit"
    footer={<Button primary>Add</Button>}
    portal={false}
    size="S"
>
    <Form>
        <Form.AnvilSelect label="Choose your Business Unit" options={[]} portal={false} />
        <Form.Input label="Create your own Business Unit" />
    </Form>
</Modal>

<Modal
    open
    closable
    title="Add Business Unit"
    footer={<Button primary>Add</Button>}
    portal={false}
    size="S"
>
    <Form>
        <Form.AnvilSelect label="Choose your Business Unit" options={[]} portal={false} />
        <Form.Input label="Create your own Business Unit" />
    </Form>
</Modal>

Drawer

Use a Drawer layout when more space is needed relative to a Modal, and seeing the original context is helpful for setting up content.

<Drawer
    header={"Add Appointment"}
    open
    portal={false}
    footer={
        <ButtonGroup>
                <Button>Cancel</Button>
                <Button primary>Schedule</Button>
        </ButtonGroup>
    }
>
    <Form.Group widths="equal">
        <Form.Input label="Start Date" shortLabel={<Icon name='event' />} />
        <Form.AnvilSelect value={{text: "10:00AM – 12:00PM"}} label="Arrival Window" options={[]} />
    </Form.Group>
    <Form.Group widths="2">
        <Form.Input label="Start Time" />
    </Form.Group>
    <Form.Checkbox className="m-t-1" label="Edit Job End Time" />
    <Form.AnvilSelect
        multiple
        value={[{text: 'Jane Doe',value: 1},{text: 'Bob Ross',value: 2},{text: 'Jackie Robinson',value: 3},{text: 'Alexandria Garcia',value: 4},{text: 'Zack Bower',value: 5}]}
        options={[]}
        label="Technicians"
        trigger={{placeholder: 'Technicians', rows: 0}}
    />
    <Form.Checkbox checked className="m-t-1" label="Send Booking Confirmation" />
</Drawer>

<Drawer
    header={"Add Appointment"}
    open
    portal={false}
    footer={
        <ButtonGroup>
                <Button>Cancel</Button>
                <Button primary>Schedule</Button>
        </ButtonGroup>
    }
>
    <Form.Group widths="equal">
        <Form.Input label="Start Date" shortLabel={<Icon name='event' />} />
        <Form.AnvilSelect value={{text: "10:00AM – 12:00PM"}} label="Arrival Window" options={[]} />
    </Form.Group>
    <Form.Group widths="2">
        <Form.Input label="Start Time" />
    </Form.Group>
    <Form.Checkbox className="m-t-1" label="Edit Job End Time" />
    <Form.AnvilSelect
        multiple
        value={[{text: 'Jane Doe',value: 1},{text: 'Bob Ross',value: 2},{text: 'Jackie Robinson',value: 3},{text: 'Alexandria Garcia',value: 4},{text: 'Zack Bower',value: 5}]}
        options={[]}
        label="Technicians"
        trigger={{placeholder: 'Technicians', rows: 0}}
    />
    <Form.Checkbox checked className="m-t-1" label="Send Booking Confirmation" />
</Drawer>

Takeover

Use a Takeover with a single step when a full page of content is necessary, and the context from the previous page is not needed.

Multi-step Flows

Many flows require multiple steps with a variety of components used to complete the setup. Anvil supports two general approaches to multi-step flows: the Flow Card and Takeover + Progress Tracker arrangement.

One Page, Many Steps Flow

The Flow Card is a useful arrangement to have a multi-step flow on a single page.

Use cases for a Flow Card UI arrangement

When it’s important to visualize that steps build on top of each other.
When a persistent summary of the setup is valuable to the user.
When individual steps are using less complex UIs.

Membership Trade(s)

HVAC and Plumbing

Widget Event

January

Gear Event

March

Widget Membership

Yes

Widget Frequency

Quarterly

Text that helps explain this particular step in the flow. This will help them complete the flow with the information they need.

<FlowCard currentIndex={1}>
    <FlowCard.Step
        title="Goal Setup"
        content={
            <>
                <Stack spacing={5} wrap="wrap" className="p-t-2">
                    <Stack.Item style={{ minWidth: '150px' }}>
                        <Eyebrow>Membership Trade(s)</Eyebrow>
                        <BodyText>HVAC and Plumbing</BodyText>
                    </Stack.Item>
                    <Stack.Item>
                        <Eyebrow>Widget Event</Eyebrow>
                        <BodyText>January</BodyText>
                    </Stack.Item>
                    <Stack.Item>
                        <Eyebrow>Gear Event</Eyebrow>
                        <BodyText>March</BodyText>
                    </Stack.Item>
                </Stack>
                <Stack spacing={5} wrap="wrap" className="m-t-4">
                    <Stack.Item style={{ minWidth: '150px' }}>
                        <Eyebrow>Widget Membership</Eyebrow>
                        <BodyText>Yes</BodyText>
                    </Stack.Item>
                    <Stack.Item>
                        <Eyebrow>Widget Frequency</Eyebrow>
                        <BodyText>Quarterly</BodyText>
                    </Stack.Item>
                </Stack>
            </>
        }
        headerAction={<Button fill="outline" small>Edit</Button>}
        saved
    />
    <FlowCard.Step
        title="Widget Revenue"
        content={
            <>
                <BodyText className="m-t-2">
                    Text that helps explain this particular step in the flow.
                    This will help them complete the flow with the information they need.
                </BodyText>
                <Form className="w-75 m-t-4">
                    <Form.Group widths="equal">
                        <Form.Input label="Widget Event" shortLabel="$" />
                        <Form.Input label="Gear Event" shortLabel="$" />
                    </Form.Group>
                    <Form.Group widths="equal">
                        <Form.Input label="Widget Event" shortLabel="$" />
                        <Form.Input label="Gear Event" shortLabel="$" />
                    </Form.Group>
                    <Form.Group widths="equal">
                        <Form.Input label="Widget Event" shortLabel="$" />
                        <Form.Input label="Gear Event" shortLabel="$" />
                    </Form.Group>
                    <Form.Group widths="equal">
                        <Form.Field>
                            <Eyebrow>Annual Total</Eyebrow>
                            <BodyText>$200.00</BodyText>
                        </Form.Field>
                        <Form.Field>
                            <Eyebrow>Annual Total</Eyebrow>
                            <BodyText>$250.00</BodyText>
                        </Form.Field>
                    </Form.Group>
                </Form>
            </>
        }
        footerAction={
            <ButtonGroup className="flex-row-reverse">
                <Button
                    primary
                    className="m-l-1"
                >
                    Next
                </Button>
                <Button>Cancel</Button>
            </ButtonGroup>
        }
        active
    />
    <FlowCard.Step
        title="Widget Costs"
        headerAction={<Button small>Edit</Button>}
        orderNumber={3}
    />
</FlowCard>

<FlowCard currentIndex={1}>
    <FlowCard.Step
        title="Goal Setup"
        content={
            <>
                <Stack spacing={5} wrap="wrap" className="p-t-2">
                    <Stack.Item style={{ minWidth: '150px' }}>
                        <Eyebrow>Membership Trade(s)</Eyebrow>
                        <BodyText>HVAC and Plumbing</BodyText>
                    </Stack.Item>
                    <Stack.Item>
                        <Eyebrow>Widget Event</Eyebrow>
                        <BodyText>January</BodyText>
                    </Stack.Item>
                    <Stack.Item>
                        <Eyebrow>Gear Event</Eyebrow>
                        <BodyText>March</BodyText>
                    </Stack.Item>
                </Stack>
                <Stack spacing={5} wrap="wrap" className="m-t-4">
                    <Stack.Item style={{ minWidth: '150px' }}>
                        <Eyebrow>Widget Membership</Eyebrow>
                        <BodyText>Yes</BodyText>
                    </Stack.Item>
                    <Stack.Item>
                        <Eyebrow>Widget Frequency</Eyebrow>
                        <BodyText>Quarterly</BodyText>
                    </Stack.Item>
                </Stack>
            </>
        }
        headerAction={<Button fill="outline" small>Edit</Button>}
        saved
    />
    <FlowCard.Step
        title="Widget Revenue"
        content={
            <>
                <BodyText className="m-t-2">
                    Text that helps explain this particular step in the flow.
                    This will help them complete the flow with the information they need.
                </BodyText>
                <Form className="w-75 m-t-4">
                    <Form.Group widths="equal">
                        <Form.Input label="Widget Event" shortLabel="$" />
                        <Form.Input label="Gear Event" shortLabel="$" />
                    </Form.Group>
                    <Form.Group widths="equal">
                        <Form.Input label="Widget Event" shortLabel="$" />
                        <Form.Input label="Gear Event" shortLabel="$" />
                    </Form.Group>
                    <Form.Group widths="equal">
                        <Form.Input label="Widget Event" shortLabel="$" />
                        <Form.Input label="Gear Event" shortLabel="$" />
                    </Form.Group>
                    <Form.Group widths="equal">
                        <Form.Field>
                            <Eyebrow>Annual Total</Eyebrow>
                            <BodyText>$200.00</BodyText>
                        </Form.Field>
                        <Form.Field>
                            <Eyebrow>Annual Total</Eyebrow>
                            <BodyText>$250.00</BodyText>
                        </Form.Field>
                    </Form.Group>
                </Form>
            </>
        }
        footerAction={