SPFx (SharePoint Framework)

What is Gulp-serve-Dev-Cert ?

• We need to run the “gulp trust-dev-cert” one time in your development machine to trust the certificate – if you have already executed this command during the prerequisites of the SharePoint Framework installation
• 
  
• gulp trust-dev-cert will invoke a command (on Windows and Mac) to add the certificate used by SPFx to the Trusted Root Certification Authorities store for the current user. 

Major topics of SPFx :

Scaffolding webparts and extensions.
Debugging with Chrome.
Creating and attaching the UI.
Reading and manipulating data.

Why SPFx is best ?

1. SPFx is a straight javascript that runs in browser.
2. Compile and runs in browser.
3. you are able to use whatever framework and whatever library.
4. User cannot edit the script.
5. SPFx performance is very fast and very useful.

Package.Json : 

Package-Solution.Json:

Config.Json:

1. We can the configuration files.
2. You can configure all external java-script, jqurey you can specify.
3. We can see entry point of webpart.

     Ex:- GetListItemWebpart.js

Serve.Json:

Package.Solution.json

TsConfig.Json

Settings.Json

Tslint.Json

Deploy.Azure.Storage.Json

We will have Node Modules like Pnp anf Json, React all.

Import:- 
Export:-  

Src: We will have Src Directory. there we have webpart names.

We can see GetListItemsWebpart.ts.
In this file should have --   import { Version } from '@microsoft/sp-core-library';

In this file We can add Interfaces.
Interface 1 for customers Interface 2 for customers items.
Now required for function fetch the Data from list.

Fetch data Function

Private _GetListCustomerData()

{

}

Private _RenderListCustomer(Items: ISPlistCustomerItem[]);void

{

  

}

We have mapped to the ISPListCustomerItem Interface in _Renderlistcustomer Function.

1. After that run Integrate Terminal go to view->find Integrate Terminal.
2. Here is Integrate Terminal for deploying and testing the suggestion in the workbench.
3. Workbench: means we can test your webpart without actually deploying into sharepoint. Only       available for the workbench.
4.  Just type gulp serve. 
5. once run the above command in Terminal
6. localhost workbench will be open in default browser(IE Edge)
7. Or you can open workbench.aspx 
8. We can able to add webpart and check it.


Link for Code

Angular Elements:

Self Bootstrapping
Hosts Angular component inside custom element
i.e <MyElement>
Allows Angular to play well with other components on page
Angular and Angular elements are you can have multiple SPFx webparts are running on same page at the same time all playing very good each other.

Preparing visual studio code for debugging

Prepare the initial setup

    Install Yeoman and gulp
    - npm install -g yo gulp
   Install SPFx Yeoman SharePoint generator
   - npm install -g @microsoft/generator - SharePoint
  Get the project ready with  Yeoman
       - Automates setup of projects using templates
  Finally
   - gulp trust-dev-cert

run the initial setup(Running Yeoman for scaffolding web site)

--Open  command prompt as a administrator

-- c:\yourProejctspath\Proejctitle>yo @microsoft/generator - SharePoint
    after enter button now we can do yeoman generator.
    generator window will open
    it will ask solution name

What is your solution name?
  Myproject

Which base line packages do you want to target for your component(s)?
  -SharePoint online only
  - SharePoint 2016 onwards, including 2019 and sharepoint online
 -  SharePoint 2019 onwards, including sharepoint online

Where do you want to place the files? 
use the current folder

Which type of client -side component to create?
 Webpart
 Extensions

What is your webpart name?
 mycustomwebpart

Which framework would you like to use?
  >No javascript framework
  >React
  >Knockout

Once you select the framework. it will install all the node dependencies required for the project

after you select framework it will take few mins and fire up
after that Solution will be created.

c:\yourProejctspath\Proejctitle>gulp trust-dev-cert

after that we will ready see visual studio code

c:\yourProejctspath\Proejctitle>code .

after that visual studio code window will be opened

see the below Window

