Adaptive Card Templating With Azure Bot Framework SDKV4

 Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange. When delivered to a specific app, the JSON is transformed into native UI that automatically adapts to its surroundings. It helps design and integrate light-weight UI for all major platforms and frameworks.

 

Adaptive Cards Templating is a revolutionary change. It enables the separation of Data & Layouts. 

Let's understand the Adaptive Cards online designer. The designer contains multiple panels that serve different purposes, as shown in the following image:

1. Card Elements
   List of all elements available for use within Adaptive Cards
   
   
2. Rendered Card
   Preview rendering of the card as it would appear in the currently selected host app.
   
   
3. Card Payload Editor
   The browser-friendly JSON editor contains the source of the Adaptive Card that's rendered in the Rendered Card pane.
   
   
4. Card Structure
   The card is represented in this panel as a hierarchical structure. Notice that as you select elements in this panel, the corresponding control is highlighted in the Rendered Card pane.
   
   
5. Element Properties
   The properties, including those that aren't specified in the source of the Adaptive Card, are displayed in this panel for the control currently selected in the Card Structure panel.
   
   
6. Sample Data Editor
   This panel contains the JSON used when using the templating capability of Adaptive Cards.   

Templating enables the separation of data from layout in your Adaptive Card. The template language is the syntax used to author a template

Binding syntax changed from {...} to ${...} i.e. “text": "Hello {name}" becomes "text": "Hello ${name}"

 

Static Card Payload

1. {  
2.    "type": "TextBlock",  
3.    "text": "Manoj Mittal"  
4. }

Template Payload

1. {  
2.    "type": "TextBlock",  
3.    "text": "${UserName}"  
4. } 

Let's create bot framework sdkv4 project and associate it with adaptive card templating.

 

Step 1 - Build Bot Framework  SDKV4 C# Project

 

Prerequisties - Azure Bot Framework template installed with Visual Studio 2019.

• Launch Visual Studio 2019 
• Select Create new project 
• Select Azure Bot Framework (.Net Core 2.1 or 3.1) 
• Create Project.

Step 2 - Create Adaptive Card Template

• Login to https://adaptivecards.io/designer/
• Card Element Section desing your card with placehoder, which will be used to bind the data at client side. 

1. {  
2.   "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",  
3.   "type": "AdaptiveCard",  
4.   "version": "1.2",  
5.   "body": [  
6.     {  
7.       "id": "cardHeader",  
8.       "type": "Container",  
9.       "items": [  
10.         {  
11.           "id": "planetName",  
12.           "type": "TextBlock",  
13.           "weight": "Bolder",  
14.           "size": "Medium",  
15.           "text": "${name}"  
16.         }  
17.       ]  
18.     },  
19.     {  
20.       "type": "Container",  
21.       "id": "cardBody",  
22.       "items": [  
23.         {  
24.           "id": "planetSummary",  
25.           "type": "TextBlock",  
26.           "wrap": true,  
27.           "text": "${summary}"  
28.         },  
29.         {  
30.           "id": "planetDetails",  
31.           "type": "ColumnSet",  
32.           "columns": [  
33.             {  
34.               "type": "Column",  
35.               "width": 100,  
36.               "items": [  
37.                 {  
38.                   "id": "planetImage",  
39.                   "size": "Stretch",  
40.                   "type": "Image",  
41.                   "url": "${imageLink}"  
42.                 }  
43.               ]  
44.             },  
45.             {  
46.               "type": "Column",  
47.               "width": 250,  
48.               "items": [  
49.                 {  
50.                   "type": "FactSet",  
51.                   "facts": [  
52.                     {  
53.                       "id": "orderFromSun",  
54.                       "title": "Order from the sun:",  
55.                       "value": "${id}"  
56.                     },  
57.                     {  
58.                       "id": "planetNumSatellites",  
59.                       "title": "Known satellites:",  
60.                       "value": "${numSatellites}"  
61.                     },  
62.                     {  
63.                       "id": "solarOrbitYears",  
64.                       "title": "Solar orbit (*Earth years*):",  
65.                       "value": "${solarOrbitYears}"  
66.                     },  
67.                     {  
68.                       "id": "solarOrbitAvgDistanceKm",  
69.                       "title": "Average distance from the sun (*km*):",  
70.                       "value": "${solarOrbitAvgDistanceKm}"  
71.                     }  
72.                   ]  
73.                 }  
74.               ]  
75.             }  
76.           ]  
77.         },  
78.         {  
79.           "id": "imageAttribution",  
80.           "type": "TextBlock",  
81.           "size": "Small",  
82.           "isSubtle": true,  
83.           "wrap": true,  
84.           "text": "${imageAlt}",  
85.           "weight": "Lighter"  
86.         }  
87.       ]  
88.     }  
89.   ],  
90.   "actions": [  
91.     {  
92.       "type": "Action.OpenUrl",  
93.       "title": "Learn more on Wikipedia",  
94.       "url": "${wikiLink}"  
95.     }  
96.   ]  
97. }  

