Use Cognitive Services in canvas apps

This article shows you how to build a basic canvas app that uses the Azure Cognitive Services Text Analytics API to analyze text. We'll show you how to set up the Text Analytics API, and connect to it with the Text Analytics connector. Then we'll show you how to create a canvas app that calls the API.

Note

If you are new to building apps in Power Apps, we recommend reading Create an app from scratch before diving into this article.

Introduction to Azure Cognitive Services

Azure Cognitive Services is a set of APIs, SDKs, and services available to make your applications more intelligent, engaging, and discoverable. These services enable you to easily add intelligent features – such as emotion and video detection; facial, speech, and vision recognition; and speech and language understanding – into your applications.

We'll focus on "language understanding" for this article, working with the Text Analytics API. This API enables you to detect sentiment, key phrases, topics, and language from your text. Let's get started by trying out a demo of the API.

Prerequisites

Before you begin building a canvas app using the Text Analytics API, you must prepare the Text Analytics resource. For more details, go to Text Analytics API prerequisites.

Create the app and add a connection

Tip

In this tutorial, you'll learn about creating a demo app with a few properties and values from the output using the Text Analytics API actions. You can use similar method to create your own app to show more or all such properties and values for the Text Analytics API operations.

Create a blank app and add a connection with the Text Analytics connector.

  1. Start by creating a blank canvas app with Tablet layout, and a name like "Demo app with Text Analytics API".

  2. Select Data from the left pane.

  3. Search for Text Analytics connection.

    Add Text Analytics connection.

  4. Enter Account Key, and Site URL values.

    Account Key and Site URL for Text Analytics API in Power Apps.

    You can find the Account Key and Site URL from the KEY and Endpoint values using the Azure portal.

    KEY and Endpoint in Azure portal.

  5. Select Connect.

Your app is now connected to the Cognitive Services resource of Text Analytics API type in Azure.

Design the app

In this section, you'll design the demo app with controls required to work with the Text Analytics API. After you've completed the app design, this is how it will look:

Demo app.

