Speaking at SharePoint Saturday at Bangalore

Super Excited, I am going to speak in SharePoint Saturday at Bangalore


Join and Learn SharePoint Framework Updates with Cool Demo of SPFX 1.8.1 & 1.9.1 & V-Next.



Join and Learn from community leader and influence people .

Agenda of the session:-





Block your Date and visit us in Blue/Orange/Green/Yellow colored dress as a dress code ;)

Venue Details:-

Microsoft Office, Bangalore
Microsoft - Prestige Ferns Galaxy, 6/18, Bellandur Gate Road, Bellandur, Bengaluru, KA 560103

Please visit for more details http://www.spsevents.org/city/Bangalore/Bangalore2019

Speaking at Global Microsoft 365 Developer BootCamp at Bangalore

Glad to announce, I am going to speak in Global Microsoft 365 Developer BootCamp at Bangalore

Session:- "Hands On Lab " Building business solutions using SPFx and PowerApps



Join and Learn How to leverage powerapps solution with shar point framework extension.

Session:-  Simplify user authentication using Microsoft Identity Platform


Join and Learn How to build an application using  Microsoft identity with one sign in experience.


Event Agenda:-
https://www.eventbrite.com/e/global-microsoft-365-developer-bootcamp-2019-tickets-65257785794

Leverage Power Apps with SharePoint Framework Extension

PowerApps is an enterprise service that lets you connect, create, and share business apps with your team in minutes and help to build highly tailored application with optimize user experience. You can expedite the business solution with Power Apps as well as SharePoint Online.

Problem Statement

We are creating a solution for audit department. Audit department need to maintain the reports as well as reference document during audit process.

Blueprint approach


Let’s gets start, how we can design and implement such problem statement in optimize way.


Solution Approach

  1. Create Library to store content and List or Library to store all reference documents.
  2. Design SPFx extension solution to deploy at specific library, which will call Modal Dialog with Iframe.
  3. Design Power Apps form calls the same from Modal Dialog with Iframe section.
  4. PowerApps form then saves the data into SharePoint Online List or Library.

Prerequisites


1.      Office 365 subscription

2.      SPFX environment set up
3.     Install visual studio code for code editor - https://code.visualstudio.com/ 
4.     Office 365 Subscription should have access to PowerApps.

Implementation approach

Step1: Create Schema 

  • Login to SharePoint Online Teams or Communication site
  • Create Library with name: Audit Report
  • Create a List with name: Audit Reference
First, Let’s start with power apps form creation

Step 2: Navigate to PowerApps Form

Step 3: Create Canvas App 


Click on ‘Canvas app from blank’.





Step 4: Power App Name

  • Select app name as ‘Audit Report Reference’, click ‘Create’.

Step 5: Update the app size.

Go to file from menu bar, then select settings -> click on ‘screen size + orientation’ -> select custom give width as 1024 and height as 550.


Click Apply and back button.

Step 6: Rename the Screen

Rename default Screen1 as ‘EditScreen’. Clicking on 3 dots will give option to rename.


Step7 Insert Form and Rename to Edit Form
Click on ‘insert’ from menu bar. Select ‘Edit’ form.

Rename form1 as ‘EditFrom’

Step 8: Connect to SharePoint Online Data source

 Click on ‘connect to data’.


Search for SharePoint in data source options. And select SharePoint.

Type/paste your site URL, and click ‘connect’.

Select the list ‘Audit Reference’. Click ‘Connect’.

Step 9: Change Form DataSource and Form Mode

Select ‘EditForm’, and select data source as ‘Auditreference’ and default mode as ‘New’ from right pane properties.



Step 10: Populate Fields at Form

Edit form populate with fields.
Select datacardvalue of ‘Title’ field.


Step 11: Modify the default formula of Control

Change the default formula as ‘Param("Input")’

Step 12: Add Button Control and Set Navigation

Select ‘EditScreen’. Click on ‘insert ’ on menu bar. Click on button.


