SPFX Notes

1. npm init –yes (won’t ask questions and assumes yes for all of them).
2. WebPack: Webpack is a module builder. Webpack is a tool wherein you use a

configuration to explain to the builder how to load specific things. It will then create
bundles — as few as possible, as optimized as possible, that you include as the scripts in
your application.
webpack.config.js example:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
Then run webpack on the command-line to create bundle.js.
3. Yeoman: Yeoman is basically a node packge that allows us to generate project

structures for well-known projects. Yeoman has a whole registry and we can use the
registry to find new templates, install templates and generate code based on those.
npm install –g yo
Now install yoman templates(generator):

npm install –g generator-electron
To run:
yo electron
Install gulp:
npm install -g gulp
Install Sharepoint Generator(template) for yoman:

npm install -g @microsoft/generator-sharepoint
Create SharePoint Framework template (start questioning):

yo @microsoft/sharepoint
Install Trust certificate so that browser allow to render the page:
gulp trust-dev-cert
Run Webpart locally:

gulp serve
spfx environment:
NoYoGenGulp (trick to learn)
Q. How to move web part created for one site collection to other?
Ans: We will deploy it to the app gallery of the specific site collection and then it
will be available for that specific collection.
Q. Question asked while creating SharePoint template:
Ans. Blue are the newly added.
 What is your solution name?
 Which baseline package do you want to target for your component?
 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?
 Do you want to allow the tenant admin the choice of being able to deploy
the solution to all sites immediately without running any feature deployment
or adding apps in sites? (Globally Deployed if choose Yes)
 Which type of client-side component to create?
 WebPart
 Extension
 Library
 What is your web part name?
 What is your web part description?
 Which framework would you like to use?
 ReactJS
 KnokoutJS
 No Javascript framework
----------------------------------------------------------------------------------------------------
Structure of WebPart code:
Src folder:
webparts folder:
<webpartName> folder (eg. helloWorld)
 HelloWorldWebPart.manifest.json
 HelloWorldWebPart.module.scss
 HelloWorldWebPart.ts
o export interface I*WebPartProps { description: string;}
o export default class *WebPart extends
BaseClientSideWebPart<I*WebPartProps> {
{In video 2 more files are there HelloWorldWebPart.module.scss.ts and

IHelloWorldWebPartProps.ts }
ReadMore: http://mundrisoft.com/tech-bytes/create-custom-client-side-web-part-using-sharepoint-framework-spfx/
Changes in New:
1.
export interface IHelloWorldWebPartProps {
description: string;
This interface was the part of I*WebPartProps.ts but now it is part of *WebPart.ts
How to add property to Property pane of WebPart:
1. Import the required property at top of the *webpart.ts file.
2. Add the property to the groupFields array of getPropertyPaneConfiguration
method
After above two methods our property would be shown to the property pane of web
part. If you want to use that property value in the render() then follow the below two
steps also.
3. Add property name and type in I* WebPartProps interface.
4. Use the property in render() as ${escape(this.properties.<propertyname>)}
escape() Converts the characters "&", "<", ">", '"', "'", and "`" in string to their corresponding HTML
entities.
How to make web part asynchronous or in SPFX language, not reactive to

property changes:
Override the disableReactivePropertyChanges() in webpart.ts file.
protected get disableReactivePropertyChanges():boolean{
return true;
}
How to ge the Environment details inside webpart: (TRICK: earth core manages the
environment)
Just Import the Environment and EnvironmentType from @microsoft/sp-core-library':
import{
Environment,EnvironmentType
}from '@microsoft/sp-core-library';
How to get the SharePoint context

Webpart itself has a property in it called ‘Context’ that gives us the web part context. The
Context variable contains spHttpClient which allows us to make REST API calls to SharePoint.
Context variable also contains pageContext to get information about the page, web, user etc
we are working under. So basically it is a replacement for the variable __pageContext
Eg. this.context.pageContext.web.absoluteUrl
this.context.spHttpClient.get(code to call api)
this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl+`/_api/web/lists?
$filter=Hidden eq false`,SPHttpClient.configurations.v1)
How to Host WebPart to the production:

Step 1: Configure an Azure storage account and Blob Storage Container.
a.) Create Azure storage account (Eg. Name: spfxsamples). This creates a new
storage account endpoint spfxsamples.blob.core.windows.net
b.) Create a new Blob service container (Eg. Name: azurehosted-webpart) in
storage account
Step 2: CDN profile and endpoint.

a.) Create a new CDN profile.
b.) Create a CDN endpoint (Eg. Name: http://spfxsamples.azureedge.net , Origin
hostname: spfxsamples.blob.core.windows.net)
Step 3: Configure the solution.

a.) In package-solution.json: Update includeClientSideAssets value as false so
that client-side assets are NOT packaged inside of the sppkg file.
b.) In deploy-azure-storage.json: Replace the account, container, accessKey with
your storage account name, BLOB container, and storage account access key
respectively.
c.) In write-manifests.json: set cdnBasePath to <CDN_Endpoint/Blob Container
Name>
Step 4: Execute the gulp commands:

