you can use a widget to handle this and somehow add that widget on your portal page.
something like this but please enhance, I just used hard-coded values, but you can make some API call which translates and shows the value to you
HTML:
<div class="container">
<h2>English to Spanish Translator</h2>
<div class="form-group">
<label for="englishText">Enter English Text:</label>
<textarea class="form-control" id="englishText" rows="3"></textarea>
</div>
<button class="btn btn-primary" id="translateBtn">Translate</button>
<div class="form-group mt-3">
<label for="spanishText">Spanish Translation:</label>
<textarea class="form-control" id="spanishText" rows="3" readonly></textarea>
</div>
</div>
Client Controller:
api.controller = function() {
/* widget controller */
var c = this;
c.translate = function() {
var englishText = document.getElementById('englishText').value;
if (!englishText.trim()) {
alert('Please enter some text to translate.');
return;
}
// In a real-world scenario, you would call a REST API or Script Include here.
// For demo, we use a simple mock translation.
var mockTranslations = {
"hello": "hola",
"good morning": "buenos dÃas",
"thank you": "gracias",
"please": "por favor",
"how are you": "¿cómo estás?"
// Add more as needed
};
var spanishText = mockTranslations[englishText.toLowerCase()] ||
"Sorry, translation not found. For real translations, connect to a translation API.";
document.getElementById('spanishText').value = spanishText;
};
// Attach event handler
angular.element(document).ready(function() {
document.getElementById('translateBtn').onclick = c.translate;
});
};CSS:
.container { padding: 20px; }
.form-group { margin-bottom: 15px; }
#translateBtn { margin-bottom: 15px; }
Output:
If my response helped please mark it correct and close the thread so that it benefits future readers.