Button will get added to screen, rename the button as ‘Save’, in left side tree view.
Place (Drag and drop) the button below the screen,
Select the button and Change the button text as ‘Save’

Step 13: Add new screen for display message

  • Select ‘Insert’ in menu bar. Add new blank screen.
  • Rename that screen as ‘DisplayScreen’ in left side tree view.
  • Select displayScreen and add a label from menu bar insert option.
  • Rename the label as ‘DisplayMessage’.
  • Select label text option and give text as ‘Reference saved successfully, Please click close button to exit the window’
  • Select label. From menu bar select home, change the font size to 24. Alignment as center aligned.
  • Change the text color to blue.
  • Update the label position, size and padding in label properties as shown in below screenshot.

Step 14: Update Navigation

Select EditScreen. Then select ‘Save' button and update ‘OnSelect’ Property to ‘SubmitForm(EditForm);Navigate(DisplayScreen,ScreenTransition.Fade)


Step 15: Save and publish the PowerApps form

Go to ‘File’ from menu bar. Click on Save & Publish

Store the app id , we need to use the same in SPfx Extension.


Let’s Start with SharePoint Extension i.e. List View Command Set

Step 16: Create and SPFX Extention Solution


Navigate to folder structure and type Code  .
Command "yo @microsoft/sharepoint"

Create SPFx Extension Solution with below selected options


Set Command Name and Description

After couple of seconds, you will get below congratulation message. SharePoint Framework extension solution created successfully.

Step 17: Set Extension to specific Library

You can add extension to specific library as per below command  and use RowAccessor to get Row or Item values.


Add Reference “RowAccessor

Step 18: Add Modal Dialog Reference TSX file




Step 19: Add Index file to call out Modal Dialog Window


Step 20: Remove unused command set



Step 21: Modify the Template and Registration ID to Document Library



Step 22: Build, Bundle and Package the Solution

  • npm install "react-iframe" --save
  • gulp build
  • gulp bundle --ship
  • gulp package-solution –ship


Step 23: Deploy package to app catalog

Login to SharePoint site and redirect to ‘Site Contents’.
Click on ‘Apps for SharePoint’.
Click on ‘Upload’ button


Select .sppkg package from your solution and click on ‘Ok’
Click on ‘Deploy’ in dialog window.
Verify for successful deployment.  Also verify for deployment errors.

Step 25: Add an app to SharePoint site

Redirect to ‘Site Contents’.
Click on ‘New’ then ‘App’.
Add the solution ‘m-365-Bangalore-client-side-solution’.
Verify app is available in SharePoint ‘site contents’


SPFx solution can be dowload from GitHub also  https://github.com/manoj1201/SPFXExtwithPowerapps 

The Output


Finally, How output  look like

1. Select Item at Library and select List View extension


How easy and quick it was to build a custom PowerApps solution with SharePoint Framework Extension.
Hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.

Free Online Event | Simply user application authentication using Microsoft Identity

Microsoft identity platform is an evolution of the Azure Active Directory (Azure AD) developer platform. It allows developers to build applications that sign in all Microsoft identities and get tokens to call Microsoft APIs such as Microsoft Graph or APIs that developers have built




Register and Join  How to build an application using  Microsoft identity with one sign in experience.

https://www.c-sharpcorner.com/events/simply-user-application-authentication-using-microsoft-identity


Agenda:
  • What is Microsoft Identity Platform
  • Build an application using Microsoft Identity and How Simple it is.
  • How Microsoft Identity Works
  • Advance Scenarios i.e. Permission and Consent

Block your Date and Time & Donn't miss to join.


Venue: Free Online Event


Date & Time: 9th November , 6-7 PM.


Speaking at Global Microsoft 365 Developer BootCamp at Mumbai

Glad to announce, I am going to speak in Global Microsoft 365 Developer BootCamp at Mumbai


Join and Learn How to build an application using  Microsoft identity with one sign in experience.