a.) gulp bundle –ship : This builds the minified assets required to upload to the
CDN provider
b.) gulp deploy-azure-storage : This deploys the web part bundle along with other
assets such as JavaScript and CSS files to the CDN.
c.) gulp package-solution –ship : This creates the updated client-side solution
package in the sharepoint\solution folder. Upload or drag and drop the client-
side solution package to the app catalog.
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/deploy-web-part-to-cdn
Step 5: Add WebPart to the site

Q. How many types of sites we can create in Modern SharePoint?
Ans. 3 types of Sites we can create:
1. Team Site
2. Communication Site: Design types are available are as follows:
a. Topic
b. Showcase
c. Blank
3. Other type
Q. What are the difference in Team sites and Communication site?
Ans.
1. Team Sites have an O365 group associated with them and, therefore, can be
a great resource for team collaboration (e.g., executives working on a project
together who need to be able to share notes, access documents, etc). For
this purpose, a Team Site will include a distro list, a team calendar, a Planner,
a OneNote, etc. This Team Site can be public or private and the O365 Group
associated with it will be displayed in your Outlook (under the "Groups"
section of your panel). when you create a Team Site, you can attach the site
to an MS Team to take advantage of the features offered by MS Teams.
Communication Sites, on the other hand, are a great way to create and
promote compelling information with others (e.g., we use
Communication Sites in our adoption campaigns, e.g., Office Adoption
Campaign) but, because Communication Sites do not come with an
O365 Group, you are more limited in what you can do with them (i.e.,
you cannot attach a Communcation Site to an MS Teams for instance).
2. Communication sites have no Planner, because there isn't a group.
3. Team site- most users contribute content, Communication site- typically

there are a small number of users and a large number of readers.
4. Pre-made Communication site page templates (site design) (Topic, Showcase,

Blank).
5. Communcation Sites do not have the left nav.
6. Communcation Sites have Search Box at upper right of the page.

Other Topics:
Some times changes are not reflected to the page so that run command ‘gulp clean’ and re-command
‘gulp serve’
Spfx isolated web parts.
 Site Setting is via Site Information (from setting Gear icon at upper right of the page). We can’t navigate
directly to site setting.
 Permission on Site via Share site Information (from setting Gear icon at upper right of the page).
 Some months ago, Modern Sites were at Site Collection level but recently launched that we can create
Modern site at sub site level too but only of Type “Team Site”.
Sharepoint custom theme –

https://sympmarc.com/2019/04/10/creating-and-deploying-a-custom-theme-in-sharepoint-online/
Create custom Site design:

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-design-overview
POWER APPs
Microsoft Power Apps is a service for creating business apps across platform. It allows you to
create Mobile Apps that run on Android, iOS, Windows (Modern Apps) – and with almost any
Internet browser.
With PowerApps Mobile Apps, all of the PowerApps you create run through the PowerApp
App. It takes care of the differences between the operating systems. It is essentially a
container that makes mobile apps much easier to use across mobile platforms.
It connects to a number of Databases, create apps, forms, workflows with least code, user can
use the app in mobile, tablet or PC.
Types of PowerApps:
 Canvas app (I have worked only with this).
 Model-driven app
 Portal
Power Apps Building Blocks:
1. Screen: We can understand screen as a page that renders at a time on the screen.
2. Controls:
a. Gallery:
i. Displays multiple records from a data source.
ii. Each records can be multiple types of data.
iii. Each data field appears in a separate control.
iv. Each of the control can be configured using a template.
v. Template is the first item in the gallery.
vi. Pre defined template are also available.
To move PowerApp from one environment to another, we can Export-Import the PowerApp.
We need to reestablish the connections and manually configure it for the lists.
https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/ customize-list-form

SPFX Notes

Uploaded by

Copyright:

Available Formats

SPFX Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SPFX Notes

Uploaded by

Copyright:

Available Formats

1. npm init –yes (won’t ask questions and assumes yes for all of them).

2. WebPack: Webpack is a module builder. Webpack is a tool wherein you use a

Then run webpack on the command-line to create bundle.js.

3. Yeoman: Yeoman is basically a node packge that allows us to generate project

Now install yoman templates(generator):

Install Sharepoint Generator(template) for yoman:

Create SharePoint Framework template (start questioning):

Run Webpart locally:

{In video 2 more files are there HelloWorldWebPart.module.scss.ts and

How to make web part asynchronous or in SPFX language, not reactive to

How to get the SharePoint context

How to Host WebPart to the production:

Step 2: CDN profile and endpoint.

Step 3: Configure the solution.

Step 4: Execute the gulp commands:

Step 5: Add WebPart to the site

2. Communication sites have no Planner, because there isn't a group.

3. Team site- most users contribute content, Communication site- typically

4. Pre-made Communication site page templates (site design) (Topic, Showcase,

6. Communcation Sites have Search Box at upper right of the page.

Sharepoint custom theme –

Create custom Site design:

You might also like