in the project solution you will webparts in src directory with various files

Install and configure debugging components
 Configure debugging:-
                            - installing debugger for chrome ( or other browser)

• Go to extension tab
• find the Debugger for chrome 4.11.1
• click install and click reload.
• if others browser search in extension search tab.

Now if go the debug tab you will localworkbench debugg 

click settings configure or Fix "launch.Json"

url will be form in different workbenches.

• Local Workbench
• Hosted Workbench

Developing the User-interface(UI)

• Prepare the angular libraries
• Starting the data service
• Writing the home controller
• Writing the app module
• Writing and attaching the HTML

Preparing libraries
Angular
PnPjs - Is much better and easy get SharePoint data
Open up Commad prompt
write command - npm install @pnp...............

installed the all dependencies of angular js PnPjs.

In the solution next steps will be as below for write the functionality to events, models, module,services,HTML

• Prepared the libraries
• Started the data service
• Write the code for home controller
• Write the cope for app module
• Write and attached the HTML

As per the above we can develop the Methods.

Testing the Methods in Local and Online
Go to Terminal

We can see google chrome Pop up in Local Host

1. Click an add button in center of the page.
2. After that will see the our custom webpart in All A to Z  and select it.

We can see google chrome Pop up in Online

find below

Deploying the webpart

1.  Address tslint issues
2. Check solution manifest
3. Enabling the Office365 CDN
4. Packaging the solution
5. Deploying the solution

The solution Manifest -
  Package-soluton.json is the manifest file
  Contains settings like
    - $schmea
    - Solution
    - Id

Config.Json:

{
	"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
	"version": "2.0",
	"bundles": {
	"hello-world-web-part": {
	"components": [
	{
	"entrypoint": "./lib/webparts/helloWorld/HelloWorldWebPart.js",
	"manifest": "./src/webparts/helloWorld/HelloWorldWebPart.manifest.json"
	}
	]
	}
	},
	"externals": {},
	"localizedResources": {
	"HelloWorldWebPartStrings": "lib/webparts/helloWorld/loc/{locale}.js"
	}
	}

TSLink issue - 
  Its avoid the duplicate switch cases, duplicate variables

 Prepare the Package - 
    We should required Online Management shell for Prepare the Package

Enable the O365 CDN -

Verify Solution settings -
Locate "IncludeClientSideAssets":true
.True:assets served from O365 CDN.
.False:assets served from app catalog

     Packaging the solution with Gulp

--> Go to Terminal

- gulp bundle --ship
- gulp package-solution--ship
   Creates a feature for your webpart
   Stored safely in a .sppkg file
      - i.e. MycustomWebpart.sppkg

Finally
We want to find package file.
Go to SharePoint Directory and then we can find mycustomPorject.sppkg


Deploying the Solution

1. Copy the solution file to the app catalog in SharePoint
2. Install it on your site
3. Add the web part
4. Publish it.
5. And Preview the Web part in SharePoint

Node.js download and install for install yeoman and gulp.
because once Node.js installed, we can run commands in node.js

npm - dependency manager for node.js server, can resolve transitive dependencies/dependency trees

Yeoman -  provided scaffolding, i.e skeleton projects

gulp - same as grunt, but written in js only

SPFx Debugg: --> We can debugg by Chrome control.

configure debugging components
                             - installing debugger for chrome ( or other browser)

• Go to extension tab
• find the Debugger for chrome 4.11.1
• click install and click reload.
• if others browser search in extension search tab.

You can then start your local server by running

gulp serve --nobrowser

SPFx Deploy:  --> Go to Terminal

• yo @microsoft/sharepoint
• gulp bundle –ship
• gulp package-solution --ship

--> Upload your SPFx webpart package to the SharePoint App Catalog. 

--> The package “.sppkg” file is created when you run gulp package-solution and it is saved into the directory.

gulp bundle --ship - this command will help us to bundle all the typescript files and it’s dependencies from node_modules into a single JavaScript compiled file.

