How to replace strings in Angular frontend

With 2021.05 release, we have added the possibility to replace strings from Fleio with your custom ones. In order to do that, we will have to define a new language called “en-replace” which will contain the custom strings, besides the default ones.

First of all, you will have to get the default translations from our public repository: https://github.com/fleio/fleio-i18n

If you check the fleio-i18n/translations/ngfrontend/src/assets/locale/ location, you will see that there are multiple templates that can be used to get the String ID and the String:

• template-enduser.json

• template-staff.json

• template.json

If you inspect the template-enduser.json you will see that the translations format will be:

{
  "locale": "en-US",
  "translations": {
    "STRING ID": "STRING"
  }
}

Warning

You should create and edit the following files as fleio user. This ensures that no file permission issue occurs later. If you want to know more about file permissions in a Docker deployment, see Docker installation file permissions.

You should switch to fleio user before continuing:

sudo -i -u fleio

As an example, we will change the SIGN IN text with SIGN IN - CHANGED STRING. First, you will have to create a new json file called messages.en-replace.json in the /home/fleio/compose/custom directory. If the custom directory does not exist, create it.

Now, if you inspect the template.json file, you will see that the SIGN IN string has 5207635742003539443 ID. In the messages.en-replace.json file, we will have to add the following:

{
  "locale": "en-US",
  "translations": {
    "5207635742003539443": "SIGN IN - CHANGED STRING"
  }
}

The next step is to create the Dockerfile, in the /home/fleio/compose/custom directory.

touch /home/fleio/compose/custom/Dockerfile

Insert the following code in /home/fleio/compose/custom/Dockerfile file. This will ensure that on each recreate / upgrade, the fleio-frontend-1 image will contain the changed strings.

ARG FLEIO_DOCKER_HUB
ARG FLEIO_RELEASE_SUFFIX

FROM ${FLEIO_DOCKER_HUB}/fleio_frontend${FLEIO_RELEASE_SUFFIX}

# we're defining the Fleio installation path in one place and we're using it below
ENV INSTALL_PATH="/var/webapps/fleio"

COPY messages.en-replace.json "$INSTALL_PATH/frontend/enduser/assets/locale/messages.en-replace.json"

If you want to change strings for staff panel, you will have to change the path where you’re copying the messages.en-replace.json file to:

• staff: $INSTALL_PATH/frontend/staff/assets/locale/messages.en-replace.json

We will also have to add the following code to the /home/fleio/compose/docker-compose.override.yml file:

# Add here your Docker Compose customizations
# docker-compose.override.yml is not overwritten by Fleio
# (while docker-compose.yml may be OVERWRITTEN on Fleio upgrades)

services:
  frontend:
    build:
      context: ./custom/
      dockerfile: Dockerfile
      args:
        - FLEIO_DOCKER_HUB
        - FLEIO_RELEASE_SUFFIX
    image: fleio_frontend_custom
    pull_policy: never

Now we will build and apply the customizations:

# make sure you're in the directory with Docker Compose files
cd /home/fleio/compose

# build your image
docker compose build

# apply your changes to the running frontend
docker compose up -d

After we have re-built the frontend image, we will have to change the default language to en-replace for the panels that we have added the changed strings (in our case the enduser.config.json):

fleio edit enduser.config.json
fleio edit staff.config.json

Now if you access the end-user panel, you should see that the SIGN IN button text has changed.