Card will look like this,

Create Folder into Visual Code Project name - Resource.

 

Add Json Template with the name of card.json.

Create Folder into Visual Code Project name - Resource.

 

Add Json Template with the name of card.json.

1. private readonly string _cards = Path.Combine(".", "Resources", "Card.json");  

On Message Activity Function, Load Json into template variable

1. var adaptiveCardJson = (File.ReadAllText(_cards));  
2.            AdaptiveCardTemplate template = new AdaptiveCardTemplate(adaptiveCardJson);  

Step 4 - Add Data  and bind with template variable

 

Add reference of AdaptiveCards.Templating.  

 

Note

I used static data or hard coded data here for article purposes. Data Json can be rendered via API also.

1. var adaptiveCardJson = (File.ReadAllText(_cards));  
2.            AdaptiveCardTemplate template = new AdaptiveCardTemplate(adaptiveCardJson);  
3.            var myData = new  
4.            {  
5.                id = "1",  
6.                name = "Saturn",  
7.                summary = "Saturn is the sixth planet from the Sun and the second-largest in the Solar System, after Jupiter. It is a gas giant with an average radius about nine times that of Earth. It has only one-eighth the average density of Earth; however, with its larger volume, Saturn is over 95 times more massive. Saturn is named after the Roman god of wealth and agriculture; its astronomical symbol (♄) represents the god's sickle.",  
8.                solarOrbitYears = "29.46",  
9.                solarOrbitAvgDistanceKm = "1433525000",  
10.                numSatellites = "82",  
11.                wikiLink = "https://en.wikipedia.org/wiki/Saturn",  
12.                imageLink = "https://upload.wikimedia.org/wikipedia/commons/c/c7/Saturn_during_Equinox.jpg",  
13.                imageAlt = "NASA / JPL / Space Science Institute [Public domain]"  
14.            };  
15.            string cardJson = template.Expand(myData);  
16.            var cardAttachment = CreateAdaptiveCardAttachment(cardJson);  

Now turn to render the adaptive card.

1. private static Attachment CreateAdaptiveCardAttachment(string _card)  
2.        {  
3.            var adaptiveCardAttachment = new Attachment()  
4.            {  
5.                ContentType = "application/vnd.microsoft.card.adaptive",  
6.                Content = JsonConvert.DeserializeObject(_card),  
7.            };  
8.            return adaptiveCardAttachment;  
9.        }  

Step 5 - Run Code locally (F5) using Bot Framework Emulator

 

Data and Layout separated while rendering card. Layouts exists at client side and binding of data also happens at client side. As data will come from the API, it  will have server side execution.

 

Earlier we used to bind the Data and Layout at server side and traverse the entire structure. 

Code Base can be downloaded from here.

 

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article. 

Join me at M365 Saturday Event Bangalore 2020

Catch me at Microsoft 365 Saturday, Bangalore!

About the event: https://lnkd.in/dchGV8i
Register: https://lnkd.in/dbyMiN3

🔊 Topic: Implement SPFX - CI / CD pipeline using Office365 CLI & SharePoint ALM
📅 When: 12 Dec, 2020 | ⏰ 3:00 PM IST
📌 Track: Dev Pro

Schedule:-

Join me at SharePoint Saturday Event Ahmedabad 2020

🔊 Topic: Demonstrating the Business Value of Power Virtual Agents

📅 When: 05 Dec, 2020 | ⏰ 11:10 AM IST

📌 Track: IT Pro/End-User

Schedule : https://www.spsevents.org/event/ahmedabad2020/schedule/
Register: https://www.eventbrite.com/e/m365-saturday-ahmedabad-2020-tickets-124962451055