Join and Learn from community leader and influence people .
Agenda of the session:-


Block your Date and Time & Donn't miss to join.


Store conversation to Cosmos DB Using Azure Bot Framework SDK V4

The Bot Framework SDK supports the preservation of the user input as it is received. Here, we will store each transaction into the memory object. The same object will be saved to the storage at the end. 
 
In this tutorial, you will learn the following.
  1. Setup a Cosmos DB.
  2. Create a basic bot.
  3. Setup configuration information to the Azure bot.
  4. Implement Cosmos DB storage to Azure bot.
  5. Build and test your bot with Emulator.
Below are the prerequisites.
 
The bot created in the previous article will be used here to help you understand how to build a basic bot.
 
Let's understand the information flow with respect to this article.


You can read and write directly to your storage object without using middleware or context object. This can be appropriate for data your bot uses to preserve a conversation or data that comes from a source outside your bot's conversation flow. In this data storage model, data is read directly from storage instead of using a state manager.
 
Step 1 - Set up Cosmos DB
  • Sign in to the Azure portal with your Azure credentials.
  • Click "Create a resource".
  • Click “Azure Cosmos DB".

  • Click Create a resource > Databases > Azure Cosmos DB
  • On the New account page, 
    • provide Subscription, 
    • Resource group information. 
    • Create a unique name for your Account Name field - this eventually becomes part of your data access URL name. 
    • For API, select Core(SQL), 
    • Provide a nearby Location to improve data access times.
  • Then click Review + Create.

Once validation has been successful, click Create.

The account creation takes a few minutes and Your Azure Cosmos DB account created.
  • Search for setting
  • Click Settings
  • Click the New Container.
  • Add Container area is displayed on the far right.
  • Fill new database id i.e. bot-cosmos-sql-db
  • Container id i.e. bot-storage
  • Partition key i.e. /id
  • Click Ok to create.

Cosmos DB container created with name bot-cosmos-sql-db


Keys to access new database collection, "bot-cosmos-sql-db" with a container id of "bot-storage." 


Step 2 - Create a basic bot
  • Browse Visual Studio 2017.
  • Select Bot Framework.
  • Select Echo Bot (Bot Framework V4).
  • Give the appropriate name and click ok to proceed.

Sample Echo Bot project will be created with basic functionality.
 
Step 3 - Setup configuration information to the Azure bot
  •  Firstly, install the NuGet package solution.

  • Add Cosmos DB configuration to Visual Studio solution. 
  1. private const string CosmosServiceEndpoint = "https://bot-cosmos-sql-db.documents.azure.com:443/";  
  2.         private const string CosmosDBKey = "vr1psMExluqGtp45XbIu4q1w2gmwfFksLr8GX4TDE5AkdRBiLE1fGmPsEoVpDXrM6qtOfLEGS25SzCO9G5XORg==";  
  3.         private const string CosmosDBDatabaseName = "bot-cosmos-sql-db";  
  4.         private const string CosmosDBCollectionName = "bot-storage";  
  5.   
  6.         // Create Cosmos DB  Storage.  
  7.         private static readonly CosmosDbStorage query = new CosmosDbStorage(new CosmosDbStorageOptions  
  8.         {  
  9.             AuthKey = CosmosDBKey,  
  10.             CollectionId = CosmosDBCollectionName,  
  11.             CosmosDBEndpoint = new Uri(CosmosServiceEndpoint),  
  12.             DatabaseId = CosmosDBDatabaseName,  
  13.         });  

Step 4 - Implement Cosmos DB storage to azure bot
 
To preserve conversation to Azure Cosmos DB, I am going to create an object which will hold properties of the same conversation, it will concatenate and store all at one instance. To get started, Create one class with basic properties. 
  • Create UtteranceLog.cs file and below properties 
  1. public class UtteranceLog : IStoreItem  
  2.    {  
  3.        // A list of things that users have said to the bot  
  4.        public List<string> UtteranceList { get; } = new List<string>();  
  5.   
  6.        // The number of conversational turns that have occurred          
  7.        public int TurnNumber { get; set; } = 0;  
  8.   
  9.        // Create concurrency control where this is used.  
  10.        public string ETag { get; set; } = "*";  
  11.    }  
