Skip to main content

SharePoint Framework (SPFx).



What is SharePoint Framework

 Client Side SharePoint Development using SharePoint Framework (SPFx).

The SharePoint Framework (SPFx) development is a great milestone for SharePoint Client Side development. It is a page and web part model. This provides full support for client-side SharePoint development. It allows to easily integrate component with SharePoint data and supports for open source tooling.

With SharePoint Framework, you can use any of your preferred web technologies and tools in your preferred development environment. It is to build responsive and mobile friendly SharePoint products and apps.

SharePoint Framework (SPFx)  helps to build custom user interface extensions on top of SharePoint Online in supportive and future prepared way as SharePoint Online keeps itself updated time to time.

Create new web part project

You need to perform following steps:

 1.      Create new project directory at your opted location
md helloworld-webpart

2.      Go to project directory
cd helloworld-webpart

3.      Create project using Yeoman SharePoint Generator

               yo @microsoft/sharepoint

 It will ask for few inputs, provide the inputs as follows:

 1.      Solution name? helloworld-webpart

2.      Type of client-side component to create? WebPart

3.      What is the web part name? HelloWorld

4.      What is your web part description? This is my first client side web part using SharePoint Framework

5.      Which framework would you like to use? No JavaScript Framework

 
At this point, Yeoman will install dependencies and generate files for HelloWorld web part. Once processing is completed, it will show success message.

 

 Preview web part


Run the following command to establish trust
 gulp trust-dev-cert


You will see a security warning as below, click Yes to install.


Now you have installed developer certificate. Run following command to build and preview your web part. 

gulp serve
You may be asked for warning. Click Allow access.
 

SharePoint client side development tool gulp is a task runner which performs build processes tasks such as:

 1.      Bundle and Minify JavaScript and CSS

2.      Run tools to call bundling and minifying tasks before each build

3.      Compile CASS to CSS

4.      Compile Typescript to JavaScript

Visual Studio Code provides built-in support for gulp and other task runners.

 Now, It will launch SharePoint Workbench where you can add your client side web part on the page. This is helpful while development as you don’t need to deploy your client side web part every time while it is under development.


You can stop gulp by choosing Ctrl+C in command prompt where gulp is running. Then you will provide answer Y to stop it.


 SharePoint Workbench

As already discussed, below screen shows temporary Workbench page. However, Workbench page is also available on SharePoint. You can visit to this page by using URL https://your-sharepoint-site-url/_layouts/workbench.aspx

Now, click on ‘+’ icon on horizontal bar.


Select “Hello World” web part to add.


You can change its view to mobile mode by selecting mobile icon on top bar.


 

Comments

Post a Comment

Popular posts from this blog

Plan SharePoint Migration

Guide to a SharePoint Migration This blog will show how enterprises can approach their SharePoint migration with a few tried and tested action plans. This blog also details how you can successfully define a migration  roadmap, strategy, and goals for a successful SharePoint migration. There are four big transitions you’ll have to consider, before you dive into how to set up a pre-migration strategy. The Different Paths to Modern Management The following explains the four transitions and migrations that can be executed—successful or not. Cloud-first The Cloud-first path is perfect for startups, as there is no need for a migration. Essentially, everything is created in the cloud. Think: Cloud first and only cloud. Big Switch Transition The Big Switch path is often considered the most risky strategy, as organizations can never verify if the transition (also known as “big bang transition”) will end up as a success or a failure. Group by Group Transiti...
Post a Comment
Read more

3 ways to filter SharePoint lists and libraries

One of the greatest benefits of metadata is the ability to filter on it and get to what you want with just a few clicks. Filtering for information is quite a common exercise these days. Every time we do online shopping, we filter for stuff. When we shop on Amazon® for shoes (something I do every day 🙂 ), we filter on cost, shoe size, reviews, brand among other things. When you go to a bookstore website, you filter for author and genre. When you research your dream car – you filter on car type, fuel economy, color. In SharePoint, we have not one, but three ways to filter SharePoint metadata! Today I would like to describe and explain all the three options to you. Option 1: Column header filter This is the most basic option that has been available ever since custom columns became available in SharePoint. Essentially this is the filtering you do using column headers. The functionality might be well familiar to many users as this is something we can do in Excel as well. ...
Post a Comment
Read more