Connecting to Microsoft Graph with PowerShell

Posted on 03/02/2020 by

Leave a Comment

Nowadays, I find myself self-working with PowerShell almost as much as with Power Platform. Not even mention that I used to work as a software developer in the web stack world, like jQuery, and React. I remember that my first large PowerShell project was related to SharePoint 2013 site provisioning years ago. Back then PnP PowerShell library was only a dream I had to write the modules and extension our self. Today, I’m a big fan of PnP PowerShell, and I’m using it almost daily. And we should not forget those multiple other PowerShell modules available to different services of Office 365.

Of course, there are situations and times when there isn’t a built-in command available for the needed task. In many cases, you can use CSOM capabilities to close the cap (I’ll come back to this in the upcoming posts). And then there’s Microsoft Graph you can use to do a lot of things. To get us rolling, we need to authenticate against it to get AccessToken we need to use in HTTP calls against the Graph API. Here are three different scenarios on how to get the AccessToken with PowerShell.

You find all the scripts from my GitHub: https://github.com/MikkoKoskinen/SP-Poweshell/tree/master/ConnectToGraph

General Variable

The first thing you need is to register the application and set the necessary permissions for the service you won’t use. Here are the steps on how to do it: https://docs.microsoft.com/en-us/graph/auth-register-app-v2. Remember to copy the application ID and secret because we need those in the scripts.

In all the scripts below, we will need several information from the tenant and the registered application. Most importantly, we need the application id, tenant id, and the created secret id. With these, we can design and application-level connection to the Graph. For delegated permission, we will also need the credentials of the users that we want to use for the connection.

#*** Initialize variables
Write-Host "Initialize variables"
Write-Host " "

[string]$graphApp_AppId = "APPLICATION_ID"
[string]$graphApp_AppSecret = "APPLICATION_SECRET"
[string]$tenantId="TENANT_ID"
[string]$spAdminURL = "SPADMIN_URL"
[string]$graphVer = "v1.0"

#Credetential iformation to be used in delegated connections
[string]$username = "USERNAME"
[string]$password = "PASSWORD"

Connection with Application Permissions

In my example script, the needed variables are given as plain text in the script file, but for production, you might want to consider other options, like using Credential Manager or Azure Key Vault, to hide this information. At least, don’t take a straight copy from my script, add the information, and post that to some public source.

To connect against Graph with application permission we will need to build a JSON variable with application id and secret. We also need to pass a grant type of ‘client_credentials’ and scope with a value of ‘https://graph.microsoft.com/.default’.

try{

    #Connecting with Application Permissions
    Write-Host " "
    Write-Host "Connecting with Application Permissions"

    $body=@{
        client_id=$graphApp_AppId
        client_secret=$graphApp_AppSecret
        scope="https://graph.microsoft.com/.default"
        grant_type="client_credentials"
    }

    $response = Invoke-WebRequest -Uri "https://login.microsoftonline.com/$tenantId/oauth2/v2.0/token" -ContentType "application/x-www-form-urlencoded" -Body $body -Method Post

    $accessToken=$response.content | ConvertFrom-Json
    $AppAccessToken = $accessToken.access_token
	
	if($AppAccessToken){
		Write-Host ("...got AppAccessToken")
	}
	else{
		Write-Error -Message$ "Application access error" -Category AuthenticationError
	}
}
catch {
    $ErrorMessage = $_.Exception.Message
    Write-Host "**ERROR: Connecting with Application Permissions"
    Write-Error -Message $ErrorMessage
}

This JSON in then send with Invoke-WebRequest Post against the login API. If succeeded, we should get a JSON response back and we can parse the authentication token from it.

Connection with Delegated Permissions

A delegated connection can be done in almost similar way than the connection with application permission. Again we need the Json variable with application id and secret. Then we need to add the username and password for the user account we want to use in the connection. This time the grant type for the call is ‘password’.

try{
    #Connecting with Delegated permissions
    Write-Host " "
    Write-Host "Connecting with Delegated permissions"

    $body=@{
        client_id=$graphApp_AppId
        password= $password
        username= $username
        client_secret=$graphApp_AppSecret
        grant_type="password"
        scope="https://graph.microsoft.com/.default"
    }
$response = Invoke-WebRequest -Uri "https://login.microsoftonline.com/$tenantId/oauth2/v2.0/token" -ContentType "application/x-www-form-urlencoded" -Body $body -Method Post

    $accessToken=$response.content | ConvertFrom-Json
    $UserAccessToken = $accessToken.access_token
	
	if($UserAccessToken){
		Write-Host ("...got UserAccessToken")
	}
	else{
		Write-Error -Message$ "Delegated access error" -Category AuthenticationError
	}
}
catch {
    $ErrorMessage = $_.Exception.Message
    Write-Host "**ERROR: Connecting with Delegated permissions"
    Write-Error -Message $ErrorMessage
}

Again, if everything goes as planned, we should get the access code as a return value.

Connection with PnP PowerShell

