MS Teams App development with ngrok

Requirements

First things first

The entire code can be found on GitHub: https://github.com/Solutions2Share/SampleTeamsTabApp.

You can download or clone the sample, or you could follow the instructions and create a new Sample Teams Tab App.

MS Teams App Studio

Install the MS Teams App Studio via the following Link: https://aka.ms/InstallTeamsAppStudio

You need to log in with the account you want to develop with and install it into your tenant. You can find the complete Microsoft documentation under https://docs.microsoft.com/en-us/microsoftteams/platform/get-started/get-started-app-studio

Create a Sample MVC Project

Go to Visual Studio and create a new MVC Application:

As we want to create a MS Teams Tab Application you need to add a Controller and the following Views for our sample:

MSTeamsController.cs

_LayoutMSTeams.cshtml:

Configuration.cshtml:

Index.cshtml:

TeamsAppConfigureTab.js:

In line 46 we define the URL for the tab that will be created. Here you can fill some parameters so MS Teams will automatically detect them and fills them with the correct values. You could use for example:

  • {entityId}: The ID you supplied for the item in this tab when first configuring the tab.
  • {subEntityId}: The ID you supplied when generating a deep linkfor a specific item within this tab. This should be used to restore to a specific state within an entity; for example, scrolling to or activating a specific piece of content.
  • {loginHint}: A value suitable as a login hint for Azure AD. This is usually the login name of the current user, in their home tenant.
  • {userPrincipalName}: The User Principal Name of the current user, in the current tenant.
  • {userObjectId}: The Azure AD object ID of the current user, in the current tenant.
  • {theme}: The current UI theme such as default, dark, or contrast.
  • {groupId}: The ID of the Office 365 Group in which the tab resides.
  • {tid}: The Azure AD tenant ID of the current user.
  • {locale}: The current locale of the user formatted as languageId-countryId (for example, en-us).

More information in the documentation under https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/tabs/tabs-context

TeamsAppContextInitializer.js:

Test your application with F5 and remember your portnumber. You should see the following screen:

Ngrok configuration

What is ngrok?

Ngrok is a tool which provides a public URL to your local hosted solutions. It creates a tunnel service to your localhost and functions as a DNS tool.

What is it useful for?

Ngrok is used whenever a public endpoint is needed for your local hosted application. For example, it can be used as a webhook URL. You can also use it for Microsoft Teams Bots and Microsoft Teams Apps.

Ngrok is not suitable for SharePoint Provider hosted Apps.

What are the advantages?

It is much faster than deploy it to e.g. an Azure-website.

  • Fast Debugging possible, since it is hosted locally and not on azure (Remote Debugging is very slow)
  • You don’t have to deploy changes to Azure every time
  • Reduced Azure costs

Installation

Visit ngrok.com. Register yourself and download the file:

Add ngrok to the Path Variables.

Run cmd and test it with “ngrok”:

Connect ngrok to your account by running a cmd with the following content:

ngrok authtoken <YOUR_AUTH_TOKEN>

After connecting, do a restart!

 

Start Visual Studio

Find out the port by starting your app (e.g.: MVC Website) with F5:

Run the following command in a cmd window where ‘55065’ is the port which your application is running with:

ngrok http 55065–host-header=localhost

NOTE: You don’t need to host your application with HTTPS locally. Ngrok will automatically redirect it to the http localhost.

