Friday, August 25, 2017

Add an Attachment to a list item with PnP JS Core library and Dropzone.js


I was using ng-dropzone which is a AngularJS directive for dropzone.js and PnP JavaScript Core Library in order to add an attachment for list item.

I was following this url in order setup dropzone.js in my SharePoint hosted add-in.

In order to add an attachment to SharePoint list item please do the below changes.

  1. Replace $scope.dzCallbacks as below
          $scope.dzCallbacks = {
                'addedfile': function (file) {
                'success': function (file, xhr) {
                    console.log(file, xhr);
  3. Add below function to insert item and add attachment

Since my solution is a SharePoint hosted add-in I’m using crossDomain call and you have to replace your addinWeb and hostWeb url and also your have to change the list name. My list name is “abc”

     $scope.saveItem = function () {
            $pnp.sp.crossDomainWeb(addinWeb, hostWeb).lists.getByTitle("abc").items.add({
                Title: "Title",

            }).then((result) => {
                $scope.dropZoneFiles.forEach(function (file) {
                    var toUpload = file; 
                    var r = new FileReader();

                    r.onloadend = function (e) {
                        var data =;

                        item.attachmentFiles.add(, data).then(function () {



The item will be created and the attachment will be uploaded.

Monday, August 7, 2017

Sri Lanka SharePoint Forum monthly gathering – August

Come join us on 9th, August 2017 for Sri Lanka SharePoint Forum monthly gathering.

I will be speaking on "Build SharePoint Online Workflows and Customize Forms Using Nintex for Office 365"

Event Url:


Updated On: 09th of August 2017

Slides which used for the event.

Some clicks during the event

Suhail Jamaldeen (1)Suhail Jamaldeen (2)Suhail Jamaldeen (3)Suhail Jamaldeen (4)

Friday, August 4, 2017

SharePoint Modern Page Quick links web part missing Layout option?


Some of the Microsoft documented features, which are related Office 365 to are not available for some tenants. I noticed that from SharePoint Online modern experiences – some of the features were missing. Here is the conversation I started.

It’s because my tenant is not configured to First Release

First release candidates receives the Office 365 updates immediately.


According to, Quick links web part in SharePoint Modern Pages should show a "layout" option where we can select either Compact or Film Strip. But my development site and client's site doesn't show such options. Any idea?

My developer site is given below.



I added my tenant to “First release for selected users” in Office 365 Admin Center.

Step 01. Go to Admin Center from the Quick Launch

Step 02. Select “Organization profile” under Setting.

imageStep 03. Under Release preferences, select Edit under Actions dropdown


Step 04. Selection the option “First release for selected users” and click Next


Step 05. Click Yesimage

Step 06. Then you have to add people. I have added people who are managing sites, because they are the people who are going to customize the sites.  

And then Hit Save



Once I did the above configuration, I was able to see the First Release features in my Office 365 Tenant. It may take some time.


Wednesday, August 2, 2017

How to request for a code review in Visual Studio - Tamil

This is my first YouTube session related to Technology.

I would greatly appreciate it if you kindly give me some feedback and your feedback will definitely help me a lot in future.

Remove the Header area from the Modern SharePoint pages


Recently one of clients wants to remove the header area from their SharePoint modern page which consume lot of space.

Till date SharePoint Online doesn’t provide such feature to remove the header.



Step 01. Open the particular page in SharePoint Designer and edit using Advanced Editor 

Step 02. Change Page Layout Type from Article to Home. For that search for <mso:PageLayoutType and change the value as given below.

<mso:PageLayoutType msdt:dt="string">Home</mso:PageLayoutType>


Now the header is gone.


Access Denied

If you get “Access Denied” error, follow this link and get resolved.