For the application connect there’s also a shorter version available through PnP PowerShell module. We can call the Connect-PnPOnline function with application id and secret and get the access token with Get-PnPAccessToken call after that.

try{
    #Connecting with PnP PowerShell
    Write-Host " "
    Write-Host "Connecting with PnP PowerShell"

    Connect-PnPOnline -Url $spAdminURL -AppId $graphApp_AppId -AppSecret $graphApp_AppSecret
    $pnpAccessToken = Get-PnPAccessToken

	if($pnpAccessToken){
		Write-Host ("...got pnpAccessToken")
	}
	else{
		Write-Error -Message$ "PnP PowerShell access error" -Category AuthenticationError
	}
}
catch {
    $ErrorMessage = $_.Exception.Message
    Write-Host "**ERROR: Connecting with Delegated permissions"
    Write-Error -Message $ErrorMessage
}

Cascading Fields in Power Apps Forms – Basics and Few Tips

Posted on 02/26/2020 by

Leave a Comment

As far as I remember, customizing SharePoint forms and cascading fields have been one of the main areas that organizations have asked. I have done these customizations for classic and modern SharePoint with InfoPath, custom solutions, and other form solutions. Now we can use Power Apps in many cases, and they’re still is no exception here. Many app creators are wondering how to make these customizations and how can I create cascading fields, for example?

A full walkthrough for custom forms would need a separate series of posts, so I am concentrating on the cascading fields and small form examples here. Of course, with Power Apps, it’s not about SharePoint only, and the following techniques can be used against other data connectors also. Here is my typical way of implementing cascading fields in Power Apps. I’ve used this way against small SharePoint lists and in multifield large business scenarios.

Main Requirements

  1. We have a SharePoint list that has a Type field
  2. We want to able to select the type from a range of values that can be categorized into multiple different categories
  3. We want to give the administrators an easy way to maintain these values, so they should be placed to a SharePoint list
    • There are two SharePoint lists Main Category and Sub Category
    • Sub Category has a lookup column pointing to the Main Category

In the custom form, the users are first selecting the category, and then they can select the value belonging to this category from the second drop-down box

Basic Form With Cascading Fields

Let’s create a simple canvas app for our form. Form only has a text box for the title, two drop-down boxes for selecting the categories, and a submit button. You also need to connect the app to all the three lists in SharePoint.

Even though this is a simple list, remember the naming convention. Taking a habit to rename the controls and screen will help you in the future. You can also use grouping, as I did for the labels, to make it easier to find important elements in the tree view.

  1. Add the necessary label, one text input, and two drop-down box
  2. Select the Items property of the first drop-down (ddpMainCategory in the example)
  3. Connect the items to the Main Category list
  4. Make sure the value property is set as Title
  5. Do the same thing to another drop-down (ddbSubCategory) but connect it to the Sub Category list

The basic setup is now done, but we are missing the cascading part. The category selection doesn’t filter the value list. We need to change the items selected for the second drop-down to make this happen.

In the items selection of the ddpSubCategory, we need to filter the items based on the selection in the other drop-down box 

Filter('Sub Category','Main Category'.Value = ddpMainCategory.Selected.Title)

After this, we have the basic cascading fields ready

Saving the Details

In the SharePoint list, we only have the Title, and Type Value, and the values are now read from a different SharePoint list. Therefore we didn’t use a Power Apps form element where we have the SubmitForm action available. To save the details from our custom form, we need to use the Patch command. Add the following command to the OnSelect -event of the Save button. Again, remember to comment your code. It helps. I’ll promise

These functions will save the details to SharePoint based on what the user selected from the drop-down and resets the form for the next one. The idea in the Patch command is: 

//Save details to SharePoint
Patch('Important List',
Defaults('Important List'),
    {
        Title: txtTitle.Text,
        'Type Value': ddbSubCategory.Selected.Title
    }
);

//Reset form element
Reset(txtTitle);
Reset(ddpMainCategory);
Reset(ddbSubCategory);
  • First ‘Import List’ is the name of the data source where we are running the patch command
  • Defaults command will tell to create a new item in the list
  • Next, we are adding the values from the form into the SharePoint columns of the new item
  • Value from the second drop-down box can be read from the Selected property
  • More info from the Patch – function: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-patch

Cascading Fields – Next Version

You might notice a couple of things in this way of building cascading drop-downs. Updating the ddbSubCategory field might take some time after we change the value in ddpMainCategory, and the first item in the drop-down box is selected automatically. In many situations, we want users to see an empty value in the drop-down and take action to choose the one they need.

  1. To tackle these issues, we will read the drop-down selection values to collections in the app start
  2. Open the App OnStart settings and add the following functions to save the selected items from SharePoint to two collection 
//Main Categories to collection
ClearCollect(MainCatSelection,"");
Collect(MainCatSelection,'Main Category');

