Localization Configurations at UI

eGov platforms provide multi language features

Language configurations :

 

 

 

The language configuration is done in https://github.com/egovernments/egov-mdms-data/blob/master/data/pb/common-masters/StateInfo.json

"hasLocalisation" : true,

"languages" : [ { "label": "ENGLISH", "value": "en_IN" }, { "label": "हिंदी", "value": "hi_IN" }, { "label": "ਪੰਜਾਬੀ", "value": "pn_IN" } ],

 

How are messages shown in UI ?

API : /localization/messages/v1/_search

Query parameters used : ‘module' and 'tenantId’

Below are different example modules used for fetching the messages.

  • rainmaker-common , rainmaker-pt , rainmaker-tl , rainmaker-pgr etc..

  • 'rainmaker-common' module is used across application(e.g. Side bar, Header, login, logout etc), so we are keeping locale keys belonging to common module every time.

  • ‘rainmaker-pt' module is used for Property Tax module. Maximum keys of Property Tax module are under ‘rainmaker-pgr’ module. It is difficult to separate PT keys from PGR. That’s why in PT, we are using both ‘rainmaker-pt' and 'rainmaker-pgr’ module together to display all the locale keys.

  • If the locale key is displaying instead of corresponding text in the UI, make sure the locale key is present under correct module.

  • If any new module is created (e.g. ‘abc') then create the corresponding locale module adding prefix 'rainmaker-’ to it.

  • Make sure module name is present in the Navigation URL.

  • WithAuthrization HOC is responsible for calling the locale API for respective module. It is identifying the module name from navigation URL. (e.g. '/wns/apply?')

  • Do not call localization api anywhere else inside the application except tenantID specific locales.

  • Add new module to getModuleName() function under ‘egov-ui-kit/utils/commons.js’ file.

 

Mohalla Localizations :

All the tenantId and mohalla codes are pushed to its respective modules.

Note : All the codes should be in upper case and special characters dhould be replaced by '_'.

Tenant localization :

code : TENANT_TENANTS_<tenant-id> (all in upper case)

module : rainmaker-<tenant-id> (all in lower case)

Ex : Amritsar (pb.amritsar)

code : TENENAT_TENANTS_PB_AMRITSAR

module : rainmaker-pb.amritsar

Example json :

{

code : TENENAT_TENANTS_PB_AMRITSAR

message : Amritsar

module : rainmaker-pb.amritsar

locale : en_IN

}

Mohalla Localization :

code : <tenant-id>_,<mohalla-type>_<mohalla-code>

module : rainmaker-<tenant-id>

Ex : Ajit Nagar(SUN04)

code : PB_AMRITSAR_REVENUE_SUN04

module : rainmaker-pb.amritsar

Example json :

{

code : PB_AMRITSAR_REVENUE_SUN04

message : Ajit Nagar

module : rainmaker-pb.amritsar

locale : en_IN

}

When City is selected , a localization search call is made with respective tenantId as module name

https://egov-micro-qa.egovernments.org/localization/messages/v1/_search?module=rainmaker-pb.amritsar&locale=en_IN&tenantId=pb.amritsar

Add below code inside , beforeFieldChange hook of City Field :

getlocale() : fetches current selected language code

moduleName : tenantId selected.

Common localization Function : https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-ui-kit-dev/src/redux/app/actions.js

 

Â