Prepare environment for SharePoint Framework (SPFx) Development

Microsoft has already announced the General Availability for SharePoint Framework. We can develop modern web parts for SharePoint using SharePoint Framework (SPFx). Web Parts developed using SPFx can be added to modern view pages as well as classic pages in SharePoint.

Prepare your development environment for SharePoint Framework development:

A. Install Node Dependencies for SharePoint Framework.

1. Download and Install Node.js.
2. Open command prompt and execute below commands one by one to install bower, grunt-cli and yeoman respectively.

i. npm install -g bower
ii. npm install -g grunt-cli
iii. npm install -g yo

3. Install Microsoft SharePoint Generator by executing below command in command prompt.

i. npm i @microsoft/generator-sharepoint -g

4. Install Gulp by executing below command in command prompt.

i. npm install gulp -g

B. Install desired source code editor (e.g. Visual Studio Code, ATOM, Sublime).

Build your first web part using SharePoint Framework (SPFx):

A. Open Node.js Command Prompt.
B. Navigate to the directory where you want to have your solution located at (e.g. cd c:\SPFx).
C. Execute command: yo
D. This will list down the available generators. As we have already installed Microsoft SharePoint Generator, this will appear as an option here.
E. Select “Microsoft SharePoint Generator” and press enter.

F. This will ask for below details, enter appropriate details and move forward:

i. Solution Name – e.g. “HelloWorld”.
ii. Select “Use the current folder” option.
iii. You can select the JavaScript Web Framework from available options. I have selected “No JavaScript Web Framework” option for this application.
iv. What is your webpart name? – e.g. “HelloWorldWP”
v. What is your webpart description? – e.g. “Hello world web part developed using SharePoint Framework.”.
vi. This will take a few minutes to prepare the solution.

G. Once solution is created, we can see success message for solution creation as shown below:

H. To check the solution, open the solution in Visual Studio Code from file system directory (C:\SPFx) where we created the solution.

I. As this post is focused on to prepare the development environment for SPFx, we will not go in depth with the source code, but as we can see in below screenshot, default Hello World web part appears in the solution:

Run SPFx solution on development environment:

A. Open Node.js Command Prompt and navigate to the directory where we created the solution (C:\SPFx).

B. Execute command “gulp serve” as shown in below screenshot:

C. On execution, we get SharePoint User Interface in browser on localhost (It is NOT required to have SharePoint installed on development environment). And when we click “+” button on modern UI, we can see Hello World web part in available options as show below:

D. When web part is added on the page, we can see the same as shown below:

So, the environment is prepared and verified for SharePoint Framework (SPFx) development. For verification, we have used default Hello World web part, we can develop the web parts as per requirements. 

If you have any questions you can reach out our SharePoint Consulting team here.

How to escape a special character in filter parameter using REST API

Scenario: 

Recently working with REST API to get items from SharePoint list filtered by title field, I got stuck. it was working fine while having data without special character. But having special character - single quote/apostrophe (') in filter parameter was giving an error. I tried by passing value using EncodeURIComponent, but it didn't work either and getting the error as shown below:

Reason: 

EncodeURIComponent, Escape or EncodeURI functions can’t escape few special characters: - _ . ! ~ * ' ( )

 

Solution:

For such special characters as filter parameter, we should double the character (2 single quotes) and use it.

Example:

Non-working REST API:
https://{Site URL} /_api/web/lists/GetByTitle('listname')/items? select=ID&$filter=Title eq 'what's up'

Working REST API:

https://{Site URL} /_api/web/lists/GetByTitle('listname')/items? select=ID&$filter=Title eq 'what''s up'

If you have any questions you can reach out our SharePoint Consulting team here.

Create a subsite programmatically using Custom Site Template through SharePoint JavaScript Object Model and REST API

Here, I'll explain you in detail how to create SharePoint sub-site programmatically using custom Site Templates through JSOM and REST API.

 

Implementation Approach: First, we need to identify Web Template Id for our custom template. programmatically. And then, we will a create sub-site using the Web Template Id.

Let's go through the code snippet, now. We have two functions in code snippet:

1. CreateSubsiteByTemplateName(title, description, webUrl, templateTitle) 

- This function will create a sub-site by Template Name. First of all, it will find out the Template Id from Template Name, and then, will call another function to create the sub-site.

- Parameters Information:
    1. title= name of sub-site which you want to create Ex: "subsite1"
    2. description = description for sub-site
    3. weburl = URL for sub-site Ex: "subsite1"
    4. templateTitle= Name of custom template Ex: "Physicians"

2. CreateSubsiteByTemplateId(title, description, webUrl, templateId)
- This function will create a sub-site by Template Id.
- Parameters Information:
    1. title= name of sub-site which you want to create Ex: "subsite1"
    2. description = description for sub-site.
    3. weburl = URL for sub-site Ex: "subsite1"
    4. templateId= Id of custom template Ex: "{D5729655-B3D8-4DED-B5E9-3EE09934FC80}#Physicians"

Code Snippet 1:

 function CreateSubsiteByTemplateName(title, description, webUrl, templateTitle) {   
   var context = new SP.ClientContext.get_current();   
   var web = context.get_web();   
   context.load(web);   
   var webTemplates = web.getAvailableWebTemplates(1033, false);   
   context.load(webTemplates);   
   context.executeQueryAsync(function () {   
    var enumerator = webTemplates.getEnumerator();   
    var templateId = "STS#0";   
    while (enumerator.moveNext()) {   
     var webTemplate = enumerator.get_current();   
     var webTitle = webTemplate.get_title();   
     if (webTitle == templateTitle) {   
      templateId = webTemplate.get_name();  
      break;   
     }   
    }   
    CreateSubsiteByTemplateId(title, description, webUrl, templateId);   
   },   
    function (sender, args) {   
     alert(args.get_message())   
    }   
   );   
  }  

Code Snippet 2:

 function CreateSubsiteByTemplateId(title, description, webUrl, templateId) {    
   var restAPIURL = "/_api/web/webinfos/add";    
   var newSiteData = JSON.stringify(    
   {    
   'parameters': {    
    '__metadata': {    
    'type': 'SP.WebInfoCreationInformation'    
    },    
    'Url': webUrl,    
    'Description': 'Subsite created from REST API',    
    'Title': title,    
    'Language': 1033,    
    'WebTemplate': templateId,    
    'UseUniquePermissions': true    
   }    
   });    
   $.ajax    
   ({    
   url: restAPIURL,    
   type: "POST",    
   async: false,    
   data: newSiteData,    
   headers: {    
    "accept": "application/json;odata=verbose",    
    "content-type": "application/json;odata=verbose",    
    "X-RequestDigest": $('#__REQUESTDIGEST').val()    
   },    
   success: function (data) {    
    console.log('site created');    
   },    
   error: function (data) {    
    console.log('Error creating site');    
   }    
   });    
  }    

If you have any questions you can reach out our SharePoint Consulting team here.