//Sub Categories to collection
ClearCollect(SubCatSelection,"");
Collect(SubCatSelection,'Sub Category');
  1. First, we are clearing the possible old collections and adding one empty row into them
  2. Then we collect the SharePoint rows from the lists and save them to the collections
  3. Next, we need to update the items settings of the drop-downs
    1. ddpMainCategory = MainCatSelection
    2. ddbSubCategory = Filter(SubCatSelection, IsBlank(Title) Or ‘Main Category’.Value = ddpMainCategory.Selected.Title)
  4. In the ddbSubCategory, we are filtering the collection so that the first black item is selected and also all the other rows that have the selected category value in the ‘Main Category’ field

Click the Run OnStart action for the App to populate the collection for the test. Now we have cascading drop-downs that are fast to use and show an empty value before the user is making the necessary actions.

Creating a Feedback Form Part 2 – Connecting the Flow

Posted on 02/11/2019 by

1 Comment

In my last post, I started to create a Feedback form that is using the new possibility to us PowerApps for SharePoint Online list form customization. The first part shows how to create a separated forms for View, Edit, and New action. You should check that out first because we will extend that functionality on this post.

PowerApp Custom Forms and Flow – Creating a Feedback Form Part 1

In the old days, you probably have created workflow and send an email when something is added to the list. This type of action is completely valid, and you can still use traditional workflows even in Office 365. But the modern better way to do similar things is to use Flow. For our Feedback form, I wanted to connect the given feedbacks as tasks for our internal team that is building our Intranet.

Let’s add a Flow to our custom form and create a new to do item in Planner that comes as default service for each new Microsoft Group.

  1. From the Feedback list click the PowerApps -> Customize forms from the lists action ribbon.
    1. This will open the custom app forms application we did in Part 1 of this series.
  1. From the ribbon select Flows.
    1. This will open the Associated Flows panel.
  2. Select Create a new Flow.
  3. Flow application will be opened in new tab, and a new flow is created automatically.
    1. You can see that the flow is associated to PowerApps.
  1. What we wanted to do is to add a new task to Planner so let’s add an action to do that.
    1. Click New step -> Add an action
    2. From the opened form search all Planner related action by writing Planner to the search box.
    3. Select the first action Planner – Create a task
    4. This will add a new task to your flow. This task is used to create a new task into Planner.
  1. Now you need to connect to correct plan and bucket where you want to add the tasks.
    1. From Plan Id select the drop-down menu by clicking the down arrow in the field.
    2. This will open a form showing all available Planner plans.
    3. Select the one you want to use.
    4. Do the same thing for Bucket Id. Except, this time you will see all available buckets found from the plan you selected.
  2. For task Title let’s get the value from a user through PowerApps.
    1. Select Title field and select dynamic content -> Ask in PowerApps.
    2. This will create a new PowerApps parameter that we need to populate in our custom form. We will come back to this later.
  1. You could give values for other fields also if you want.
    1. One option is to add current time and date to Start Date-Time field.
    2. Select the Start Date field and select dynamic content.
    3. Open the Expression tab and scroll until you see utcNow().
    4. Click utcNow and click OK.
  2. Now we have a task that creates a new task to Planner and uses the title detail that the user created as task title.

But we are asking some more information from the user also, so let’s add the value from the Description field also into the task.

  1. Add a new step after the first task above and add a new action.
  2. From task selection form again, search planner but this time select Update task details.
  1. To update the new task we just created, select Task Id field and Add dynamic content.
    1. From the list select Id.
    2. The created task will send us the details of the created task, and we can now use that info to find it and update the details.
  2. Next, select the Description.
    1. From dynamic content, menu select Ask in PowerApp to get the value from our custom form.
  1. Finally, click the default name next to Flow name at the beginning of the form.
    1. Give the flow a name you desire to use.
    2. Click Create flow.
  2. Finally, you can click Done, and our flow is completed.

At this point, we have a custom form and a flow that does the task creation. But we still need to combine these two, so that right after a new task is created a new task will be created automatically. Of course, we could attach the flow in New Item Added event on the list, but for this example, we will add the flow straight to our custom form.

  1. Go back to the list and open the custom form PowerApp.
  2. Open the NewFormScreen we created in Part 1.
  3. From the screen select CustomNewForm.
    1. Expand the Title and Description card details. You need the see the name of the fields of the cards later on.
  1. While the form is selected choose OnSuccess event from the attribute drop-down.
    1. This event is run every time a new item is added successfully to the list.
    2. By default, it includes two actions. One for clearing the form and another one to close the panel.
    3. Copy the current OnSuccess value and save them for later use.
  2. From the ribbon select Action -> Flows
    1. You should see the flow you created earlier.
    2. Select the flow, and it will be added as a task to the OnSuccess event.
  1. Now we need to give those two parameters, Createatask_Title and Updatetaskdetails_Description, we decided to ask for the app.
    1. We will connect the form fields to the Flow task call to get the text user has given.
  1. The field value reference can be done based on the field name on the card.
    1. The name depends on your environment, but on this example, the names are DataCardValue2_1 for Description, and DataCardValue1_1 for Title.
    2. With the name, you can refer to the Text value and use that on the Flow call.
  1. Finally add the default tasks back to the OnSuccess action so that the form will be reset and closed when everything is done.
    1. Here’s the whole value used in the example: NewIntranetFeedback.Run(DataCardValue1_1.Text, DataCardValue2_1.Text); ResetForm(CustomNewForm); RequestHide()
  2. Now save and publish the app to SharePoint.

