Introducing Power BI Embedded talk at Cloud Summit

Hi All,

Earlier today, I have presented "Introducing Power BI Embedded" top that covers platform capabilities and tools in Cloud Summit event at Microsoft Chevy Chase office.

The session covered Power BI Platform capabilities, tools and Power BI Embedded as PaaS option in Microsoft Cloud platform.

I have got a lot of questions about Power BI data set scheduling, working with data capabilities including direct queries vs. import options while authoring reports in Power BI desktop. I also covered the need for Power BI Gateway for hybrid scenarios.

Introducing Power BI Embedded from Mostafa Elzoghbi

Enjoy.

Extending Product Outreach with Outlook Connectors

Hi All,

I presented last Saturday at SharePoint Detroit a talk with title "Extending Product Outreach with Outlook Connectors"; Since i covered how to utilize office 365 groups to extend product outreach using outlook group connectors with demos.

Session Description:

Office 365 Connectors is a brand new experience that delivers relevant interactive content and updates from popular apps and services to Office 365 Groups. We are now bringing this experience to you, our Office 365 customers. Whether you are tracking a Twitter feed, managing a project with Trello or watching the latest news headlines with Bing—Office 365 Connectors surfaces all the information you care about in the Office 365 Groups shared inbox, so you can easily collaborate with others and interact with the updates as they happen. Session will cover how to build your office 365 connectors and how to work with Microsoft to help you build your company one.

Extending Product Outreach with Outlook Connectors from Mostafa Elzoghbi

Event Url: http://www.spsevents.org/city/Detroit/Detroit2016/home

Presentation demos are in GitHub:  https://github.com/melzoghbi/OutlookConnectorSDK

Enjoy!

Easily construct Outlook Group Connector JSON messages in C#

Hi All,

If you are building an Outlook Group Connector that you are spending a lot of time writing JSON message & specifying different schema elements and attributes to be able to build a canvas that looks like this below figure, so i got good news for you!

I got your back and published an Outlook Group Connector SDK ver. 1.1 nuget package that includes tons of extension methods and features that helps your easily build your JSON payload message.


How to send a message in C# to a group:


                Message message = new Message()
                {
                    summary = "This is the subject for the sent message to an outlook group",
                    title = msg
                };
                message.AddSection(nSec1);
                message.AddFacts("Facts", facts);
                message.AddImages("Images", images);
                message.AddAction("check details here", "http://mostafaelzoghbi.com");


                var result = await message.Send(webhookUrl);


GitHub Code and Sample links:

1) GitHub Repo for SDK and Samples apps including console & web apps (link).
2) NuGet package that has been published to use it in your apps (link) or search for "Office365ConnectorSDK" in VS 2015.

Hope this helps.

Get started with Outlook Connectors with a sample showcase application

Hi All,

Office 365 Connectors provide a compelling extensibility solution for developers. Developers can build connectors through incoming webhooks to generate rich connector cards. Additionally, with the new "Connect to Office 365" button, developers can embed the button on their site and enable users to connect to Office 365 groups.

A sample showcase for outlook connectors integration

I have built this application that demonstrates outlook connector integration showcase that includes an integration for "Connect to Office 365" button into a third party website and how to send a detailed canvas message to a group.

How to Use it:

• Outlook Connector landing page: Click on "Enterprise" menu item, install our connector into one of your office 365 groups.
• Send a message to any group: Click on "Send Message" menu item, set a title message and group name and click on Send button. Check your group and you will be notified with a full detailed canvas message.

Application Url: http://outlookconnectorwebapp.azurewebsites.net/

Useful Resources: 

Connectors Overview

A general overview of what Office 365 Connectors are and how end-users interact with them.

Developer Documentation

Complete documentation for building Office 365 Connectors.

Developer Sandbox

A sandbox environment for developer experimentation.

Connectors Developer Dashboard

Create and manage outlook connector settings in this dashboard.

Enjoy!

How to call cURL from Command Line

Hi All,

I installed cURL tool on my windows 10 machine, after i installed it; I tried to use this tool to post JSON messages over HTTP web hook endpoint.  But when i open the command line and type in curl, i get the following error:

'curl' is not recognized as an internal or external command, operable program or batch file.

By default, when you install cURL it gets installed on this default directory:
C:\Program Files\cURL