After starting your application and going into the forwarding URL (in our example: https://6ec8f719.ngrok.io) you will see your app loading. If you want a static subdomain every time you start the application, you will have to use the paid version of ngrok.

Otherwise, each time you run the command, you will get a random subdomain assigned to it.

In this example, we used the free version of ngrok.

 

If you want to inspect HTTP Traffic or analyze problems with ngrok visit the url: http://127.0.0.1:4040/ and click on ‘Inspect’.

Click ‘Status’ to see if everything works and to check how many connections are available.

Problems

If a ‘Tunnel xxxxx.ngrok.io not found’ error occurs, please try to host your application again (stop and press F5).

Conclusion

The tool is very practical for team bots and could also be for team apps for tabs.

However, it must be said that the tool will only be helpful if you buy the Pro version (5€/month/user) where static SubDomains are available as an important feature.

If you have combined ngrok and your sample application successfully you should see the following screen:

Create the MS Teams App

Go to the App Studio in your MS Teams App (teams.microsoft.com)

Create a new app in the Manifest editor

Fill in all the required data for the App details:

Go to Capabilities -> Tabs and select Add a Teams tab.

The configuration URL should now set to the ngrok URL added with “/MSTeams/configuration”. In my case: https://0f442812.ngrok.io/MSTeams/configuration:

Here you could define some parameters that would be filled from MS Teams when calling the URL. For Example, you can use the following Parameters:

  • {entityId}: The ID you supplied for the item in this tab when first configuring the tab.
  • {subEntityId}: The ID you supplied when generating a deep linkfor a specific item within this tab. This should be used to restore to a specific state within an entity; for example, scrolling to or activating a specific piece of content.
  • {loginHint}: A value suitable as a login hint for Azure AD. This is usually the login name of the current user, in their home tenant.
  • {userPrincipalName}: The User Principal Name of the current user, in the current tenant.
  • {userObjectId}: The Azure AD object ID of the current user, in the current tenant.
  • {theme}: The current UI theme such as default, dark, or contrast.
  • {groupId}: The ID of the Office 365 Group in which the tab resides.
  • {tid}: The Azure AD tenant ID of the current user.
  • {locale}: The current locale of the user formatted as languageId-countryId (for example, en-us).

 

In the section Valid Domains, you can see your ngrok domain. Please do not add this domain explicitly again. This will get you to an error while adding your tab.

Go to Test & Distribute and click on Install to install your app into an available team.

Select Team and click on Install:

Select a channel and click on Set up the Tab:

If the Modal Dialog is closed and you are redirected to you Team, then something went wrong. You have to make sure that your browser Cache is empty and the URL for your Tab Configuration is working.

If you are seeing the following dialog everything is working correctly and you can finish it with saving the tab:

Then you are finished and should see the following tab with the Contextual Data:

 

Congratulations! You have created your first MS Teams Tab app!

Visit us in Leicester on November 10th!

Solutions2Share is gold sponsor at SharePoint Saturday Leicester. Visit us at November 10th!

 

SharePoint Saturday is a free community‐focused SharePoint event dedicated to educating and engaging members of the local technical community. SharePoint Saturday draws upon the expertise of local, national, and international SharePoint IT professionals, developers and solutions architects who come together to share their real world experiences, lessons learned, best practices, and general knowledge with other like‐minded individuals.
This fantastic event will be held at Leicester Race Course, Leicester Racecourse Co Ltd, Oadby, Leicester LE2 4A.
SharePoint Saturday Leicester is organized by Microsoft MVP Brett Lonsdale, and Tony Pounder (Orignal organisers of SharePoint Saturday UK SPSUK)

 

Register now for this free event, featuring top-speakers and MVPs!

Look for our booth and learn about our brilliant SharePoint and Office 365 solutions.

Curious about free provisioning? Don’t miss the lunch and sign up now for the Collaboration Manager 365 Community Edition!

We are on social media! Visit us on FacebookInstagramTwitterLinkedIn or check our YouTube channel.

SharePoint Saturday Dubai October 20th – Solutions2Share in the City of the Future

Solutions2Share visits the city of the future for the 4th SharePoint Saturday Dubai on October 20th. Let’s talk about the future of SharePoint!

SharePoint Saturday is a free community‐focused SharePoint event dedicated to educating and engaging members of the local technical community. SharePoint Saturday draws upon the expertise of local, national, and international SharePoint IT professionals, developers and solutions architects who come together to share their real world experiences, lessons learned, best practices, and general knowledge with other like‐minded individuals.
This fantastic event will be held in the GEMS Room at the Microsoft Gulf Office, Building No 8, Dubai Internet City​ in Dubai​.

Register now for this free event, featuring top-speakers and MVPs!

Look for our booth and learn about our brilliant SharePoint and Office 365 solutions.

Curious about free provisioning? Don’t miss the lunch and sign up now for the Collaboration Manager 365 Community Edition!

We are on social media! Visit us on Facebook, InstagramTwitterLinkedIn or check our YouTube channel.

SharePoint at the fashion capital – Solutions2Share at SPS Milan on October 6th

Capital of fashion – and on October the 6th capital of SharePoint! Solutions2Share attends SharePoint Saturday Milan at the Enterprise Hotel.

SharePoint Saturday Milan is a unique not for profit (free to attend) community-driven event dedicated to showcasing all that is great about SharePoint, Office 365 and the Microsoft Data Platform. It aims to provide expert training geared towards administrators, end users, architects, developers, Business users, Business Managers and other types of professionals that work with Microsoft SharePoint Technologies.
To discover and learn more how Microsoft Azure, Office 365 and SharePoint can help your business, join us in Milan on 6 October 2018 at the Enterprise Hotel in Corso Sempione 91, 20149 Milano, Italy.
SharePoint Saturday events are free one-day events held in different cities around the world, featuring sessions from influential and respected SharePoint professionals.

Register now for this free event, featuring top-speakers and MVPs!

Look for our booth and learn about our brilliant SharePoint and Office 365 solutions.

Curious about free provisioning? Don’t miss the lunch and sign up now for the Collaboration Manager 365 Community Edition!

We are on social media! Visit us on Facebook, InstagramTwitterLinkedIn or check out our YouTube channel.

Collaboration Manager OnPremises Update

We are happy to announce an update for our popular site provisioning tool Collaboration Manager OnPremises for SharePoint 2010 and 2013. Enjoy new features and learn about current fixes!

Solutions2Share is proud to announce a new update for the Collaboration Manager OnPremises. We made a couple of fixes and upgraded the Collaboration Manager with additional features.

Here you can find an overview of changes made with the update on 03.09.18:

 

Features:

  • Logo WebPart was added to show the logo in the workspace from the Logo Field of the Workspace-Listitem

 

Fixed Bugs:

  • User Access Field: Users were removed suddenly when removing users from the AllUsers Property in the SiteCollection
  • Group Permission Field only updates one time for every item not for every Field
  • App Installation for SharrePoint Hosted Add-Ins fixed (SPFx Apps are not supported at the moment, because there currently is no API to install such apps)
  • Tenancy funtionality implemented
  • Fixed some spell errors in the ribbon
  • Color Palette will now be synchronized correctly
  • Searchbox Property in WebParts will now be set correctly
  • Task status will now be set correctly to completed when task is closed via the list view check box

 

If you have any questions regarding the update or our products, don’t hesitate to contact us: support@solutions2share.net

Collaboration Manager supports the creation of Teams!

Provisioning of Teams is now possible – Solutions2Share is proud to announce that Collaboration Manager 365 is now able to create Microsoft Teams!

 

Create Teams in SharePoint and automatically migrate all user access rights with our Collaboration Manager 365.

Use the ContentType ‘O365 Group’ from the WorkspaceList to migrate the group to a team.

Reinstallation of CM365 is required to use this new feature.

If you have any questions regarding the update or our products, don’t hesitate to contact us: support@solutions2share.net

Curious about free provisioning? Don’t miss the lunch and sign up now for the Collaboration Manager 365 Community Edition!

We are on social media! Visit us on Facebook, InstagramTwitterLinkedIn or check out our YouTube channel.

Collaboration Manager 365 Community Edition: Free-of-charge Classic & Modern Sites Provisioning!

We are proud to announce the free Community Edition of our Collaboration Manager 365. Enjoy provisioning of classic sites, modern sites and more features – for free! Be one of the first to benefit from our all-new Collaboration Manager 365 Community Edition!

From October 2018, Solutions2Share offers a free Community Edition of our popular site provisioning tool Collaboration Manager 365.

Benefit from these free-of-charge features:

  • Easy installation — no own infrastructure required     
  • Complete PNP provisioning feature set        
  • Save site as template    
  • Create classic & modern sites    
  • Save and upload templates between multiple tenants    
  • Manage all sites in a SharePoint list    
  • Create customized request forms 
  • No hidden costs — free for as long as you want 

Boost your collaboration and save time and money.

Curious about free provisioning? Don’t miss the lunch and sign up now for the Collaboration Manager 365 Community Edition!

 

We are on social media! Visit us on FacebookTwitter, InstagramLinkedIn or check out our YouTube channel.

Collaboration Manager 365 Update: Provision Communication Sites and many more

We are happy to announce an update for our popular site provisioning tool Collaboration Manager 365
Enjoy our new features and learn about current fixes!

 

Solutions2Share is proud to announce a new update for the Collaboration Manager 365. We made a couple of fixes and upgraded the Collaboration Manager 365 with additional features.

Here you can find an overview of changes made with the update on 08.08.2018:

 

Features:

  • Provisioning of Communication Sites is now possible. To add the new content type “Communication Sites” to the workspace list, please perform a short reinstallation. (To do this, simply go to the setup area, click on “Installation” in the menu on the left, then on “Install Collaboration Manager 365” and finally on “Reinstall Collaboration Manager 365”.)
  • [Communication Sites; Modern Sites]: Provisioning of web settings “CommentsOnSitePagesDisabled”, “DisableAppViews” and “DisableFlows”
  • [Classic Sites; Communication Sites] “Managed Path” for templates
  • [Classic Sites] Provisioning of the feature “Document ID Service”
  • [CM App] New ticket system integrated. Please note that if you run and manage your ticket system via Collaboration Manager 365, the change from ZenDesk to ZohoDesk requires a change of the customer ID. You can request your new ID directly from us – just send us a short email to support@solutions2share.net.
  • Status of provisioning of Modern Sites is upgraded from “beta” to “released”
  • Additional ContentType added in the Workspace-List for the provisioning of Communication Sites
  • Unterstützung der Vererbung von folgenden Inhaltstypen: “O365 Group” und “Communication Sites”

 

Fixes:

  • [Modern Sites] Provisioning of Webparts: List (preview) and Document library (preview)
  • [Modern Sites] Bug: “Can’t open ‘default.aspx'”
  • [Classic Sites; Modern Sites]: Bug: “Sequence contains no elements”
  • [Modern Sites] Default Homepage is not provisioning
  • [Modern Sites] Comments function is not provisioning on pages
  • [Modern Sites] Fast Workspaces were created after saving the template
  • [Modern Sites] Modern Pages were incorrectly provisioned
  • [Classic Sites] More fast workspaces were created than configured in CM
  • Improvement of the CM365 installation
  • General improvements to the provisioning engine

 

Visit our Knowledge Base to learn more about Collaboration Manager 365.

If you have any questions regarding the update or our products, don’t hesitate to contact us: support@solutions2share.net

SharePoint 2019 public preview: Take part in our free beta program for Collaboration Manager and SP 2019

SharePoint Server 2019 public preview is now available – and Solutions2Share already offers a free beta version of our Collaboration Manager! Enjoy all Collaboration Manager features on new SharePoint 2019, including the new capability of provisioning modern sites!

 

At the SharePoint Conference 2018, Microsoft broadly announces their vision, strategy, timeline, and investment areas for SharePoint Server 2019.

Finally, on 24 June, we were excited about the availability of SharePoint Server 2019 Preview. Through the continuous development of SharePoint2Share Collaboration Manager and many years of SharePoint experience, we are faster than ever.

Enjoy all the usual Collaboration Manager features including:

  • Provisioning of SharePoint classic and modern sites without a single line of code
  • Create custom templates for SharePoint sites with just a click
  • Sync your changes in the template to all existing sites without manual configuration
  • Custom request process, group & user management and governance rules
  • Commission sites with just a few mouse clicks

Take part in our Collaboration Manager beta program for SharePoint 2019 public preview.

Completely free and non-binding. No need to cancel, no hidden costs!

 

Manage your SharePoint classic and modern sites easily – with Collaboration Manager on SharePoint 2019.

Save your changes without leaving your SharePoint modern template.

Copy  100%  of the template, including workflows, permissions, third party tools and many more!

Register now for our Collaboration Manager  beta program  for SharePoint 2019 public preview.

Solutions2Share sponsors SPS Cambridge on September 8th

Join us at SharePoint Saturday Cambridge returning to Moller Centre at Churchill College on September 6th. Together with the sister event (SQLSaturday Cambridge) for the 4th year running, this year will be the special Britannia Edition – celebrating the regions Queen Boudicca’s charge against the might of the Roman Empire. Attendees will get full access to both event sessions!

SharePoint Saturday Cambridge is a unique not for profit (free to attend) community-driven event dedicated to showcasing all that is great about SharePoint, Office 365 and the Microsoft Data Platform. It aims to provide expert training geared towards administrators, end users, architects, developers, Business users, Business Managers and other types of professionals that work with Microsoft SharePoint Technologies.
SharePoint Saturday events are free one-day events held in different cities around the world, featuring sessions from influential and respected SharePoint professionals.

Register now for this free event, featuring top-speakers and MVPs!

Look for our booth and learn about our brilliant SharePoint and Office 365 solutions.

We are on social media! Visit us on FacebookTwitterLinkedIn or check out our YouTube channel.