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

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

PowerApps

PowerApps is part of Office 365 and allows users to create business applications a couple of hours. This article shows you how to start learning the basics of PowerApps. Where do I develop a PowerApp? PowerApps development is done in PowerApps Studio, which is a downloadable client application or directly inside your browser. Start with a template … My recommendation, if you’re just starting, is to create your first PowerApp from one of the templates included in the product.   At the moment do not worry about how the PowerApp looks like. Just click on the “create” button and pick a template to use in your business environment. Branding and building for mobile devices Some applications in the templates section have multiple design modes. In the example of the Estimator Pro PowerApp, there are two design modes; the phone factor and tablet factor. A phone factor does not mean your PowerApp cannot be displayed on a PC or tablet; it means it will work ...
Post a Comment
Read more