Changing text in the application

You can change the default text, images, colors, or typography in the application. In this scenario, an English language message is changed. Text is changed by providing custom text that overrides the default text for any language.

Before you begin

You can find text in the application components and in IEG forms.

Text in IEG scripts. For more information, see Changing Static Text.
Text in IEG configuration settings. For more information, see Using configuration properties to customize IEG pages.

About this task

Message or text strings in the application use the react-intl package, which supports globalization of React applications. react-intl allows the messages to be extracted and translated to other supported languages, it can also add placeholders for data.

To change the existing text of any of the languages that are provided by IBM®, you must provide a custom version of the message that is mapped to the same message id.

Procedure

To change an English language message, find the ID of the message you want to replace. In your project, go to /node_modules/@spm/universal-access-ui/locale.
1. The locale folder contains message files for each supported locale. For your chosen language, search the appropriate message_xx.json for the text string that you want to replace. For example, to change the English text Apply for a benefit, search messages_en.json for that string as shown in the following example. If there is more than one instance of the string, you must find the correct message ID for the text you want to change. The simplest way to find the correct instance is to try replacing each ID one by one, reloading the page each time to see whether the new string is displayed.
```
			
"System_Messages_Alert_Description": "System messages alert description",

			
"Payments_NoPaymentMessages": "No payment messages",

			
"Payments_ApplyForABenefitLink": " Apply for a benefit ",

			
"TODO_NoTODOMessages": "No to-dos",

			
"TODO_CaseworkerMessage": "Your caseworkers can create to-dos for you.",

			
"Meetings_NoMessages": "No meetings",
```
2. For the Apply for a benefit string, use the associated ID "Payments_ApplyForABenefitLink" to override the message in your custom messages_en.json.
Create a custom message file by creating a messages_en.json file in the src/locale folder. Custom messages are injected into the application at application start. For more information, see Localization. By default, the starter application provides a locale folder from where custom messages files are automatically loaded. You can add your custom file to this folder: src/locale.
To replace the message, create a new id:message mapping in your custom message file by using the same ID value as shown in the following example.
```
"Payments_ApplyForABenefitLink": " Click here to apply for a benefit ",
```

Update the src/config/intl.config.js file in the English locale to point to the custom messages file.

// [...]
    {
      locale: 'en',
      displayName: 'English',
      localeData: () => {
        require('@formatjs/intl-pluralrules/locale-data/en');
        require('@formatjs/intl-relativetimeformat/locale-data/en');
      },
      messages: require('../locale/messages_en'),
    },
// [...]