GlobalStatus#

Import#

import { GlobalStatus } from '@dnb/eufemia'

Description#

The GlobalStatus is a complex component meant for displaying global application notifications or a summary of a form (displaying form errors, messages, etc.).

By default, the GlobalStatus is automatically connected together with the FormStatus component. This means that every form component showing a status will send the status message along to the GlobalStatus.

Relevant links#

• Figma
• Source code
• Docs code

FormStatus default behavior#

1. Once a FormStatus is shown, the main GlobalStatus will show up.
2. The page will scroll (if needed) to the dedicated GlobalStatus.
3. Form components will send along both the status text and its label to show a good and accessible summary.
4. Screen reader users will automatically hear the entire content of the GlobalStatus once it shows up.

Several GlobalStatus instances#

Normally, you only want to have one GlobalStatus inside your application. But you can have several in parallel. Make sure you give every other one a new ID:

<GlobalStatus id="other-global-status" />

Where to put it#

• The GlobalStatus component should be positioned right under the header. By default, it uses main as the ID.
• Or as a secondary summary of errors in a submit form. Keep in mind that, by default, form components like Input use the ID main. To make sure the built-in FormStatus sends the message to another GlobalStatus, you have to set the globalStatus, like:

<GlobalStatus id="other-global-status" />
<Input
  globalStatus={{
    id: 'other-global-status',
  }}
/>

But you can also make use of the Eufemia Provider where you can send the globalStatus to the underlying/wrapped components, like:

<GlobalStatus id="other-global-status" />
<Provider
  formElement={{
    globalStatus: {
      id: 'other-global-status',
    },
  }}
>
  <Input status="Message" />
</Provider>

Manual updates#

Besides the automated connection between the error states of form components (FormStatus), you can update messages from anywhere in your application at any time:

NB: The GlobalStatus will autoClose by default once all messages are removed.

JavaScript (interceptor situation)#

You can access and manipulate an existing GlobalStatus from outside of the React render tree.

1. Given you have already defined a GlobalStatus in JSX:

<GlobalStatus id="other-global-status" />

2. Then you can control it from within a JavaScript context whenever you need to:

// 1. Update / extend the status like so:

const statusOne = GlobalStatus.create({
  id: 'other-global-status',
  // or main
  statusId: 'custom-id-1',
  text: 'New Text',
  item: 'Item from status #1',
  title: 'New Title',
  show: true,
})

// 2. and removes "custom-id-1" again if needed

statusOne.update({
  text: 'Updated Text',
})

// 3. and removes "custom-id-1" again if needed
statusOne.remove()
render(<GlobalStatus id="other-global-status" />)

JSX#

{/* 1. Place it under the header bar */}
<GlobalStatus text="Optional default text" />
{/* 2. later on, you can show a message */}
<GlobalStatus.Add
  id="custom-id"
  statusId="custom-id-1"
  title="New title"
  text="First long info text ..."
  item="Item from status #1"
  onClose={({ statusId }) => {
    console.log('onClose', statusId)
  }}
/>
{/* 3. and remove it again */}
<GlobalStatus.Remove id="custom-id" statusId="custom-id-1" />

If you need an additional GlobalStatus, define a custom ID (custom-status):

{/* 1. Place it somewhere in your application */}
<GlobalStatus id="custom-status" />
{/* 2. later on, you can show a message */}
<GlobalStatus.Add
  id="custom-status"
  statusId="custom-id-1"
  title="New title"
  text="First long info text ..."
  item="Item from status #1"
  onClose={({ statusId }) => {
    console.log('onClose', statusId)
  }}
/>
{/* 3. and remove it again */}
<GlobalStatus.Remove id="custom-status" statusId="custom-id-1" />

Related components#

GlobalStatus is part of the Feedback category. Other components for similar needs:

• AriaLive — to announce page changes to screen reader users.
• Badge — to highlight new, unread, or important information.
• Dialog — when people need to make a choice or read an important message before continuing.
• Drawer — to show extra content in a panel that slides in from the side.
• FormStatus — to show validation errors, warnings, or messages near a form.
• GlobalError — to show a clear 404 or 500 error page.

See all in Feedback →

Demos#

GlobalStatus displaying error status#

NB: Keep in mind, the items are handled automatically by all form components! This is just an example of how to define the content manually.

<GlobalStatus
  title="Custom Title"
  text="Failure text"
  items={[
    {
      text: 'List item',
      statusAnchorUrl: '/uilib/components/global-status',
      statusAnchorLabel: 'eksempel',
    },
  ]}
  show={true}
  autoScroll={false}
  noAnimation={true}
  omitSetFocus={true}
  id="demo-1"
/>

GlobalStatus displaying info status#

<GlobalStatus
  state="information"
  title="Custom info title ..."
  text="Long info nisl tempus hendrerit tortor dapibus nascetur taciti porta risus cursus fusce platea enim curabitur proin nibh ut luctus magnis metus"
  items={['Status text 1', 'Status text 2']}
  show={true}
  autoScroll={false}
  noAnimation={true}
  omitSetFocus={true}
  id="demo-4"
/>

GlobalStatus displaying warning status#

<GlobalStatus
  state="warning"
  title="Custom warning title ..."
  text="A string of text providing a warning or semi-urgent message of some kind to the user"
  show={true}
  autoScroll={false}
  noAnimation={true}
  omitSetFocus={true}
  id="demo-5"
/>

GlobalStatus displaying success status#

<GlobalStatus
  state="success"
  title="Custom success title ..."
  text="A string of text providing a success message of some kind to the user"
  show={true}
  autoScroll={false}
  noAnimation={true}
  omitSetFocus={true}
  id="demo-6"
/>

GlobalStatus custom icon#

<GlobalStatus
  icon={<Icon icon={confetti_medium} />}
  show={true}
  autoScroll={false}
  noAnimation={true}
  omitSetFocus={true}
  id="demo-icon"
/>

To showcase the automated coupling between FormStatus and GlobalStatus#

const InputWithError = () => {
  const [errorMessage, setErrorMessage] = useState(null)
  return (
    <Input
      label="Input"
      placeholder="Write less than 5 chars and dismiss the focus to show the GlobalStatus ..."
      stretch
      status={errorMessage}
      onBlur={({ value }) => {
        setErrorMessage(value.length <= 4 ? 'With a message shown' : null)
      }}
      globalStatus={{
        id: 'main-status',
      }}
    />
  )
}
render(<InputWithError />)

GlobalStatus and update routines#

To showcase the custom Update and Remove possibility#

To showcase the scrolling#

NB: this demo only works once, so you'll have to refresh the browser to try again :)