Dismiss Notice

Register now to be one of the first members of this SharePoint Community! Click here it just takes seconds!

Dismiss Notice
Welcome Guest from Country Flag

Build a Cross Device App for Your Office 365 Group Feeds

Discussion in 'Official Microsoft News' started by Sharegate's Blog, Dec 10, 2015.

Thread Status:
Not open for further replies.
  1. Sharegate's Blog

    Sharegate's Blog Guest

    Blog Posts:
    0
    0
    0
    0
    There’s currently a lot of hype going on around Office 365 Groups. Microsoft are heavily promoting their next generation (NextGen) portals and see Groups as a new way of working. As part of this drive, they’re releasing a Groups app for all mobile platforms.

    So, how does it all work?

    Groups were released in September 2014 and allow people to connect with colleagues they are working with on a project or in their team. A Group consists of three parts: a mailbox, a SharePoint site to store documents, and a calendar, and can be accessed via Office 365. The good thing is that since the release of Office 2016, Groups can also be accessed from the Outlook client, which is still the most commonly used tool in the workplace.

    It's very easy to create a Group or join one. Being part of a Group reduces the number of emails you receive, so instead of sending a ‘reply-all’ to many people, a specific Group mailbox can be used instead. Groups are becoming more and more popular and we can expect more and more people to join them. So, wouldn’t it be great to have an app that displays all messages across all Groups you’re a member of, instead of having to open each one separately?

    Build a Cordova App That Aggregates All Group Data


    In today’s post, I want to show you how to aggregate all Group data with a Cordova app. I’m going to build a cross-device mobile app in Cordova that will display a Group feed to a user. To do so, I’ll be using Visual Studio 2015 with Cordova tools installed, see here for more information. This app will communicate with the Office Groups REST API, and the ADAL for Cordova plugin is used for authentication.

    Another requirement is that you must have administrative access to the underlying Azure AD of your Office 365 subscription.

    Register the Azure Application


    So let’s get started. To begin we need to register an Azure Application. First, visit https://manage.windowsazure.com, go to “Active Directory”, and click on the Azure Active Directory that corresponds to your Office 365 tenant.

    If you don’t see it here (you might, for example, use two different accounts for Azure and Office 365), you can add an existing Active Directory. This will then sign you into Office 365, and after that your Office 365 Azure AD shows up in Azure.

    Click on the ‘Applications’ tab, and click ‘Add’ in the footer to add a new application. Select ‘Add an application my organization is developing’, and enter a name in the next screen. Select ‘Native Client Application’ as the type, as we’re building a native app:

    [​IMG]
    The redirect URL is not important, just pick something like http://cordovagroups. Next, go to the ‘Configure in the new Application’ tab, and scroll down. Under ‘Permissions to other applications’ click ‘Add application’ and select ‘Office 365 unified API (preview)’:

    [​IMG]
    Click OK, and select ‘Read all groups (preview)’ as a Delegated Permission:

    [​IMG]
    Click Save, but don’t close the browser yet. We’ll need the client ID later.


    We’ve chopped the onions, now it’s time to get frying. We’re now going to create the Cordova App. Open Visual Studio, and go to File -> New Project. Go to Templates -> Other Languages -> JavaScript -> Apache Cordova Apps -> Blank App, enter a Name & Location and click OK.

    [​IMG]
    First, we need to add the ADAL plugin. Open config.xml and add the Active Directory Authentication Library.

    [​IMG]
    The ADAL plugin hasn’t been listed under Core for very long – it was only added within the last few weeks. And that’s good for us – it’ll make developing for different platforms a lot easier.

    Authentication: ADAL


    The Active Directory Authentication Library (ADAL) is available for all mobile operating systems and websites in different versions. The plugin for Cordova is based on the ADAL JS version for websites, and uses the device specific plugin for each mobile operating system.

    First, add jQuery to your project. As Windows devices don’t allow you to include external scripts, you must download it and add it to the scripts folder to make it work on Windows devices.

    Download version 2.1.4 from here - add it to the scripts folder, then add the following reference to index.html:


    Also, add the following HTML to the body, replace the paragraph with “Hello, your application is ready”:


    Now, go back to index.js to wire up the authentication. I’ll implement the log-in process in the deviceReady() event.

    Add the following lines of code at the end of onDeviceReady():


    This will set a status label, and configure future AJAX calls to send the access token in the Authorization Header. Although the jQuery documentation recommends not to use it, I disagree and think for use cases like this it is very handy. Let me know what you think in the comments section below!

    Next, implement the getAllGroupConversations where all the magic will happen.

    Query the Groups REST API


    The Groups REST API is part of the new Office 365 Unified API. It's still in beta, so things may change in the future.

    The endpoints I’m interested in are:

    • https://graph.microsoft.com/beta/me/joinedgroups : Returns all the Office 365 Groups I’ve joined.
    • https://graph.microsoft.com/{version}/{tenant}/groups('{groupId}')/Conversations : Returns all conversations in a group.

    The getAllGroupConversations combines the two calls:


    Replace tenantId with the ID of your Azure AD, or the name of your Office 365 tenant (e.g. Contoso.com).

    You can find the ID of your Azure AD by checking the URL in Azure:

    [​IMG]
    Now, run the app! First, log in. Next, when the label says you’re logged in, click on “Retrieve data”. After a while all the Groups including all the Group conversations should show up.

    I’ve noticed that the API was (or is) quite slow. Every call took more than 4 seconds. So, when you have a large number of Groups, this may take a while. The good thing is that the results will come in as they go, so you’ll see the progress in real time.

    What’s next?


    In today’s post we’ve seen how you can leverage the new Office 365 Unified API to show all the Groups you are member of, including all the Group conversations. The app can be deployed to any mobile device, which makes it very powerful.

    Office 365 Groups are simple, but very powerful as they help people work together even more easily. It’s very easy to create a Group, compared to creating a subsite for instance, which may be too much work for some people.

    The app I’ve built here could be improved by, for example, implementing caching of access tokens. You could easily do this by using the acquireTokenSilently method from this example. Besides that, it would of course be interesting to be able to interact with Group conversations, e.g. by adding the possibility to add a reply to a conversation.

    Hopefully today’s post will have given you some inspiration for how you can enhance end-user experience with Groups – your colleagues will be giving you high fives all day long!

    Continue reading...
     
Thread Status:
Not open for further replies.

Share This Page

LiveZilla Live Chat Software