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

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