Note

  • The app in this tutorial demonstrates how to get started using the Text Analytics API with Power Apps. If you want to design the app from scratch, or to meet specific business requirements, you can customize this demo app, or directly add, configure controls and use the Text Analytics API actions instead.
  • Values for component properties such as alignment, size, color, position (X, Y) in this tutorial are suggested. Actual values may vary depending on the app layout you select. You can also change these suggested values to design the app as per your requirements.
  1. Select Insert. from the left pane.

  2. Select Text label.

  3. Change the label properties with the following configuration.

    Property Name Value
    Text "Text Analytics"
    Size 36
    Color RGBA(255, 255, 255, 1)
    Fill RGBA(56, 96, 178, 1)
    Align Align.Center
    X 0
    Y 0
    Width 1366
    Height 98
  4. Insert Text label.

  5. Change the label properties with the following configuration.

    Property Name Value
    Text "Enter your text, select your options, then select 'Analyze text'"
    Size 16
    Align Align.Left
    X 24
    Y 135
    Width 601
    Height 60
  6. Insert Checkbox.

  7. Change the checkbox properties with the following configuration.

    Property Name Value
    Name chkLanguage
    Text "Language"
    Size 16
    X 24
    Y 228
  8. Insert Checkbox.

  9. Change the checkbox properties with the following configuration.

    Property Name Value
    Name chkSentiment
    Text "Sentiment"
    Size 16
    X 230
    Y 228
  10. Insert Checkbox.

  11. Change the checkbox properties with the following configuration.

    Property Name Value
    Name chkEL
    Text "Entity Linking"
    Size 16
    X 403
    Y 228
    Width 200
    Height 50
  12. Insert Checkbox.

  13. Change the checkbox properties with the following configuration.

    Property Name Value
    Name chkPhrases
    Text "Key Phrases"
    Size 16
    X 24
    Y 286
    Width 193
    Height 50
  14. Insert Checkbox.

  15. Change the checkbox properties with the following configuration.

    Property Name Value
    Name chkNER
    Text "Named Entity Recognition"
    Size 16
    X 230
    Y 286
    Width 318
    Height 50
  16. Insert Text input.

  17. Change the text input properties with the following configuration.

    Property Name Value
    Name tiTextToAnalyze
    Text "Enter text"
    Mode MultiLine
    Size 14
    Height 256
    Width 557
    X 24
    Y 390
  18. Insert Button.

  19. Change the button properties with the following configuration.

    Property Name Value
    Name analyzeText
    Text "Analyze Text"
    X 189
    Y 684
    Width 196
    Height 53
    Size 16
  20. Insert Text label.

  21. Change the label properties with the following configuration.

    Property Name Value
    Name dLanguage
    Text "Detected language:"
    Size 16
    X 633
    Y 135
    Width 665
    Height 48
  22. Insert Text label.

  23. Change the label properties with the following configuration.

    Property Name Value
    Name sScore
    Text "Sentiment score:"
    Size 16
    X 633
    Y 196
    Width 656
    Height 48
  24. Select Insert -> Gallery -> Blank vertical.

  25. Change the gallery properties with the following configuration.

    Property Name Value
    Name gallerySS
    Layout Title
    X 826
    Y 196
    Width 503
    Height 62
  26. Select the arrow icon inside the gallery and delete it.

  27. Change the following properties for the first row inside the gallery.

    Property Name Value
    X 16
    Height 63
  28. Insert Text label.

  29. Change the label properties with the following configuration.

    Property Name Value
    Text "Linked entities:"
    Size 16
    X 633
    Y 258
    Width 206
    Height 48
  30. Select Insert -> Gallery -> Blank vertical.

  31. Change the gallery properties with the following configuration.

    Property Name Value
    Name galleryLE
    Layout Title and subtitle
    X 633
    Y 318
    Width 696
    Height 87
  32. Select the arrow icon inside the gallery and delete it.

  33. Insert Text label.

  34. Change the label properties with the following configuration.

    Property Name Value
    Text "Key Phrases:"
    Size 16
    X 633
    Y 429
    Width 150
    Height 48
  35. Select Insert -> Gallery -> Blank vertical.

  36. Change the gallery properties with the following configuration.

    Property Name Value
    Name galleryKP
    Layout Title
    X 633
    Y 489
    Width 696
    Height 87
  37. Select the arrow icon inside the gallery and delete it.

  38. Change the following properties for the first row inside the gallery.

    Property Name Value
    X 16
    Height 87
  39. Insert Text label.

  40. Change the label properties with the following configuration.

    Property Name Value
    Text "Named entities:"
    Size 16
    X 633
    Y 589
    Width 193
    Height 48
  41. Select Insert -> Gallery -> Blank vertical.

  42. Change the gallery properties with the following configuration.

    Property Name Value
    Name galleryNER
    Layout Title
    X 633
    Y 670
    Width 696
    Height 87
  43. Select the arrow icon inside the gallery and delete it.

  44. Change the following properties for the first row inside the gallery.

    Property Name Value
    X 16
    Height 87

Here's how the app should look like after following the above steps.

App design.

Add logic to the app

Now that you've created a basic structure of the app with the expected design, let's add logic to the app so we can use the Cognitive Services in Power Apps.

Note