Navigate back to your list and start to add a new item. After the save check from Planner (https://tasks.office.com/) that a new task is added for future steps.

 

PowerApp Custom Forms and Flow – Creating a Feedback Form Part 1

Posted on 01/14/2019 by

1 Comment

Last month Microsoft announced a long waited functionality where you can use PowerApps to customize the modern list forms in Office 365. Customizing the OOTB SharePoint list forms is something we have done for years already, and everyone has done customizations in multiple different ways.

But when the new modern lists were announced, all of those old ways were useless. I do understand the shouts and anger that came out of this. Starting from last month the first release tenants have been able to use PowerApps and Flow to create custom forms. We can finally do something real with list forms.

Here are few articles related to custom form with PowerApps.

 

Over the time, I have created many types of Feedback forms in my SharePoint projects. The most simple solution is to use SharePoint list and let the users send feedback with OOTB form. But maybe there has been a need to give some instructions to the users or notify someone when new feedback created. To do this, you need to do some level of customization. Sometimes even some coding.

The best part of the new features in Office 365 is that changes can now be done without coding (almost, in many cases, etc. 😉 ) Even a power users can create customization with PowerApps and Flow. This is exactly what I’m about to show in this series.

My example form has the following requirements.

  1. Give a possibility to add some text and instructions to the users when they are giving the feedback.
  2. Show the necessary fields for feedback gathering.
  3. Save the details to SharePoint list.
  4. Create a new task on a backlog list in Planner.
  5. Give a quick view and search for existing feedback items.

Custom List for Feedbacks

  1. Step one which is the easiest one. Just create a new list to your SharePoint Online site.
    • Make sure that the list type is modern. I did create the list to the new modern team site that comes along the Office 365 Group.

Now add two new columns to the list. The quickest way to do this is by clicking the + sign on the view.
AddNewColumn

  1. Create the following fields
    • Description – Multiple lines of text
    • Feature Type – Choice with values; New Feature, Question, Update, and Bug
  2. And now you do have a simple feedback form ready to use!

PowerApp for Custom Forms

Now, let’s start to customize the form. Open the PowerApps menu from the list toolbar and select Customize forms. This will open and create the PowerApps application for your lists forms. Let’s take a look at few things before we make any changes.

  1. Click the SharePointIntegration link on the left and select Advanced tab from the right.
    • You can see the basic settings of the SharePoint integration from this screen.
    • DataSource is pointing to the list you created, and Action selection is pointing to custom forms.
  2. Notice that all Action events are pointing to only one form.
    • Different action types are handling the data mode automatically so calling your form with ViewForm action will show to form in read-only mode.
    • One thing to remember here is that in OOTB only one form is used. If you make any changes, these changes will reflect on all views types.
  3. To solve this issue, we need to create a new screen and form for our custom form.

  4. I ended up to create only two screens seen in the image above. One screen is for View and Edit, the other is for New item creation. You still have to update the values for each action setting in the SharePointIntegration. My settings are as follows (remember to use the names you set on your screens).
    • OnNew – Set(SharePointFormMode, “CreateForm”); NewForm(CustomNewForm); Navigate(NewFormScreen, ScreenTransition.None)
    • OnEdit – Set(SharePointFormMode, “EditForm”); EditForm(CustomViewForm); Navigate(ViewFormScreen, ScreenTransition.None)
    • OnView – Set(SharePointFormMode, “ShowForm”); ViewForm(CustomViewForm); Navigate(ViewFormScreen, ScreenTransition.None)
    • OnSave – If(SharePointFormMode=”CreateForm”, SubmitForm(CustomNewForm), If(SharePointFormMode=”EditForm”, SubmitForm(CustomNewForm)))
    • OnCancel – If(SharePointFormMode=”CreateForm”, ResetForm(CustomNewForm), If(SharePointFormMode=”EditForm”, ResetForm(CustomNewForm)))
  5. Now let’s make some changes to the New form. Delete the fields that are unnecessary like date fields etc.
    • Select the Title_DataCard from the CustomNewForm table and increase the height.
    • Lower the Title field and add two new Label controls at the beginning of the form.
    • Add the instructions in these new labels and make any other change you like.
    • You also have to change the mode of the Description box (DataCardValue2_1) to Multiline.
    • Now save and publish the forms.

Navigate to the Feedback list and try to create a new item. You should now see our custom form in use. Create one item and open it and you should see a different form in use.

CustomForm

In next part we will add a Flow send our Feedback to Planner.

Part 2: https://mikkokoskinen.com/2017/12/06/creating-a-feedback-form-part-2-connecting-the-flow/

Reading Word File Content from Office 365

Posted on 10/25/2017 by

Leave a Comment

I had a case where I needed to read a document content from Office 365 through REST API and use that on my project. More specifically I wanted to use the content in my Word Add-in. Back then I was struggling to be able to read the content in a correct way. I didn’t find a good solution on how to manipulate the data I’m getting back from REST API.

Use it in an Application

Finally, I did solve the issue and I will show you how. This is just a quick example of the functionality without a complete application. I’m having a session on upcoming Saturday 10/28/2017 in SharePoint Saturday New England at 9:00 am.

My session title is “Tools for Information Worker – Introduction to Office Add-ins Development.” On the session, I will demonstrate a complete example on how to use these techniques, and I will also share the source code of the application after the session.

http://spsnewengland.org/agenda/

Stay tuned and follow me in Twitter @mikkokoskinen to know when the application is available.

Reading in Node.js Application

But back on the solution. You are able to use the REST API call called getfilebyserverrelativeurl with the $value attribute to get document with content.

<span 				data-mce-type="bookmark" 				id="mce_SELREST_start" 				data-mce-style="overflow:hidden;line-height:0" 				style="overflow:hidden;line-height:0" 			></span>
executor.executeAsync({
  url: "<app web url>/_api/SP.AppContextSite(@target)/web
    /getfilebyserverrelativeurl('/Shared Documents/filename.docx')/$value
    ?@target='<host web url>'",
  method: "GET",
  binaryStringResponseBody: true,
  success: successHandler,
  error: errorHandler
});

More info:  https://msdn.microsoft.com/en-us/library/office/dn450841.aspx

If you change the placeholders from the above REST call and navigate into that on your browser, the document will be downloaded automatically. In a case you have ever used Microsoft Graph to get documents from a document library, you may have seen a parameter called @microsoft.graph.downloadUrl. For example, this call will list documents from the library with a given id: https://graph.microsoft.com/v1.0/drives/{library-id}/root/children.

GraphImage

In case you didn’t know @microsoft.graph.downloadUrl gives you a short-term access to the file without a need to send authentication inside a call header etc. The URL has a temporary authentication token that is valid only for a couple of minutes. But the same thing with that URL. If you navigate to that URL, the document will be downloaded.

So how to get the content into a variable and use it? Here’s a short explanation on how you can use the call return value in an application that is using Node.js and TypeScript.  Maybe your application is a Word add-in, and you want to read the document in Office 365 as a starting point for your own document.

In the example, we have a situation that you have the @microsoft.graph.downloadUrl of the file, and you want to download the content into a variable.

  1. For easy call based on URL, we will use a module called node-fetch.
    1. It’s light-weight module that brings window.fetch to Node.js
    2. More information from here: https://www.npmjs.com/package/node-fetch
  2. Run npm install –save node-fetch in the terminal window to install the module for the project.
  3. Open the TypeScript file where you want to add a function for the call.
    NodeFetch
  4. Add a new reference for node-fetch: import fetch = require(‘node-fetch’);
  5. Then add a function that uses the @microsoft.graph.downloadUrl to get the content of the document.
      1. The URL is sent as a parameter in the function call.
      2. This function is resolving a promise so that we can use await functionality when we are calling the function.
    static getTemplateDocument(templateURL: string) {
        return new Promise<string>(async (resolve, reject) => {
            let templateArray: any;
            fetch (templateURL, {body: 'buffer'}).then(res => {
                res.buffer().then( data => {
                    templateArray = data;
                    resolve(templateArray);
                });
            });
        });
    }
  6. The important part is to set the body setting of the fetch call as a buffer. The default value for the body is empty, but we specifically want to get the content of the document.
    1. When this setting is set, we can use the buffer() function of the result we are getting back from the fetch to read the data.

And the Data is?

We are almost there. The question is that what does the getTemplateDocument call actually send back to us?

The answer is that we are getting back a Uint8Array that holds the content of the template Word document. We can now use this array in a way our application needs it. In Office.js there is a function called insertFileFromBase64. With this function, we can add a content of a docx file into our current document as long as the file is base64 encoded. And because we already have the file in Uin8Array format, it’s easy to make the transformation and insert the file.

Here’s a short example code for that when we have the file back in a result attribute from the function call above.

var templateBuffer = result.data;
    var u8 = result.data;
    var b64encoded = btoa(String.fromCharCode.apply(null, u8));

    Word.run(function (context) {

        // Create a proxy object for the document.
        var thisDocument = context.document;

        // Queue a command to get the current body.
        // Create a proxy range object for the selection.
        var body = context.document.body;

        // Queue a command to replace the body.
        body.insertFileFromBase64(b64encoded, Word.InsertLocation.replace);

        // Synchronize the document state by executing the queued commands,
        // and return a promise to indicate task completion.
        return context.sync().then(function () {
            console.log('Added the content of the file .');
        });
    })
    .catch(function (error) {
        console.log('Error: ' + JSON.stringify(error));
        if (error instanceof OfficeExtension.Error) {
            console.log('Debug info: ' + JSON.stringify(error.debugInfo));
        }
    });<span 				data-mce-type="bookmark" 				id="mce_SELREST_start" 				data-mce-style="overflow:hidden;line-height:0" 				style="overflow:hidden;line-height:0" 			></span>

Use case: List Posts – Using Widget Wrangler and AngularJS in the web part development

Posted on 07/29/2016 by

3 Comments

In this post, I will show you how you can create a widget or web part that show you a list of posts from SharePoint blog site. The element is done purely as client side coding. One thing that is true with SharePoint is the fact that you can do the same things in multiple ways. Same goes here with this example, but my aim here is to demonstrate how you can create plugins, web parts, apps however you want to call them, easily and purely as client side development. I think that a word widget is most descriptive, and that is what we will be using here.

This example is based on real life solution that I made on my last project on top of SharePoint 2013 on-prem. The widget is also tested to be working in SharePoint Online. Technically you could use it any other web platform, and that is the key why I want to present you a framework called Widget Wrangler.

What is Widget Wrangler?

Why try to summarise something when it’s done perfectly in the actual source? “The Widget Wrangler is a lightweight framework for managing the loading of javascript “widgets” on a web page.”. With the framework, you can create isolated widgets and control the loading of each file and dependency you need for the element.

With Widget Wrangler (later ww) you can encapsulate the functionality of the widget so that different, or even multiple of the same kind, elements won’t be interference with the hosting page and other widgets. This way the isolation and creation of truly separated UI and functionality are easier to do. The framework also manages the efficient loading when multiple web parts on a page use the same javascript libraries or CSS files.

<div class="latestPostWP">
 <div posts-element></div>

 <script type="text/javascript" src="/ourfirm/offices/SiteAssets/js/pnp-ww.min.js" 
 ww-appname="LatestPostWPApp" 
 ww-apptype="Angular"
 ww-appcss='[{"src": "/ourfirm/offices/SiteAssets/webparts/LatestPost/latestPost.css", "priority":0}]'
 ww-appScripts='[{"src": "/ourfirm/offices/SiteAssets/js/angular.min.js", "priority":0}}
 ]'>
 </script>