Initially, the compiled typescript files are converted into JavaScript files and saved in lib folder and then from there the final bundle file will be saved in a folder called temp/deploy.

gulp package-solution --ship - this command will help us build the installation file I mean. sppkg file.

Make sure to mark the includeClientSideAssets as true in package-solution.json, this will help us to use Office 365 CDN.

https://www.c-sharpcorner.com/article/sharepoint-framework-debugging-spfx-solutions/

How do you add .sppkg file in CDN in SharePoint online?

Step 1: Create webpart
Step 2: Create SharePoint Library

Create a SharePoint Library “Myspfxwebparts” and give read permission to all users.
Step 3: Open code Visual Studio Code

Open the code in Visual code tool. Type in cmd : code .
Step 4: Update the CDN Path

We need to configure the CDN path, i.e SharePoint Library what we created. https://vv.sharepoint.com/sites/dev/Myspfxwebparts we have to configure our CDN path in write-manifests.json file. This file can be found in the config folder. i.e
{
  “cdnBasePath”: “https://vv.sharepoint.com/sites/dev/Myspfxwebparts”
}

Save the file. Switch to cmd prompt
Step 5: Package and Deploy the webpart

Generate the files to deploy in the SharePoint Library
gulp bundle –ship Generated files can be found in spfx-firstwebpart\temp\deploy folder upload the files in the SharePoint Library
https://vv.sharepoint.com/sites/dev/Myspfxwebparts
Create a .spapp file for this webpart to upload in App Catalog
gulp package-solution –ship Generated spapp file can be found in spfx-firstwebpart\sharepoint folder upload the spapp file in App catalog SharePoint will show you a popup and ask you to trust the client-side solution to deploy. Click Deploy
Step 6: Install the App


Open your SharePoint Site Go to “Add an App” Click “From Your Organization” Select and Click you app to install it.  Click here 

How to SPFX webparts in Classic page?
We can used by PnP Powersehll script. Click here




SPFX components:

https://jatinambaliya.blogspot.com/2018/01/spfx-you-dont-seem-to-have-generator.html

call npm uninstall -g chalk

call npm uninstall -g loadash

call npm uninstall -g tar-fs

call npm uninstall -g update-notifier

call npm uninstall -g yeoman-generator

call npm uninstall -g yosay

call npm uninstall -g yo

call npm uninstall -g gulp

call npm uninstall -g @microsoft/generator-sharepoint

call npm install -g chalk

call npm install -g loadash

call npm install -g tar-fs

call npm install -g update-notifier

call npm install -g yeoman-generator

call npm install -g yosay

call npm install -g yo

call npm install -g gulp

call npm install -g @microsoft/generator-sharepoint

c:/venu/Md spfx

c:/venu/cd spfx

c:/spfx

yo @microsoft/sharepoint

npm shrinkwrap 

Done..

Next

gulp trust-dev-cert

gulp serve

Code .

npm install jquery --save

npm install @types/jquery --save

How to add jqurey external on config.json?

http://mundrisoft.com/tech-bytes/how-to-add-external-libraries-and-assets-in-sharepoint-client-side-web-part/

1.  

This creates files under temp/deploy – which need to be copied to the Assets folder of your site

2. gulp build  
3. gulp -ship

Running the below commands creates sppkg in your target path.

4. gulp bundle --ship  
5. gulp package-solution --ship

6. clean cache with
   npm cache clean --force
7. install the latest version of npm globally as admin:
   npm install -g npm@latest --force
8. clean cache with
   npm cache clean --force
9. Try to install your component once again.>

Developer certificate has to be installed ONLY once in your development environment, so you can skip this step, if you have already executed that in your environment.

gulp trust-dev-cert

Now that we have installed the developer certificate, enter the following command in the console to build and preview your web part:

gulp serve

                                               First Should Know Concepts of SPFX

1. How to Set up your SharePoint Framework development environment

From <https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment>

We can use any code editor -- i.e Visual studio code

Yeoman helps you kick-start new projects'

