Interface ErrorMessageOverlayConfig

Configuration interface for the ErrorMessageOverlay.

interface ErrorMessageOverlayConfig {
    ariaLabel?: LocalizableText;
    components?: Component<ComponentConfig>[];
    cssClass?: string;
    cssClasses?: string[];
    cssPrefix?: string;
    disabled?: boolean;
    hidden?: boolean;
    id?: string;
    messages?: ErrorMessageMap | ErrorMessageTranslator;
    role?: string;
    tabIndex?: number;
    tag?: string;
}

Hierarchy (view full)

Properties

ariaLabel?: LocalizableText

WCAG20 standard for defining info about the component (usually the name)

components?: Component<ComponentConfig>[]

Child components of the container.

cssClass?: string

The CSS classes of the component. This is usually the class from where the component takes its styling.

cssClasses?: string[]

Additional CSS classes of the component.

cssPrefix?: string

A prefix to prepend all CSS classes with.

disabled?: boolean

Specifies if the component is enabled (interactive) or not. Default: false

hidden?: boolean

Specifies if the component should be hidden at startup. Default: false

id?: string

The HTML ID of the component. Default: automatically generated with pattern 'ui-id-{guid}'.

Allows overwriting of the error messages displayed in the overlay for customization and localization. This is either a function that receives any ErrorEvent as parameter and translates error messages, or a map of error codes that overwrites specific error messages with a plain string or a function that receives the ErrorEvent as parameter and returns a customized string. The translation functions can be used to extract data (e.g. parameters) from the original error message.

Example 1 (catch-all translation function): errorMessageOverlayConfig = { messages: function(error) { switch (error.code) { // Overwrite error 1000 'Unknown error' case 1000: return 'Houston, we have a problem'

  // Transform error 1201 'The downloaded manifest is invalid' to uppercase
  case 1201:
    var description = ErrorUtils.defaultErrorMessages[error.code];
    return description.toUpperCase();

  // Customize error 1207 'The manifest could not be loaded'
  case 1207:
    var statusCode = error.data.statusCode;
    return 'Manifest loading failed with HTTP error ' + statusCode;
}
// Return unmodified error message for all other errors
return error.message;

} };

Example 2 (translating specific errors): errorMessageOverlayConfig = { messages: { // Overwrite error 1000 'Unknown error' 1000: 'Houston, we have a problem',

// Transform error 1201 'Unsupported manifest format' to uppercase
1201: function(error) {
  var description = ErrorUtils.defaultErrorMessages[error.code];
  return description.toUpperCase();
},

// Customize error 1207 'The manifest could not be loaded'
1207: function(error) {
  var statusCode = error.data.statusCode;
  return 'Manifest loading failed with HTTP error ' + statusCode;
}

} };

role?: string

Specifies the component role for WCAG20 standard

tabIndex?: number

WCAG20 requirement for screen reader navigation

tag?: string

The HTML tag name of the component. Default: 'div'