Available from v1.0.0
Product Number Display Formatter
ProductNumberFormatter is a utility for consistent formatting of product identifiers like IBANs, BBANs, account numbers, and card numbers.
Platform availability: iOS 17.0+
When to use:
- Use ProductNumberFormatter when displaying financial product identifiers that require consistent chunking and spacing.
- Consider standard string formatting when the identifier does not require banking-specific formatting rules.
It includes the following features:
- Uniform chunk formatting (e.g., chunks of 4 characters).
- Variable chunk formatting (e.g., 2, 4, 6 characters).
- Configurable separators.
- Per-attribute type formatting (IBAN, BBAN, Account Number, Card Number).
Import
import BackbaseDesignSystem
API reference
DesignSystem.Formatting.ProductNumberFormatter
Utility for formatting product number strings.
Methods
- uniformChunks(ofSize:separator:)
- Creates a formatter that splits the string into uniform chunks.
|
Parameter |
Type |
Description |
|---|---|---|
|
ofSize |
Int |
The size of each chunk |
|
separator |
String |
The separator between chunks |
Returns: (String) -> String - A formatting closure
- variableChunks(ofSizes:separator:)
- Creates a formatter that splits the string into variable-sized chunks.
|
Parameter |
Type |
Description |
|---|---|---|
|
ofSizes |
[Int] |
Array of chunk sizes |
|
separator |
String |
The separator between chunks |
Returns: (String) -> String - A formatting closure
ProductNumberAttributeType
An enumeration of product number attribute types.
|
Case |
Description |
|---|---|
|
iban |
International Bank Account Number |
|
bban |
Basic Bank Account Number |
|
accountNumber |
General account number |
|
cardNumber |
Card number |
Usage
Basic usage
DesignSystem.shared.styles.formattedProductNumberString(.bban)("1234567890")
Default formatting behavior
By default:
- For IBAN, Account Number, and Card Number: product numbers are split into chunks of size 4.
- For BBAN: product number is returned as-is without formatting.
product number: 1234567890
formatted product number: 1234 5678 90
product number: 123456789012
formatted product number: 1234 5678 9012
product number: 123
formatted product number: 123
Custom formatting per attribute type
let defaultFormatter = DesignSystem.shared.styles.formattedProductNumberString
DesignSystem.shared.styles.formattedProductNumberString = { attributeType in
switch attributeType {
case .iban:
return DesignSystem.Formatting.ProductNumberFormatter.uniformChunks(ofSize: 2, separator: "-")
case .bban:
return DesignSystem.Formatting.ProductNumberFormatter.variableChunks(ofSizes: [2, 4, 6], separator: " ")
case .accountNumber:
return { $0 }
case .cardNumber:
return defaultFormatter(attributeType)
@unknown default:
return defaultFormatter(attributeType)
}
}
DesignSystem.shared.styles.formattedProductNumberString(.iban)("1234567890")
// 12-34-56-78-90
DesignSystem.shared.styles.formattedProductNumberString(.bban)("1234567890")
// 12 3456 7890
DesignSystem.shared.styles.formattedProductNumberString(.accountNumber)("1234567890")
// 1234567890
DesignSystem.shared.styles.formattedProductNumberString(.cardNumber)("1234567890")
// 1234 5678 90
Accessibility
This utility is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
Accessibility configuration
This utility does not have direct accessibility properties. When displaying formatted product numbers in UI components, configure accessibility on the containing view.
Best practices
- Set appropriate accessibilityLabel values that read the number in a user-friendly way.
- Include the product type (e.g., "IBAN", "Account Number") in the accessibility label.
- Consider spacing the accessibility label for better VoiceOver pronunciation.
let formattedNumber = DesignSystem.shared.styles.formattedProductNumberString(.iban)("NL91ABNA0417164300")
label.text = formattedNumber
label.accessibilityLabel = "IBAN: NL91 ABNA 0417 1643 00"
Dependencies
- External dependencies: None
- Internal dependencies: DesignSystem.Formatting
Design tokens
This utility does not use design tokens. It contains string formatting logic that works independently of styling configuration.
JSON tokens
This utility does not use JSON tokens.
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Formatter |
DesignSystem.shared.styles.formattedProductNumberString |
Product number formatting closure |