#All features and APIs

Table of Contents

• Form
• Connectors
• Wizard
• Iterate
• Data Context
• FieldBlock
• ValueBlock
• useFieldProps
• useValueProps

#Intro

Eufemia Forms is a flexible set of building blocks for form functionality. Besides field components and data display, it consists of more complex functionality for surrounding processes such as data flow, validation and building UI.

#Form

Form provides the main forms-helpers including data provider and event handling. This makes it possible to do a combined processing of the data for a form, so you don't have to create individual distribution of data and callbacks to persist changes for each field individually.

Example using the Form.Handler collecting data with onSubmit:

import { Form, Field, Value } from '@dnb/eufemia/extensions/forms'

const existingData = {
  email: 'name@email.no'
  date: '2024-01-01'
}

// The submit handler can be async
const submitHandler = async (data) => {
  try {
    await makeRequest(data)
  } catch (error) {
    return error
  }
}

function Component() {
  return (
    <Form.Handler defaultData={existingData} onSubmit={submitHandler}>
      <Field.Email path="/email" />
      <Value.Date path="/date" />
      <Form.SubmitButton />
    </Form.Handler>
  )
}

Here is a list of all available Form.* components:

#Card

Form.Card is a wrapper for the Card component to make it easier to use inside a form.

#Section

Form.Section lets you compose blocks of fields and values to be reused in different contexts.

#ViewContainer

Form.Section.ViewContainer enables users to toggle (with animation) the content of each item between the view and edit container.

#EditContainer

Form.Section.EditContainer enables users to toggle (with animation) the content of each item between the view and edit container.

#Appearance

Form.Appearance is a provider for theming form fields.

#ButtonRow

Form.ButtonRow is a wrapper for horizontally separated buttons.

#Handler

The Form.Handler is the root component of your form. It provides a HTML form element and handles the form data.

#InfoOverlay

Form.InfoOverlay is used to display an informational message that fully covers the available space.

#Isolation

Form.Isolation lets you isolate parts of your form so data and validations are not shared between the Form.Handler until you want to.

#MainHeading

Form.MainHeading is a standardized main heading for sections, ensuring default layout, spacing etc.

#SubHeading

Form.SubHeading is a standardized sub heading for sections, ensuring default layout, spacing etc.

#SubmitButton

Form.SubmitButton connects to the Form.Handler to submit the active state of the internal DataContext, triggering onSubmit.

#SubmitConfirmation

Form.SubmitConfirmation can be used to prevent the Form.Handler from submitting, and makes it possible to show a confirmation dialog in different scenarios.

#SubmitIndicator

Form.SubmitIndicator lets you show an indicator while async form operations are performed.

#Toolbar

Form.Section.Toolbar is a helper component to be used within an Form.Section.ViewContainer and Form.Section.EditContainer.

#Visibility

Form.Visibility makes it possible to hide components and elements on the screen based on the dynamic state of data.

#clearData

Form.clearData lets you clear the data of a form.

#getData

Form.getData lets you access your form data outside of the form context.

#setData

Form.setData lets you set or modify your form data outside of the form context.

#useData

Form.useData lets you access or modify your form data outside of the form context within your application.

#useSnapshot

Form.useSnapshot lets you store data snapshots of your form data, either inside or outside of the form context.

#useTranslation

Form.useTranslation is a hook that returns the translations for the current locale.

#useValidation

Form.useValidation lets you monitor and modify field status or your form errors outside of the context.

#Validation and error handling

You can provide custom logic and texts to handle and display error messages. More details about error messages can be found on a separate page.

#Schema validation

Eufemia Forms does support Ajv schema validator on both single fields and the whole data set – if needed.

JSON Schema is a flexible standard that makes it possible to describe the data's structure and validation needs, both for the individual value, and more complex rules across the data set.

Descriptions and examples of such validation can be found on a separate page.

You can also create your own Ajv instance and pass it to your form.

This is useful if you want to use a custom schema keyword and validate function or if you want to use a different version of Ajv.

#Generate schema from fields