If i navigate to the installation path in command line window and type in curl, the tool will start working. but because i don't want to remember this path every time i want to use this tool, i need to add it as a system variable so the system knows where to points to when i call it.

Here is how to accomplish this:

1) Open Control Panel.
2) Click on System and Security.
3) Click on Advanced system settings link on the left pane.
4) This will open system properties pop up window.
5) Click on Environment variables button from advanced tab.
6) Click on New button from Systems Variables section (bottom section).
7) Add the following variable name information:

Variable name: curl
Variable value: C:\Program Files\cURL\bin

8) Click on OK button.
9) Open a new window from command line and type curl.
10) Now you can start using curl tool from command line without the need to navigate to the installation directory of the tool.

Enjoy!

Unleash the power of office add-ins with Office Development Patterns and Practices

Hi All,

I was pleased to speak at Cap Area .NET SharePoint Special Interest Group user group yesterday.
In this presentation i covered the underlying concepts of extending office applications and how Microsoft is supporting the component architecture by enabling web extensiblity framework (WEF); hence the WEF is the core runtime platform for building web based extensions or addins to office applications.

I covered the following topics:
1) Office Add-Ins overview: Add-ins shapes/types, runtime framework, anatomy of office add-in.
2) Building Office Add-Ins using open source tools such as: Yeoman tool (yeoman.io) provides a scaffolding platform for office addins templates. while when creating an add-in using yeoman tool you will be able to use any text editor to develop your office add-in.

2) VS tools for Office Add-ins: this covers updated tools in Office Developer tools in VS 2015 version 2 that contains web addins and VSTO templates as well.

Patterns and Practices in Building Office Add-ins from Mostafa Elzoghbi

Code Samples:
1) UPS Tracker Add-in on Github is here.
2) Using Yeoman Tool for building Office Add-ins: https://code.visualstudio.com/Docs/runtimes/office


Enjoy!

Content was blocked because it was not signed by a valid security certificate when running Office Add-Ins

Hi All,

While i was developing an office add-in and using IE to view a deployed outlook add-in i was getting the following error:

Content was blocked because it was not signed by a valid security certificate.

It turns out that this issue is related to a self signed certificate that is being used on my local web server using gulp-webserver plugin; since i am using Visual Studio code in developing my office add-ins.

If you want to configure gulp server to use a certificate, open gulpfile.js in your project and add https to the configuration of gulp web server as explained here.

The other solution is to use chrome instead and not IE since IE requires self signed certificates to be added as a trusted certificate in your machine. So if you don't want to go through adding a self signed certificate to trusted certificates store, just use chrome and your add-in will load with no issues.

Hope this helps.

Build Interactive Analytics using Power BI

Hi All,

I was happy to speak at SyntaxCon conference at Charleston, SC. I had great conversations with speakers, organizers and attendees about Tech scene in Charleston. It was my pleasure giving my talk about Power BI and interactive analytics.

** Session Title: Build Interactive Analytics using Power BI

** Session Details:

The talk will cover how to build interactive analytics, dashboards and reports in PowerBI. Using multiple data sources, synchronization schedule and sharing capabilities in PowerBI. The PowerBI web and client tool provides sophisticated tools for non-technical users to build interactive dashboards.

The session will be demo driven and will cover different use cases that use multiple data formats and sources.

-- PowerBI client tool & web capabilities

-- Interactive Dashboards and Reporting.

-- Platform capabilities such as sharing, scheduling and more.

** Presentation:

Build Interactive Analytics using Power BI from Mostafa Elzoghbi

Thanks for who attended my session and asked cool questions.

Enjoy!

Conference Link: https://2016.syntaxcon.com/speakers/spotlight-mostafa-elzoghbi/

Integrate a Power BI report into an app

Hi All,

This blog post is a walk through article on how to embed a PowerBI report in an application. This blog post with source code is available in GitHub.

I can say this feature is one of the most requested features from clients i worked with directly.
Below is a screen shot of the running application i have created that contains an integrated PowerBI report i have created in Office 365 tenant using PowerBI.

How to run the application:

1) Register your application in Azure AD, here are the configurations we need to update ASP.NET MVC app:

• Client Id
• Secret Id
• Return Url: If you want to change it from the original app code.

Below screen shots show Azure AD (AAD) app registration settings in Azure portal:

2) Login to your PowerBI (app.powerbi.com) and get the Report Id you want to embed in the app:

