How to translate an H5 SDK application using MVX file ?

Legacy Contributor

Hi,

I try to use an ITranslationRequest to translate my application with the M3 file MVXCON but it doesn't work. The response for element.text  is null. My code is :

import { Component, OnInit } from '@angular/core';;

import { CoreBase, ITranslationItem, ITranslationRequest, ITranslationResponse } from '@infor-up/m3-odin';;

import { FormService } from '@infor-up/m3-odin-angular';;

@Component({

selector: 'app-traductor',

templateUrl: './traductor.component.html',

styleUrls: ['./traductor.component.css']

})

export class TraductorComponent extends CoreBase implements OnInit {

code: string;

traduction: string;

TranslationRequest = {} as ITranslationRequest;

TranslationItem = {} as ITranslationItem;

items: ITranslationItem[];

TranslationResponse = {} as ITranslationResponse;

constructor(private formService: FormService) {

super('TraductorComponent');

}

ngOnInit() {

this.code = 'WCU1315';

}

onTranslate(): void {

this.logInfo('onTranslate');

const TranslationItem: ITranslationItem = {

language: 'FR',

key: this.code,

file: 'MVXCON'

};

const TranslationRequest: ITranslationRequest = {

language: 'FR',

items: [this.TranslationItem]

};

this.formService.translate(TranslationRequest).subscribe((TranslationResponse: ITranslationResponse) => {

this.logInfo('Code:' + TranslationItem.key);

this.logInfo('Language : ' + TranslationResponse.language);

this.items = TranslationResponse.items;

this.items.forEach(element => {

this.logInfo('items : ' + element.text );

});

// this.updateTranslate(TranslationResponse);

this.logInfo('Traduction effectuée.');

}, (error) => {

this.logError('Echec de traduction ' + error);

});

}

Legacy Contributor

Hi,

To have a component to translate labels like this is easy to use but it is very ineffective as there will be server requests for each label.

We don't recommend using the translations service like that. It's better to extract the constants that you need and add it to your own application instead, as a file for example. Performance is very important and the browser can only do a limited numbers of request at a time and directive like this would cause each UI element to make an request.

Don't do it like this. It's one thing to get all the constants that you need for the application in one request and then create a language object from it, but don't have individual calls like this. You also need to handle default fallback if the constant does not exist, the call to get constants fails etc.

For support on H5 SDK (latest version) git can be used, https://github.com/infor-cloud/m3-h5-sdk, but then you need to add a small reproduction of the issue as well as browser console logs and network logs.

Please follow standard naming conventions in your code, like lowercase names for variables. It's hard to read code that does not follow naming conventions for the programming language that is used.

Use the browser tools or Fiddler to check what the response from the server looks like and add that information.