You can also easily generate a Ajv schema from a set of fields (JSX), by using the log property on the Tools.GenerateSchema component. I will e.gc. console log the generated schema. More info about this feature can be found on a separate page

#Connectors

Connectors are an opt-in way to extend the functionality of a form. They can be used to add features like API calls for autofill, validation, and more.

#Wizard

Wizard is a wrapper component for showing forms with a StepIndicator for navigation between several pages (multi-steps). It also includes components for navigating between steps.

Example using the Wizard.Container for handling stepped layouts:

import { Wizard, Form } from '@dnb/eufemia/extensions/forms'

render(
  <Wizard.Container>
    <Wizard.Step title="Name">
      <Form.MainHeading>Profile</Form.MainHeading>
    </Wizard.Step>
  </Wizard.Container>,
)

Here is a list of all available Wizard.* components:

#Container

The Wizard.Container is a container component for multi-page forms including a step indicator.

#Step

Each step should be wrapped with a Wizard.Step component directly inside Wizard.Container.

#Buttons

Wizard.Buttons is a combination of PreviousButton and NextButton for navigating between steps/pages.

#EditButton

Wizard.EditButton is a button to be placed in a summary step.

#NextButton

Wizard.NextButton connects to the Wizard.Context to move the user to the next step when clicked.

#PreviousButton

Wizard.PreviousButton connects to the Wizard.Context to move the user to the previous step when clicked.

#useStep

Wizard.useStep returns Wizard.Context parameters such as totalSteps, activeIndex or a setActiveIndex handler.

#Location Hooks

Is a set of React Hooks that lets you easily hook up your existing router in order to store the current step in the URL query string.

#Iterate

Iterate contains components and functionality for traversing values and parts of data sets such as arrays, which contain a varying number of elements where the number of components on the screen depends on how many elements the data consists of.

#Array

Iterate.Array works in many ways similar to field-components. It has a value-property that can receive an array or you can give it a path if you want it to retrieve an array from a surrounding DataContext. All children components of Iterate.Array are rendered once per item the array-value consists of.

#AnimatedContainer

Iterate.AnimatedContainer can be used to animate items when they are added or removed.

#PushButton

Iterate.PushButton builds on top of the same data flow logic as field components, but the only thing it changes in the value it receives or retrieves from source data is adding a new item to the array.

#PushContainer

Iterate.PushContainer enables users to create a new item in the array.

#RemoveButton

Iterate.RemoveButton connects to the array of a surrounding Iterate.Array and removes the item when clicked.

#ViewContainer

Iterate.ViewContainer enables users to toggle (with animation) the content of each item between the view and edit container.

#EditContainer

Iterate.EditContainer enables users to toggle (with animation) the content of each item between the view and edit container.

#Count

Iterate.Count is a helper component / function that returns the count of a data array or object.

#ItemNo

Iterate.ItemNo is a helper component that can be used to render the current item number (index) in a given string.

#Toolbar

Iterate.Toolbar is a helper component to be used within an Iterate.AnimatedContainer to add a toolbar to each item in the array.

#Visibility

The Iterate.Visibility component allows you to conditionally display content based on relative paths (itemPath) within an Iterate.Array component.

#Data Context

DataContext builds a surrounding React context that binds an entire source dataset together with the fields placed within. It enables fields and other components to retrieve data from the source data using path parameters that identify where in the source data the target value is located, and the same components will report changes to the data back so the context can update the dataset.

#At

DataContext.At makes it possible to dig into a data set to set a pointer as the root for sub components, as well as iterate array-data.

#Context

The context object used in DataContext.Provider.

#Provider

DataContext.Provider is the context provider that has to wrap the features if components of Field and Value is to be used with a common source instead of distributing values and events individually.

#FieldBlock

FieldBlock is a reusable wrapper for building interactive Field components.

#ValueBlock

ValueBlock is a reusable wrapper for building Value components.

#useFieldProps

The useFieldProps hook standardize handling of the value flow for a single consumer component for one data point.

#useValueProps

The useValueProps hook standardize handling of the value flow for a single presentation component for one data point.