In this tutorial, the demo app uses example formulas with a combination of different functions depending on the control being used. Different app designs or customizations can use different formulas and functions. You can redesign the app and formulas for additional customization, or to meet your business requirements.

  1. Copy and paste the following formula as the OnSelect property value for the button analyzeText.

    ClearCollect( languageInfo, { id: "E393CEB2-56A8-4668-A5EB-A1254E9758F0", countryHint: "US", text: tiTextToAnalyze.Text } );
    TextAnalytics.LanguagesV3(languageInfo);
    If( chkLanguage.Value=true,
        ClearCollect( languageCollect,
            TextAnalytics.LanguagesV3(languageInfo).documents.detectedLanguage
        )
    );
    ClearCollect( phrasesInfo, { id: "E393CEB2-56A8-4668-A5EB-A1254E9758F0", language: "en", text: tiTextToAnalyze.Text } );
    If( chkPhrases.Value = true,
        ClearCollect( phrasesCollect,
            TextAnalytics.KeyPhraseV3(phrasesInfo).documents.keyPhrases
        )
    );
    ClearCollect( sentimentInfo, { id: "E393CEB2-56A8-4668-A5EB-A1254E9758F0", language: "en", text: tiTextToAnalyze.Text } );
    If( chkSentiment.Value = true,
        ClearCollect( sentimentCollect,
            TextAnalytics.SentimentV3(sentimentInfo).documents.confidenceScores
        )
    );      
    ClearCollect( nerinfo, { id: "E393CEB2-56A8-4668-A5EB-A1254E9758F0", language: "en", text: tiTextToAnalyze.Text } );
    If( chkNER.Value = true,
        ClearCollect( nerCollect,
            TextAnalytics.EntitiesRecognitionGeneralV3(nerinfo).documents.entities
        )
    );
    ClearCollect( elinfo, { id: "E393CEB2-56A8-4668-A5EB-A1254E9758F0", language: "en", text: tiTextToAnalyze.Text } );
    If( chkEL.Value = true,
        ClearCollect( elCollect,
            TextAnalytics.EntitiesLinkingV3(elinfo).documents.entities
        )
    ); 
    

    In this step, the formula uses the following functions.

  2. Copy and paste the following formula as the value of the Text property for the dLanguage label.

    "Detected language: " & First(languageCollect.detectedLanguage).detectedLanguage.name
    

    In this step, the formula uses First function to return and display the language identified by Text Analytics API.

  3. Select data source for gallerySS as sentimentCollect.

  4. Select the first row inside the gallerySS gallery. And then, copy and paste following formula for the Text property.

    "Positive: " & ThisItem.confidenceScores.positive &" Neutral: " & ThisItem.confidenceScores.neutral & " Negative: " & ThisItem.confidenceScores.negative
    

    In this step, the formula uses confidence scores analyzed by Text Analytics API to be displayed in the gallery.

  5. Select data source for galleryLE as elCollect.

  6. Select the second row inside the galleryLE gallery. And then, copy and paste following formula for the Text property.

    Concat(ThisItem.entities.url,url,", ")
    

    In this step, the Concat function is used to return a single comma-separated string with URLs for the listed entities identified by Text Analytics API.

  7. Select the first row inside the galleryLE gallery. And then, copy and paste following formula for the Text property.

    Concat(ThisItem.entities.name,name,", ")
    

    In this step, the Concat function is used to return a single comma-separated string with names of the listed entities identified by Text Analytics API.

  8. Select data source for galleryKP as phrasesCollect.

  9. Select the first row inside the galleryKP gallery. And then, copy and paste following formula for the Text property.

    Concat(ThisItem.keyPhrases.Value, Value, ", ")
    

    In this step, the Concat function is used to return a single comma-separated string with key phrases identified by Text Analytics API.

  10. Select data source for galleryNER as nerCollect.

  11. Select the first row inside the galleryNER gallery. And then, copy and paste following formula for the Text property.

    Concat(ThisItem.entities.text,text,", ")
    

    In this step, the Concat function is used to return a single comma-separated string with the entities identified by Text Analytics API.

  12. Save and publish the app.

Run and test the app

  1. Preview the app, or press F5 on the keyboard.

  2. Enter sample text, such as the following.

    Cognitive Services brings AI within reach of every developer—without requiring machine-learning expertise. All it takes is an API call to embed the ability to see, hear, speak, search, understand, and accelerate decision-making into your apps. Enable developers of all skill levels to easily add AI capabilities to their apps with modern application development.

  3. Select all five checkboxes.

  4. Select Analyze Text.

  5. Review the output.

    Analyzed sample text output.

Now that you've used Azure Cognitive Services in Power Apps by creating a demo app, you can customize the app interface and add more features.

Next steps

Add and configure controls

See also

Controls and properties in Power Apps
Text Analytics API documentation
Quickstart: Use the Text Analytics client library and REST API
Connector reference - Text Analytics