Microsoft Translator in PowerApps Portal | Translate language in PowerApps Portal

Introduction: In this blog, we will understand how to create translator in PowerApps Portal.

I have used Power Automate and Microsoft Translator to achieve this.

Steps to be followed:

1. Create a drop-down of language in which the user can translate.

2. Create two textarea.

• One will take the user’s input.
• The second will display the Translated text.(Output)

3. Create a button that will take the user’s input and convert that text to the specified language.

4. Go to Power Automate.

• Create “+New Flow” of type “Instant cloud flow”.
• Select the “When an HTTP request is received” trigger.

5. Enter a sample JSON payload.

{
    "language": "ja",
    "text": "I am Vaishali Vyas"
}

6. Search for “Microsoft Translator” and select “Translate text” action.

7. Enter the connection name and click on create.

8. Enter values in Target language and Text from the dynamic content.

9. Add Response action and pass the “Translated Text” in the body of response.

Entire Flow:

10. Now our flow is ready we have to call this flow on click of the “Translate” button in PowerApps Portal.
11. Add the below code on the webpage.

Code:

<div class="row sectionBlockLayout"
    style="display: flex; flex-wrap: wrap; text-align: left; min-height: 100px; padding: 8px; margin: 0px;">
    <div class="container" style="display: flex; flex-wrap: wrap;">
        <div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column;">
            <div class="form-group"><label for="slang">Select Language</label><select id="Selectedlanguage"
                    class="form-control">
                    <option value=""></option>
                    <option value="ar">Arabic</option>
                    <option value="af">Afrikaans</option>
                    <option value="sq">Albanian</option>
                    <option value="zh">Chinese Traditional</option>
                    <option value="nl">Dutch</option>
                    <option value="fr">French</option>
                    <option value="de">German</option>
                    <option value="el">Greek</option>
                    <option value="ja">Japanese</option>
                    <option value="hi">Hindi</option>
                </select></div>
        </div>
    </div>
</div>
<div class="row sectionBlockLayout"
    style="display: flex; flex-wrap: wrap; padding: 8px; margin: 0px; text-align: left; min-height: 100px;">
    <div class="container" style="display: flex; flex-wrap: wrap;">
        <div class="col-md-6 columnBlockLayout" style="display: flex; flex-direction: column;">
            <form>
                <div class="form-group"><label for="userText">Enter Text:</label><textarea rows="3" id="userText"
                        class="form-control"></textarea></div>
            </form>
        </div>
        <div class="col-md-6 columnBlockLayout" style="display: flex; flex-direction: column;">
            <form>
                <div class="form-group"><label for="translatedText">Translated Text:</label><textarea rows="3"
                        id="translatedText" disabled="" class="form-control"></textarea></div>
            </form>
        </div>
    </div>
</div>

<div class="col-md-12 text-center">
    <button type="button" class="btn btn-primary" onclick="translateText()">Translate</button>
</div>

<script>
    function translateText() {
        let language = $('#Selectedlanguage').val();
        let text = $('#userText').val();
        var translateRequest = {
            "url": "https://prod-31.centralindia.logic.azure.com:443/workflows",
            "method": "POST",
            "headers": {
                "Content-Type": "application/json"
            },
            "data": JSON.stringify({ "language": language, "text": text }),
        };

        $.ajax(translateRequest).done(function (response) {
            $('#translatedText').text(response);
        });
    }
</script>

Note:

1. we have to pass the language code in Target language input.

2. If no subscription key is provided while creating a connection to the Microsoft Translator connector, the shared API key will be used, which comes with built-in throttling limits based on the number of characters that are being translated, specifically 55,000 characters per day and 100 requests per minute.

Read more about the Microsoft Translator connector.