Yeoman generator for creating new web parts

The generator provides 1. common build tools, 2. common boilerplate code.

Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project.

install the SharePoint Framework Yeoman generator globally

Client-side web parts are client-side components that run inside the context of a SharePoint page

2. How to setup-node-behind-web-proxy

npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080

From <https://jjasonclark.com/how-to-setup-node-behind-web-proxy/>

3. Create build your first SharePoint client-side web part.

Create new proejct directory

Md spfx

Cd spfx

. To preview your web part, build and run it on a local web server.

.The client-side toolchain uses HTTPS endpoint by default. This setting can be configured in the serve.json

Gulp Serve -

This command executes a series of gulp tasks to create a local, node-based HTTPS server on localhost:4321 and localhost:5432.

SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint

 + add icon

To add the HelloWorld web part, select the add icon.

Select the add icon in the canvas to reveal the toolbox

This opens the toolbox where you can see a list of web parts

The list includes the spfx1 web part as well other web parts available locally in your development environment.

We can add client side webpart into a client side page.

Now you're running your web part in a page hosted in SharePoint

Select the pencil icon on the far left of the web part to reveal the web part property pane

More info find below link

From <https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part>

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

Find outdated packages

To find the outdated packages in your client-side project, including SharePoint Framework and other packages your project depends on, run the following command in a console in the same directory as your project.

shCopy

npm outdated

To identify the SharePoint Framework packages, look for the package names that start with the following npm scope and prefix:

textCopy

@microsoft/sp-

Retrieve lists from SharePoint site

1. https://yourtenantprefix.sharepoint.com/_api/web/lists

You will use SharePoint REST APIs to retrieve the lists from the site, which are located at https://yourtenantprefix.sharepoint.com/_api/web/lists.

2. SharePoint Framework includes a helper class spHttpClient to execute REST API requests against SharePoint

                 CSS add

const styles2 = require('./customCSS.css');

<div className="error1">text testsss</div>

What is logging mechanisim in SPFx?

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/connect-to-api-secured-with-aad

How to handle exception and logs in SPFx?

SharePoint Framework (SPFx) also has no exception to it and supports logging APIs which can be used during the lifecycle of the web part.

Ex:-  console.log(error);

1st - reference the Log class.

import { Log } from '@microsoft/sp-core-library';

2nd - Log your message from your WebPart

Log.verbose("HelloWorld", "Here is a verbose log", this.context.serviceScope);

Log.info("HelloWorld", "Here is an informational message.", this.context.serviceScope);

Log.warn("HelloWorld", "Oh Oh, this might be bad", this.context.serviceScope);


Log.error("HelloWorld", new Error("Oh No!  Error!  Ahhhhhh!!!!"), this.context.serviceScope);

https://www.c-sharpcorner.com/article/sharepoint-framework-logging/

How to convert Classic Page into Modern page in SharePoint online?

Ans:- PnP has come with an approach to help migrate our classic SharePoint pages to new modern look and feel.

There are a few things to notice -

• Web parts on the Classic page are replaced with modern 1st party web parts.
• Web parts not supported in the Modern SharePoint are not migrated.

What is SharePoint Online Retention Policy?

Plan Your SharePoint Online Retention Policy

1.When creating a retention policy, it’s important to make sure you understand how it will affect existing documents.
2. A retention policy specifies that a document will be deleted a certain amount of time after it has been created or modified.
3. When you apply a retention policy to a SharePoint site, it will apply to all documents -- even those that were created before the policy was applied.
4. So if you set a retention policy of three years from the creation date, and apply it to a site that contains documents that are over three years old, these documents will be deleted.
5. You also have the option to choose whether to apply the retention policy based on the creation date or the last modified date.


CDN Path Best Example:-


https://www.c-sharpcorner.com/article/sharepoint-framework-deploy-spfx-webparts-to-sharepoint-library/


Create Site columns and Content types in SPFx?

https://www.spguides.com/sharepoint-framework-create-site-column-content-types-and-list/