SharePoint SPFx Intro & Configuration to Create New SPFx Solution

SharePoint SPFx Introduction
What is SPFx?

1. SPFx is SharePoint Framework Extension which was newly introduced in SharePoint 2016 Online.
2. SPFx is introduced on replacement of SharePoint Visual Web Parts(SP Visual Web Parts can't be deployed to SharePoint Online).
3. In SPFx we can 3 types of solutions like Web Part, Extensions and Library.

Why SPFx?

1. The world is moving more and more towards client-side development. No matter how good the back-end architecture is, what the user gets to see is user interface. If the user doesn't feel a smooth and lag free experience, user would certainly complain.

2. With these advancements in technologies, SharePoint has decided to focus more towards improving the user experience with the product. So, this opens a world of endless possibilities for developers working with SharePoint. This means Microsoft SharePoint now has full support for open source tool chain.

Configuring Development Environment
       1.      Install Supportable Node JS Version
      If you are in Windows, you can use the msi installers in this link for the easiest way to set up NodeJS. If you have NodeJS already installed, check if you have the latest version by using node -v. It should return the current LTS version.

       2.      Install Yeoman and gulp
To install Yeoman and gulp open the Node js prompt in administrator mode and run the below command (Please run the Proxy commands in case below command not executes properly).
              
                  npm install -g yo gulp

a.     What is Yeoman & What it will do?
Yeoman is an open source client-side scaffolding tool for web applications. Yeoman runs as a command-line interface written for Node.js and combines several functions into one place, such as generating a starter template, managing dependencies, running unit tests, providing a local development server, and optimizing production code for deployment.

b.     What is gulp & What it will do?
Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. At a high level, gulp reads files as streams and pipes the streams to different tasks. These tasks are code-based and use plugins. The tasks modify the files, building source files into production files.

        3.      Install Yeoman SharePoint generator template

a.     The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure. To install the SharePoint Framework Yeoman generator globally, enter the following command in Node JS Command Prompt:

npm i -g @microsoft/generator-sharepoint

b.     If you need to switch between the different projects created by using different versions of the SharePoint Framework Yeoman generator, you can install the generator locally as a development dependency in the project folder by executing the following command in PowerShell:

npm install @microsoft/generator-sharepoint –save-dev

Once you are done with the installation, you will be able to create new webparts using SharePoint framework.
  
    4.      Install a Code Editor
You can use any code editor or IDE that supports client-side development to build your web part, such as:

The steps and examples in this documentation use Visual Studio Code, but you can equally use any editor of your choice.
  
     5.      How to create New SharePoint SPFx Project
a.      Open Node JS as administrator
b.     Create a directory to store the files by running the following command
md <folder name>
c.      Navigate to the new Folder
cd .\<folder name>\
d.     Navigate to newly created folder to create the SPFx project
e.      Run the below command to create New SPFx Project
yo @microsoft/sharepoint




f.  This will request a couple of details, enter all of those, and that will create the new project for you.
i.   What is the name of your project?

          ii.     What is the SharePoint version?
    
    
 iii. Select if the admin should have the option to deploy this app to all site or not.




           iv.   Select the type of client-side component.
   
                 v. Enter the webpart name & Enter the webpart description
      
vi. After the configuration, there is a confirmation message like the following.


        vii.  Select the framework of the webpart, this is just for scaffolding purpose


 Sharing is caring.... Enjoy SharePoint Coding.....





Comments

Post a Comment

Popular posts from this blog

SharePoint 2013 Keyword Query (KQL) Content Class Property Restrictions

Using property restrictions in your KQL queries, you can restrict your search to only pull back certain things like calendar events for instance. This is a very powerful way to limit search results  and get exactly what you are looking for. You can use these in your query like this: " lunch contentclass:STS_ListItem_Events " This will return only calendar events with the word "lunch" in them.  Pretty powerful and pretty simple. Here is a list of available content class items: STS_Site –  Site Collection STS_Web  –  Site (Web) STS_List_850  –  Page Library STS_ListItem_850  –  Page STS_List_DocumentLibrary  –  Document Library STS_ListItem_DocumentLibrary  –  Document Library Items STS_List  –  Custom List STS_ListItem  –  Custom List Item STS_List_Links  –  Links List STS_ListItem_Links  –  Links List Item STS_List_Tasks  –  Tasks List ...
Read more

Hide Save button in New and Edit form in SharePoint 2013 list

Image
Hide Save button from New Edit form We have a SharePoint list where we have customized the input form using InfoPath. And in that customized InfoPath form we have a custom Save button and we are saving the item from the default data connection. This button also has some validation rules. So we do not want any user to insert an item by clicking on the Ribbon Save button. They should only be able to save through our Submit button which was presented inside the InfoPath form. You can disable the Save button from the InfoPath form submit properties. But we do not want to show the Save button at all. Be default the submit button appears like below:  We have written the JavaScript and css code to hide the Save button. For this Edit the page and then Insert a Script editor web part into it. Then write the below code inside the script editor web part and Save the page. <script type="text/javascript">     function hideEdit() {      ...
Read more

Filtering the Sharepoint List Taxonomy Column using Rest API

I ran into a strange issue today when using the SharePoint 2013 REST API for Lists with Managed Metadata columns    but I just had a ‘clever workaround’ moment with SharePoint’s oData/REST implementation when it comes to filtering list items based on taxonomy (managed metadata) columns. Now I do not consider myself a developer, so this article is probably a little verbose for some readers, but should be helpful to power users or IT pros. 1. To filter the Taxonomy columns in SharePoint list using Rest API call we need to use the Post method. 2. The Rest API call will give errors some times when the Rest API Query string crosses limit 260 characters that time we will use the Query in the body. Those things are clearly explained in the below example clearly. 3. WE can use the CAMEL Query in the Rest API call this example come under that. < script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></ script > < scri...
Read more