It's just a screen shot of above code placement.

  • Replace OnMessageActivityAsyn method with below code section
  1. protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)  
  2.       {  
  3.           // preserve user input.  
  4.           var utterance = turnContext.Activity.Text;  
  5.           // make empty local logitems list.  
  6.           UtteranceLog logItems = null;  
  7.   
  8.           // see if there are previous messages saved in storage.  
  9.           try  
  10.           {  
  11.               string[] utteranceList = { "UtteranceLog" };  
  12.               logItems = query.ReadAsync<UtteranceLog>(utteranceList).Result?.FirstOrDefault().Value;  
  13.           }  
  14.           catch  
  15.           {  
  16.               // Inform the user an error occured.  
  17.               await turnContext.SendActivityAsync("Sorry, something went wrong reading your stored messages!");  
  18.           }  
  19.   
  20.           // If no stored messages were found, create and store a new entry.  
  21.           if (logItems is null)  
  22.           {  
  23.               // add the current utterance to a new object.  
  24.               logItems = new UtteranceLog();  
  25.               logItems.UtteranceList.Add(utterance);  
  26.               // set initial turn counter to 1.  
  27.               logItems.TurnNumber++;  
  28.   
  29.               // Show user new user message.  
  30.               await turnContext.SendActivityAsync($"Echo" + turnContext.Activity.Text);  
  31.   
  32.               // Create Dictionary object to hold received user messages.  
  33.               var changes = new Dictionary<string, object>();  
  34.               {  
  35.                   changes.Add("UtteranceLog", logItems);  
  36.               }  
  37.               try  
  38.               {  
  39.                   // Save the user message to your Storage.  
  40.                   await query.WriteAsync(changes, cancellationToken);  
  41.               }  
  42.               catch  
  43.               {  
  44.                   // Inform the user an error occured.  
  45.                   await turnContext.SendActivityAsync("Sorry, something went wrong storing your message!");  
  46.               }  
  47.           }  
  48.           // Else, our Storage already contained saved user messages, add new one to the list.  
  49.           else  
  50.           {  
  51.               // add new message to list of messages to display.  
  52.               logItems.UtteranceList.Add(utterance);  
  53.               // increment turn counter.  
  54.               logItems.TurnNumber++;  
  55.   
  56.               // show user new list of saved messages.  
  57.               await turnContext.SendActivityAsync($"Echo " + turnContext.Activity.Text);  
  58.   
  59.               // Create Dictionary object to hold new list of messages.  
  60.               var changes = new Dictionary<string, object>();  
  61.               {  
  62.                   changes.Add("UtteranceLog", logItems);  
  63.               };  
  64.   
  65.               try  
  66.               {  
  67.                   // Save new list to your Storage.  
  68.                   await query.WriteAsync(changes, cancellationToken);  
  69.               }  
  70.               catch  
  71.               {  
  72.                   // Inform the user an error occured.  
  73.                   await turnContext.SendActivityAsync("Sorry, something went wrong storing your message!");  
  74.               }  
  75.           }  
  76.       }  
Step 5 - Build and Test your bot with Emulator.
  • Press F5 to run the Visual Studio solution locally.
  • Start the bot emulator and then connect to your bot in the emulator:
  • Click the Create new bot configuration link in the emulator "Welcome" tab.
  • Fill in fields to connect to your bot, given the information on the webpage displayed when you started your bot.
  • Interact with your bot
  • Send a message to your bot. The bot will list the messages it has received

OutPut
  • Navigate to Azure Cosmos DB instance and expand the items under bot-storage.
  • Select the utterances log,
  • All asked queries turn to storage.


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