Azure AD B2B Application with Google Federation as an Identity Provider

 Introduction 

 

In today's world, the configuration of networks is driven by the needs of users and business which have changed over time.

 

Organizations can't assume users will be in one place, rather they are on both internal and/or external networks. Users don't access networks with one device either, they have a myriad of devices and types of software architectures they use including on-premises apps, SAAS apps, mobile apps, and so on.

 

How are you as a developer supposed to properly secure your applications and your user's access to information across so many scenarios?

 

Let's understand how to set up a business-to-business application with External Identity, i.e. Google Federation.

 

External Identities is a set of capabilities that enables organizations to secure and manage any external user, including customers and partners. Building on B2B collaboration, External Identities gives you more ways to interact and connect with users outside your organization.

Note

Google Federation works with Gmail Account users.

 

Step 1 - Configure a Google Developer Project

 

Create a new project in the Google Developers Console to obtain a client ID and a client secret that you can later add to Azure Active Directory (Azure AD).

• Navigate to https://console.developers.google.com, and sign in with your Google account.
• Create a new project: On the dashboard, select Create Project, give the project a name (for example, Demp App ), and then select Open.

Step 2 - Add Project Name and Select Create.

Step 3 - Configure Oauth Consent Screen 

• Once the project is created, select your project.
• Select OAuth Consent Screen
• Select External
• Click Create

• Once the user clicks to create and navigate to App Information Screen
• Add an App Name i.e. Demo App
• Select the User Supported Email from DropDown

• Scroll and Add Authorized Domains and enter microsoftonline.com
• Add Developer Contact information
• Click save and continue to proceed.

Step 4 - Add Credentials details

 

Select Credentials, click create credentials and select "Oauth Client ID"

• Add Application Type as "Web Application" and give the application a suitable name.
• Under Authorized redirect URLs add:

https://login.microsoftonline.com

https://login.microsoftonline.com/te/<tenant ID>/oauth2/authresp

(where <tenant ID> is your tenant ID) 

Now you will prompt with OAuth Client Created. Copy and Paste securely Client Id and Client Secret. It will be used to add an identity provider into Azure AD Portal.

Step 5 - Configure the Google Federation in Azure AD

• Navigate to https://portal.azure.com.
• Select App Registration -> New Registration
• To register an application add Name i.e. demoapp01 and leave other information as-is click to register.
• Navigate to External Identities and Click to "All Identity Providers"
• Select "+Google" to configure the federation.

Add the copied Client ID and Client Secret and click save to continue.

Now the Google Federation configuration is done. Let's start with Application association with External Identities.

 

Step 6 - Configure User Flow

 

User flows that enable users to sign up, sign in, or manage their profile. (As of today, this feature is in public preview).

• Select User Flow and click to "+ New user flow".

• Add the name of the newly created flow, i.e. Demo App, and select the Federated Google Identity Provider

• The User flow has been created and associated with the Google Federation identity provider.
• For the associate application or Azure, add an instance created at step no.5. Select an application and proceed.

We are done with federated configuration and integration with an Azure AD Application, let's see how the output looks like now.

Output Screen 1

 

• As the user runs the application and clicks on the sign in button, a login prompt will appear, If user click "Create New or Sign In Option", a sign in with Google option will appear.
• As the user uses the google option to sign in, a request will go to Google and a Google sign in screen will appear
• Once the user enters their Google credentials, the application asks for minimal permission consent approval, which is the default setting to read the user profile from Google.
• As users accept the consent and social account as an external identity allowed to log in to the organization created, i.e. Business to Business Application. 

I hope you enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.

Join me at Global Microsoft365 Developer Bootcamp - Bangalore 2020

Join me at Global Microsoft365 Developer Bootcamp - Bangalore 2020 at Staurday

I shall talk about "Design contextual user interface with Adaptive Cards " Cool Demo with Adaptive Card Templating

For Registration: https://www.eventbrite.com/e/global-microsoft365-developer-bootcamp-bangalore-2020-tickets-116608090939?aff=ebdssbonlinesearch&fbclid=IwAR2VtuJ_yG006saDIYJz_6rDOOMurJglSFokTdF6WvlqPnkiTKKthv8iXJI

Event Date and Time: Saturday, 7th November 2020, ⏱️01: 30 PM IST