#PushContainer

#Import

import { Iterate } from '@dnb/eufemia/extensions/forms'
render(<Iterate.PushContainer />)

#Description

Iterate.PushContainer enables users to create a new item in the array. It can be used instead of the Iterate.PushButton, but with fields in the container.

It allows the user to fill in the fields without storing them in the data context.

Good to know:

• Fields inside the container must have an itemPath defined, instead of a path.
• If the user enters data without committing it to the outer context, that data will be lost when navigating to another step in the Wizard. To prevent this, you can use the preventUncommittedChanges property on the PushContainer. When enabled, it will display an error message if the user tries to proceed without committing their changes.
• You can provide data, defaultData in addition to isolatedData to prefill the fields.
• The path you define needs to point to an existing Iterate.Array path.

#Usage

You may place it below the Iterate.Array component like this:

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

render(
  <Form.Handler>
    <Iterate.Array path="/myList">...</Iterate.Array>

    <Iterate.PushContainer path="/myList" title="New item title">
      <Field.Name.Last itemPath="/name" />
    </Iterate.PushContainer>
  </Form.Handler>,
)

#Prevent the form from being submitted

To prevent the Form.Handler from being submitted when there are fields with errors inside the PushContainer, you can use the bubbleValidation property.

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

render(
  <Form.Handler>
    <Iterate.Array path="/myList">...</Iterate.Array>

    <Iterate.PushContainer path="/myList" bubbleValidation>
      <Field.Name.Last itemPath="/name" required />
    </Iterate.PushContainer>
  </Form.Handler>,
)

#Show a button to create a new item

By default, it keeps the form open after a new item has been created. You can change this behavior by using the openButton and showOpenButtonWhen properties.

These properties allow you to render a button (openButton) and determine when to show it based on the logic provided by the showOpenButtonWhen function. The showOpenButtonWhen function receives the current list of items as an argument.

The button will be shown instead of the content provided by the children when the showOpenButtonWhen function returns true.

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

render(
  <Form.Handler>
    <Iterate.Array path="/myList">...</Iterate.Array>

    <Iterate.PushContainer
      path="/myList"
      title="New item title"
      openButton={
        <Iterate.PushContainer.OpenButton text="Add another item" />
      }
      showOpenButtonWhen={(list) => list.length > 0}
    >
      Will be hidden based on the showOpenButtonWhen function
    </Iterate.PushContainer>
  </Form.Handler>,
)

The Iterate.PushContainer.OpenButton accepts the same properties as the Button component.

#Show the next item number in the open button

You can use the {nextItemNo} variable in the text or children property to display the next item number.

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

render(
  <Form.Handler>
    <Iterate.Array path="/myList">...</Iterate.Array>

    <Iterate.PushContainer
      path="/myList"
      title="New item title"
      openButton={
        <Iterate.PushContainer.OpenButton text="Add no. {nextItemNo}" />
      }
      showOpenButtonWhen={(list) => list.length > 0}
    >
      <Field.Name.Last itemPath="/name" />
    </Iterate.PushContainer>
  </Form.Handler>,
)

#Technical details

Under the hood, it uses the Form.Isolation component to isolate the data from the rest of the form. It also uses the the Iterate.EditContainer inside the Iterate.Array component to render the fields.

All fields inside the container will be stored in the data context at this path: /pushContainerItems/0.