</div>

You can download Widget Wrangler and find more information from here:
https://github.com/Widget-Wrangler/ww

There’s also more deeply demonstration available in Channel9 PnP Web Cast:
PnP Web Cast – Introducing Widget Wrangler for SharePoint development

Post-Listing Widget

To demonstrate the use of ww, let’s create a simple widget that lists blog post from SharePoint blog site. Actually, I have built this type of functions multiple times before so this is a real world example. I will use my favored framework AngularJS and SharePoint REST API to accomplish the actual functionality. This way we can create a solid client side solution and have a flexible separation of functionality and presentation. And that should be the starting point for every customization IMO.

Requirements

  • Get blog post from SharePoint blog site.
  • Show three latest post and other through pagination.
  • From each post title (link to post) 365 first characters from the blog post.
  • Show to order an email alert for new posts.
  • Show link to RSS feed.

The whole solution can be found from my GitHub repository https://github.com/MikkoKoskinen/WW-Demo-ListPost

From there you can find four files:

  • WWPostsWPHTML.html – File containing the ww implementation that was saved on the script web part.
  • listPost.js – The angular application that implements the widget functionality.
  • listPost.html – The presentation layer of the widget.
  • listPost.css – Styling of the widget.

I’m also using following frameworks and extensions:

Widget Wrangler Section

