Hello Problem Solvers !
Here, I am Using DeepL Translator Free API, where I was able to Translate for a particular Input Fields to other Languages, but the problem arised here is I can't able to get an Idea to Translate the whole page(Screen) to other Languages. Attached the Screenshot which have list of Languages in dropdown and an input widget which has the text to Translate to the selected dropdown Languages....
I have Gone through Multiple Forum Discussion and Posts, where I didn't get an Idea to Solve this Problem and now It will be helpful to Me if i get a solution for this issue..
Below I have attached my .oml file...
Link > DeepL Documentation : https://www.deepl.com/docs-api
I know your time is valuable and I appreciate your attention...
Thanks in Advance.
For static text, the answer is quite simple I think. Instead of having "text" type elements, you use "expression" types, assigned to variables. Then when you request the translation, instead of sending your input box's variable like you're doing on the example, you send the text inside your variables, or something like that.
That is very limiting, however. It implies your text is static. So if you want a full page translation you could, perhaps, write some sort of javascript function that looks at your main div (let's call it "content") and parses the text into an list of output strings (maybe mapped with the div id where they were found), which you then save to an OutSystems variable, and send over to the translator service. When it replies, you will need to handle its reply to place each bit where it should go, this is the trickier part.
Thanks for your valuable time
We have tried with a different approach where we assigned id's to the static text and tried translating it and it works perfectly fine and we did the same with class for a single object its working, the problem arises when we try doing that for multiple static texts with same class name with javascript where its calling the action and immediately after executing the PostMethod its going back to the JavaScript and it goes to my screen but in my backend in the action I am getting the translated text (Actual Output) but before that value is assigned in front end(assigned like "object Promised"). Here I have attached my JavaScript code and a ss of my output.
Document.querySelectorAll(".translate");
if (elements.length === 0) {
console.error("No elements found with the class '.translate'");
} else {
// Loop through each element
elements.forEach(element => {
// Get the original text content
// element.textContent = $parameters.TranslatedText;
let originalText = element.textContent;
element.textContent = $actions.TranslateMicrosoft(originalText);
// Call your translation function/API here
// Use the current target language
});
}
If it worked with Ids, I would continue doing that. Remember that in OutSystems, Ids are generated so you can't rely on "inspecting" an element in a browser and finding its Id, instead, you can do so by passing on the element's OutSystems 'Name.Id'
In this case, Introduction.Id.
In your Js function you would have an input parameter where you'd pass this Id, and then you can refer to it as a variable with the $ token:
Yeah ! this will be fine with a single page but we have a total of 5 screens (dashboard , forms ...) with multiple widgets how will we pass each widgets id when we trigger an onchange event (we will not be able to pass the container id in a whole also since it will return null text error ).
Yes, you'll have to really think about this solution. Also, even a good translation service might give two different translations for the same text (specially if it's a long text), so you might get inconsistency if you're calling your translator all the time.
So, maybe you should look into making your app properly multi lingual instead of translate it on the fly:
https://success.outsystems.com/documentation/11/developing_an_application/design_ui/translating_the_app_ui/multilingual_web_applications/