Select a report that you would like to embed, grab a report Id from the browser url.
Below screen show shows a selected report "RPT1" and highlighted ReportId we will embed in our app.

3) Open ASP.NET MVC Project settings in VS 2015 and update Client Id and Secret Id from Azure Portal after registering your app.

4) Open index.cshtml and update iframe src attribute by adding the Report Id we captured in step #2.

 <iframe ID="iFrameEmbedReport" src="https://app.powerbi.com/reportEmbed?reportId=11156ed2-ede7-4b60-ac26-10cda004bdee" height="768px" width="1024px" frameborder="1" seamless></iframe>

 5) Run the app, Click on o365 login, Sign In and then PowerBI report will be showing after your login to the app.


Demo source code url: https://github.com/melzoghbi/PowerBIEmbeddedApp


References:
1) Integrate a Power BI tile or report into an app

https://powerbi.microsoft.com/en-us/documentation/powerbi-developer-integrate-a-power-bi-tile-or-report/

2) Power BI Embedded home page:
https://azure.microsoft.com/en-us/services/power-bi-embedded/

Enjoy!

No authUri provided nor found in O365Auth.authUri

Hi All,

While building an Apache Cordova app to integrate with Office 365  API. I connected my cordova app with office 365 by using Add -> Connected Service option in Visual Studio 2015. When i run my Cordova app try to login to office 365. I am getting the following error:

 No authUri provided nor found in O365Auth.authUri

I am using Microsoft.Office365.ClientLib.JS which allow developers to integrate with office 365 services.

The error because the Setting variable is not defined in O365Auth object. So add the follow code in o365auth.js file:


var O365Auth;
(function (O365Auth) {
    var Token = (function () ....)();
    O365Auth.Token = Token;

  //  define settings
    var Settings = {
        clientId: '6de88843-3a72-484c-af8d-3f26d2c3dd52',
        authUri: 'https://login.microsoftonline.com/common/',
        redirectUri: 'http://localhost:4400/services/office365/redirectTarget.html',
        domain: 'MostafaTenant.onmicrosoft.com',
        tenantId: '3323232-13e6-232323-a52a-323234423232'
    };

    O365Auth.Settings = Settings;


Run your project and the rest of your code will pull o365 settings :-)

Hope this helps.

Office Add-Ins development best practices

Office Add-Ins development best practices

In this video i am covering office add-ins development best practices. The video covers how to provide clear value for Office add-ins, UX principles, market your add-in, publishing strategies, monitor and optimize add-in performance. The video is covering what you need to do from the inception phase of creating an add-in till publishing add-ins to your customers.

 

If you would like to get to know more about "The basics of office add-ins", i have posted earlier another video for that here:

https://channel9.msdn.com/Blogs/MostafaElzoghbi/Introduction-to-Office-Add-Ins

Enjoy!

Patterns and Practices in building Office Add-Ins

Hi All,

I'd like to share my presentation on Patterns and Practices in building office add-ins.

I am sharing the best practices to have successful Add-In listing in Office store.
In this presentation i cover the importance of using Fabric UI in developing User Interface elements in Office Add-Ins, Web Extensible Framework (WEF), Napa tools, Development best practices including: Value Prop, Marketing, UX, Optimization technique and security, Identity management in Azure AD, Publishing options, Graph API integration and VS project templates.

PnP in building office add ins - public from Mostafa Elzoghbi

Hope it helps and keep hacking o365!

Build Apps for Office (Word & Outlook) and Office 365 API

Hi All,

During my sessions in the office 365 DevCamp in Atlanta, I have demoed how to build applications for Office (Word & Outlook) and How to integrate with Office 365 API from ASP.NET MVC application.

 I have uploaded the source of 3 applications, The zip file contains the following:

1) Word Application: Read items from SharePoint lists and interact with a word document.

2) Outlook Mail App: An app that read email messages content and extract links within the message and has the ability to add these links to SharePoint lists.

3) MVC Research Tracker App: an MVC application that is connected to office 365 tenant and read user's contacts, files (from OneDrive) and add content to SharePoint lists.

These applications you can download, register these apps against your Office 365 tenant AD and run them (F5) and have fun!

Source files download link: http://1drv.ms/1Feqy1I