<div class="latestPostWP">
 <div posts-element blogSiteURL='' listTitle='Posts' listID='74DF3BE3-5536-45B6-B171-B97C1BCD61D1'></div>

 <script type="text/javascript" src="/ourfirm/offices/SiteAssets/js/pnp-ww.min.js" 
 ww-appname="LatestPostWPApp" 
 ww-apptype="Angular"
 ww-appcss='[{"src": "/ourfirm/offices/SiteAssets/webparts/LatestPost/latestPost.css", "priority":0}]'
 ww-appScripts='[{"src": "/ourfirm/offices/SiteAssets/js/angular.min.js", "priority":0},
 {"src": "/ourfirm/offices/SiteAssets/js/truncate.js", "priority":1},
 {"src": "/ourfirm/offices/SiteAssets/js/dirPagination.js", "priority":1},
 {"src": "/ourfirm/offices/SiteAssets/webparts/LatestPost/latestPost.js", "priority":2}
 ]'>
 </script>
</div>

Above you can see the WW section of the solution that has to be added to the page. This code will handle the loading of the widget. I’m a fan of script web part, so I have placed that code in the snippet section. You could, of course, use other methods of adding the code of course. As we can see, you can control very well on what you want to load and in which order. Key things in the code are.

  1. Everything has to be wrapped inside a div. Div with class ‘latestPostWP’ in our case.
    1. This is an important thing to remember because ww won’t work without it.
  2. Ww implementation is done inside the script tag that is calling the library on the source attribute. After that, you can give the necessary settings.
  3. ww-appname = The name of your widget application. In Angular implementation, this has to match with the module name.
  4. ww-apptype = Type of the framework used on the widget. On the time of writing this, only Angular is supported.
  5. ww-appcss = List of CSS style sheet you want to be loaded for the widget. You can give multiple files and control the loading order with the parameter.
  6. ww-appScripts = List of script files sh you want to be loaded for the widget. You can give multiple files and control the loading order with the parameter.