I have uploaded the manifest files as well, that contains the registration information i have for each of these applications in my office 365 tenant Active Directory. These files are json files, you can open it in Notepad and configure the settings and permissions as needed. DON'T copy any Auto Generated Ids such as client id or AppKey.

All these demos require an office 365 tenant to develop against, so you will be able to have: mail, OneDrive, SharePoint sites and more, if you don't have, create a new account (30-day trial) here:

Sign up for Office 365 Development Account



Word App is running (Task Pane) inside Office word 2013:

Enjoy!

Office 365 Dev Camp is near your city ?

Hi All,

If you are looking to get up to speed in office 365 application development. I have good news for you!

Microsoft is planning to have Office 365 in every major city in US, check out the schedule and save your seat today.

The dev camp is a one day deep dive in building office 365 applications including Office Word, Outlook, SharePoint Apps, Office 365 API and more.

Check out all office Dev Camps events in the below link:

http://aka.ms/msdevcamps


For local friends, The Washington DC office 364 dev camp event will be in 6/1 for Office 365 Dev Camp!


DC office 365 Dev Camp direct link to sign up!



The link above has other dev camps for cloud data and IoT dev camps.


Enjoy!

How to add a required field validator in SharePoint 2013 Application Pages using HTML5

Hi All,

I was developing a custom application page in SharePoint 2013, while adding all my controls in the custom application page i wanted to add a required field validator to a textbox control.

As a .NET developer, you will find the normal action is to add a required field validator to your page, which basically works, but in this post i want to show you that you can easily incorporate HTML5 validation attributes in SharePoint 2013 pages!!

In HTML5, you can add an attribute called required to any control, which tells the browser that this control is a required control.

<%@ Register TagPrefix="spuc" Namespace="Microsoft.SharePoint.WebControls"
             Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<spuc:InputFormTextBox ID="txtName" runat="server" class="ms-input"
      Title="Full Name" TextMode="SingleLine" Columns="40" required />


Adding a required attribute to your markup control will flag this control as a required control in your SharePoint page.

You can apply any other HTML5 validation attribute and it will render correctly in any SharePoint Page with no additional setup.

Here is a cool blog about how to apply HTML5 validation types into input control:
http://www.the-art-of-web.com/html/html5-form-validation/
 

Enjoy!



--ME

Tips on SharePoint 2013 Branding and UX Design

Hi All,

I had the opportunity to work with SharePoint 2013 Branding and building new UX related components such as: Master Pages, Page Layouts and Content Types development on a SharePoint 365 site or SharePoint 2013.

I found some interesting tips and tricks and i'd like to combine them all in this blog post for End Users, Designers, Architects and anyone who works in SP branding and customization.

Here are some general information and tips to know ahead before getting in creating new UX SharePoint components:

1) If you are new to SharePoint and you want to understand how MasterPages are connected to page layouts and actual pages, I recommend reading this article first:
http://msdn.microsoft.com/en-us/library/jj191506.aspx

2) In SharePoint 2013, You can create your master page in any html editor --> sweet!
3) Once you are signed off on the new look and feel of the new master page in HTML, A good option: you can map the new master page in html with all related javascript and CSS files to the SharePoint Master page gallery, Here is how to do it:
http://msdn.microsoft.com/en-us/library/jj733519.aspx

4) Another option is: you can directly convert the html master page to an actual master page; where SharePoint will create a new file with .master extension and add SharePoint attributes and place holders used by SharePoint, here are the steps using the design manager:
http://msdn.microsoft.com/en-us/library/jj822370.aspx

5) Design Manager is a new feature in the publishing sites, you can use it to brand public facing SharePoint sites and Office 365 sites. Read an overview about How to use Design Manager in SharePoint 2013:
http://msdn.microsoft.com/en-us/library/jj822363.aspx

6) Once you create your new master page, you might need to create new set of page layouts that provide nicer UX to your visitors, This article shows how to create new page layouts in SharePoint 2013 and office 365:
http://msdn.microsoft.com/en-us/library/jj822368.aspx

7) If you want to have different UX for Mobile and tablet users, you should create different channels aka different master pages and page layouts for different targeted devices, this article describes how to implement this in your site:
http://msdn.microsoft.com/en-us/library/jj862343.aspx


Hope this helps, drop me a line if you have any questions or clarifications.



Reference:
- Build Sites for SharePoint 2013:
http://msdn.microsoft.com/en-us/library/jj163242.aspx