And that’s it. It’s just that simple.

Now, if look at the browser console after page load, you can see that ww has initialized a widget on the page. As you can see our widget has an index number 0. If there were multiple of these elements on the page, all of them would have them own number. This is the power of ww and encapsulating of the widgets.

Presentation

<div class="resultItem announcementItem" dir-paginate="post in posts | itemsPerPage: 2" pagination-id="posts"> 
 <div class="resultTitle"> 
 <a class="" href="{{viewItemURL}}{{post.ID}}">{{post.Title}}</a> 
 </div> 
 <div class="resultContent"> 
 <span class="resultDate" ng-bind="post.PublishedDate | date:'LLLL dd, yyyy'"></span> 
 <br>
 <div class="resultDetail">{{ post.Body | htmlToPlaintext | characters:350 :true}}</div> 
 <div class="resultMore"><a href="{{viewItemURL}}{{post.ID}}">More≫</a></div> 
 </div> 
</div>
<div class="blogActions">
 <div class="action">
 <a class="ms-calloutLink" target="_blank" href="{{listRSSURL}}">
 <span style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;" class="s4-clust ms-blog-linkCommandImage">
 <img src="/ourfirm/offices/_catalogs/theme/Themed/4D8112E7/spcommon-B35BB0A9.themedpng?ctag=3" style="position:absolute;left:-236px !important;top:-66px !important;border-width:0px;"></span>&nbsp;<span class="ms-splinkbutton-text">RSS Feed</span></a>
 </div>
 <div class="action">
 <a class="ms-calloutLink" href="{{postAlertURL}}">
 <span style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;" class="s4-clust ms-blog-linkCommandImage"><img src="/ourfirm/offices/_catalogs/theme/Themed/4D8112E7/spcommon-B35BB0A9.themedpng?ctag=3" style="position:absolute;left:-236px !important;top:-30px !important;border-width:0px;"></span>&nbsp;<span class="ms-splinkbutton-text">Alert Me</span>
 </a>
 </div>
 <div class="ms-clear"></div>
</div>
<dir-pagination-controls pagination-id="posts"></dir-pagination-controls>

Here you can see the presentation layer. Technically it’s just plain HTML with some Angular code. But I would like to highlight few relevant things, though.

I’m not using the default repeater to show a list of fetched post. The code is using pagination extension for that. This will provide us an easy way to divide the result to a different section. Pagination is done in the first div element “dir-paginate=”post in posts | itemsPerPage: 2″ pagination-id=”posts””. The first setting is the same than in default repeater telling to loop through all the post in posts variable. Next, we will give the amount of visible items per page. Finally, we give a unique id for the pagination element. This way we can connect the repeater, and the pagination action element added as the last element on the widget (dir-pagination-controls div). The extension is also handling all the necessary functions like showing the page count and back and forward links.

Next thing to notice here is that we are modifying the date format for better visibility with ng-bind element.

 ng-bind="post.PublishedDate | date:'LLLL dd, yyyy'"
{{ post.Body | htmlToPlaintext | characters:350 :true}}

Lastly, we are showing a short teaser from post body with element above. We can truncate the text with Angular Truncate filter and give the amount of character shown to the user. True settings tell that also complete words can be cut. htmlToPlaintext is our custom filter that takes out any HTML elements form the body text. More about this soon.

Functionality

(function() {
  angular
    .module('LatestPostWPApp', ['truncate','angularUtils.directives.dirPagination'])
    .filter('htmlToPlaintext', function () {
        return function(text) {
            return  text ? String(text).replace(/&amp;lt;[^&amp;gt;]+&amp;gt;/gm, '') : '';
        };
    })
    .directive('postsElement', function() {
        return {
            restrict : 'EA',
            transclude : false,
            templateUrl: '/ourfirm/offices/SiteAssets/webparts/LatestPost/latestPost.html',
            controller: function ($scope, $log, $q, $http, $attrs) {

                $scope.getEvents = function getEvents() {
                    return $http({
                        method : &amp;quot;GET&amp;quot;,
                        url: _spPageContextInfo.webAbsoluteUrl + &amp;quot;/&amp;quot; + $attrs.blogsiteurl + &amp;quot;/_api/web/lists/GetByTitle('&amp;quot; + $attrs.listtitle + &amp;quot;')/items?$orderby=PublishedDate desc&amp;quot;,
                        headers: { &amp;quot;Accept&amp;quot;: &amp;quot;application/json;odata=verbose&amp;quot; }
                    })
                    .then(function sendResponseData(response) {
                        // Success
                        return {
                            Items: response.data.d
                        }

                    }).catch(function(response) {
                        $log.error('HTTP request error: ' + response.status)
                        return $q.reject('Error: ' + response.status);
                    });
                };

                $scope.getEvents()
                .then(function(data) {
					//Get list items
					$scope.posts = data.Items.results;

					if ($scope.posts.length &amp;gt; 0) {
                        $scope.viewItemURL = _spPageContextInfo.webAbsoluteUrl + &amp;quot;/&amp;quot; + $attrs.blogsiteurl + &amp;quot;/Lists/&amp;quot; + $attrs.listtitle + &amp;quot;/Post.aspx?ID=&amp;quot;;
                        $scope.listRSSURL = _spPageContextInfo.webAbsoluteUrl + &amp;quot;/&amp;quot; + $attrs.blogsiteurl + &amp;quot;/_layouts/15/listfeed.aspx?List={&amp;quot; + $attrs.listid + &amp;quot;}&amp;quot;;
                        $scope.postAlertURL = _spPageContextInfo.webAbsoluteUrl + &amp;quot;/&amp;quot; + $attrs.blogsiteurl + &amp;quot;/_layouts/15/SubNew.aspx?List={&amp;quot; + $attrs.listid + &amp;quot;}&amp;amp;Source=&amp;quot; + _spPageContextInfo.serverRequestPath + &amp;quot;&amp;quot;;
                    }
					else {

					    $scope.noItemsFound = true;
					}
				});
            }
        };
    }); // End directive()
}()); // End IFFE

The functionality of the widget is done as an Angular application. On the first rows of the code, we are giving a name for the application and loading the necessary extension. First thing on the code is a custom filter called htmlToPlaintext. You may call this function with a parameter holding some text content. The function will strip out all HTML elements with a regular expression and return a pure text content. This is used in the presentation layer.

 .directive('postsElement', function() {
 return {
 restrict : 'EA',
 transclude : false,
 templateUrl: '/ourfirm/offices/SiteAssets/webparts/LatestPost/latestPost.html',
 controller: function ($scope, $log, $q, $http, $attrs) {

After this, we have created a directive element named ‘postsElement’ that is will be called on the script web part.

Important things for the directive are to give the right path to the template file and pass-through the variables with $attrs parameter. As we can see from the directive element, we are passing a couple of parameters to be used during the functionality.

  • blogSiteURL = If the widget is placed on another web than in blog site, you can give the URL with this parameter. URL is used during the REST call to get the post. URL should be given as relative against site collection root.
  • listTitle = Title of the list where posts are read. The title is used during the REST call to get the post.
  • listID = Id of the list where posts are saved. This is used in email alert and RSS functions.

In the first section of the code, we are creating a function called ‘getEvents’ that makes and REST API call against SharePoint and gets all the posts from a given list. The call is using the parameters mentioned above to do the call. If the call is successful, the found data items will be returned.

Next, the code will construct a deferred object from the function above. We are catching the promise and saving the found data items to the ‘posts’ variable. Also if some items were found, we would construct few parameters for view item, RSS and alert links. These parameters are used in the template during the construction of the widget.

<div class="resultMore"><a href="{{viewItemURL}}{{post.ID}}">More≫</a></div>

And that’s it. Here you have a relative simple POC of client-side widget that is reading information from SharePoint and using Widget Wrangler framework for better maintenance.

Your Day with Microsoft NextGen Portals

Posted on 06/23/2015 by

Leave a Comment

Microsoft Ignite 2015 last month was huge. Basically everything from Microsoft stack was presented there. For me all things related to modern workplaces, meaning Office 365 and SharePoint, was under the microscope. But I have to say that the information flow was a blast and it was almost impossible to digest all the new things and news that were presented.

We heard about Groups, Delve, Infopedia, SharePoint 2016, Yammer etc. Microsoft is building their cloud and portal solutions based on following strategy – Cloud first, mobile first. You definitely saw in Ignite.

After the conference many may wonder that how is this all wrapped around together and what tools I should use? I don’t have a clear answer to that. There’s always the one and only “It depends” factor. But now after a while of reading and thinking all the new, I decided to give it a try. On one point of view at least.

I made a presentation of one full day for typical information worker and how these new or currently existing tools can be used and how they may help users during the day. At the same time you can see the main published NextGen portal tools from Ignite.

One new cool tool available for both public Office 365 and for enterprise Office 365 is Sway. With Sway you can quickly create nice looking mobile ready presentation. That is why I used that also. Remember to add Sway to your tool box.

>> Your Day with Microsoft NextGen Portals

Mikko Koskinen

Mikko Koskinen

I am working as a Senior Consultant on Sulava. My primary work is related to Power Platform, SharePoint, and Office 365 solutions. In my projects, I usually am acting as a solution designer (system and solution architecture planning), taking part in customer offer processes, and working as a developer or subject matter expert during the projects.

Verified Services

View Full Profile →

Follow me on Twitter
Follow Mikko Koskinen on WordPress.com
%d bloggers like this: