Get to know Microsoft 365:

Vignesh's SharePoint Thoughts

e1.pngYep you read it correctly, it’s not Microsoft Office 365 and its Microsoft 365. Well by saying so I didn’t mean that Microsoft Office 365 is going away or it’s getting renamed as Microsoft 365. This is a new service which was introduced by Satya Nadella 2 days back on Microsoft Inspire which brings together Office 365, Windows 10 and Enterprise Mobility + Security, delivering a complete, intelligent and secure solution to empower employees. I’m sure most of you would have already read about this today and if not please take a moment in reading this article where I’ve explained in detail about Microsoft 365 and what are the services it delivers and how it can enhance your business.

  1. What is Microsoft 365?

Well as I already mentioned above this is a new service which was introduced by Microsoft two days back which brings together Office 365, Windows 10 and…

View original post 398 more words

Quick steps to build your SharePoint Framework SPFx Webpart

While working on the SharePoint Framework SPFx webpart, use below quick steps,

Steps I : SharePoint Web parts environment setup

  • Install NodeJS version compatible with your system
  • Run NodeJS or PowerShell command to check the npm version

Command: npm -v

  • Install Visual Studio Code
  • Install yo gulp

Command: npm install -g yo gulp

  • Install global Microsoft SharePoint generators – this will download the tooling, templates and needed dependencies for the machine

Command: npm install -g @microsoft/generator-sharepoint

Steps II : Create a sample Web Part

  • Create a folder for your project (say spfx)
  • Make that folder current folder for PS

Command: cd ~\spfx

  • Create a helloworld-webpart folder within that project folder

Command: md helloworld-webpart

  • Start using the helloworld-webpart folder for PS scripting

Command: cd helloworld-webpart

  • Run Command: yo @microsoft/sharepoint to enter the wizard and follow the scaffolding process to create a new web part project
  • Enter the values for the questions in the new project creation wizard
  • Select the JS framework as required
  • Install the developer certificate to the machine

Command: gulp trust-dev-cert

  • Run the default web part created

Command: gulp Serve

  • Test the web part on local SharePoint workbench
  • Press Ctrl+C and then press Y to terminate the execution
  • Run this command to create a deployment package

Command: gulp package-solution

Steps III: How to host the webpart on Azure CDN?

Below are the steps to follow for host the webpart on Azure CDN,

  • Create a resource group
  • Create a storage account in association with the resource group
  • Create a container in the storage account
  • Upload the files from deploy folder in your project to the container
  • Create a CDN Profile
  • Create CDN Endpoint
  • Update the deploy-azure-storage.json file with key values as per the above created objects

Steps IV : Deploy the webpart to the SharePoint Online,

  • Build to the ship mode, build minified assets ready to be deployed

Command: gulp –ship

  • Deploy the minified files to the azure storage

Command: gulp deploy-azure-storage

  • Update the cdnBasePath in the config folder write-manifests.json file with the values in the format of {EndPoint}/{Container} created in below steps of Repackaging the solution
  • Repackage the assets

Command: gulp bundle –ship

  • Repackage the solution

Command: gulp package-solution –ship

  • Go to the sharePoint folder and the .sppkg file created
  • Go to Apps for SharePoint link in the app catalog site of your SharePoint site and upload the .sppkg file
  • Go to SiteContents of your SharePoint app catalog site and add your app there
  • Add the new web part to your SharePoint page

SharePoint Framework – SPFx – New revolution to Client Side Webpart development to SharePoint Online O365 – Interview Questions

What is SharePoint Framework – SPFx?

The SharePoint Framework (SPFx) is a page and part model that enables client-side development for building SharePoint experiences. It facilitates easy integration with the SharePoint data, and provides support for open source tooling development.

Overview of SharePoint Framework

The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready from day one. The SharePoint Framework works for SharePoint on-premises and SharePoint Online.

What is SharePoint client-side web parts?

SharePoint client-side web parts are controls that appear inside a SharePoint page but run locally in the browser. They’re the building blocks of pages that appear on a SharePoint site. You can build client-side web parts using modern script development tools and the SharePoint workbench (a development test surface), and you can deploy your client-side web parts to classic web part pages in Office 365 Developer tenants. In addition to plain JavaScript projects, you can build web parts alongside common scripting frameworks, such as AngularJS and React. For example, you can use React along with components from Office UI Fabric React to quickly create experiences based on the same components used in Office 365.

What are key feature of SharePoint Framework?

  • Runs in the context of the current user and connection in the browser. There are no iFrames.
  • The controls are rendered in the normal page DOM.
  • The controls are responsive and accessible by nature.
  • Enables the developer to access the lifecycle – including, in addition to render – load, serialize and deserialize, configuration changes, and more.
  • It’s framework agnostic. You can use any browser framework that you like: React, Handlebars, Knockout, Angular, and more.
  • The toolchain is based on common open source client development tools like npm, TypeScript, Yeoman, webpack, and gulp.
  • Performance is reliable.
  • End users can use SPFx client-side solutions that are approved by the tenant administrators (or their delegates) on all sites, including self-service team, group, or personal sites.
  • Solutions can be deployed in both classic web part and publishing pages and modern pages.

Why to use SharePoint Framework- SPFx?

SharePoint was launched as an on-premises product in 2001. Over time, a large developer community has extended and shaped it in many ways. For the most part, the developer community followed the same patterns and practices that the SharePoint product development team used, including web parts, SharePoint feature XML, and more. Many features were written in C#, compiled to DLLs, and deployed to the servers.

That solution worked well in environments with only one enterprise, but it didn’t scale to the cloud, where multiple tenants run side-by-side. As a result, we introduced two alternative models: client-side JavaScript injection, and SharePoint Add-ins. Both of these solutions have pros and cons.

How to Set up your SharePoint client-side web part development environment?

Step I: Environment Setup for Node.js web apps for Azure App Service

Step II: SharePoint related configurations

How Build a SharePoint Framework Webpart?

Steps by Step procedure to build your first SharePoint client-side web part (Hello World part 1)

PowerShell and CSOM: Tool to Import Design Package WSP with activation of required feature for SharePoint Online-O365

Introduction

This is my initial article to address the challenges around automation of SharePoint Online deployment.
Below artifacts can be developed through this technique,

  • List Definition
  • List Instance
  • Web part development
  • Template Development
  • JS Link webpart development
  • Remote Timer Job
  • Remote Event Handler
  • etc.
You can combine any set of above artifacts in to a WSP solution.

Tool Description

This tool is responsible for activating the mandatory features for any site other than Publishing and Installing or Upgrading the WSP Solution to SPO O365 tenant site collection.

Below are the features activated using this tool,

1. SharePoint Server Publishing Infrastructure

2. SharePoint Server Publishing

You can also extend the logic for activation of other feature by calling below,

PowerShell
Enable-SPOFeature -sSiteColUrl $SiteURL -spoCtx $Context -sFeatureGuid $FeatureGuidServerPublishing -IsSiteScope $False
Use below parameters while calling method,
$SiteURL – site collection URL
$Context – Context of the site
$sFeatureGuid – Guid of feature to be activated
$True or $False – is site collection level feature

 

Download Source

Click here to download Source

Authentication and Execution Model

Authentication and Execution Model
As depicted in above model diagram shows how PowerShell based tool help to authenticate, connect to SPO and on validation it helps to execute the CSOM based commandlets and deploy the WSP to perform deployment of different artifacts as packaged. Below are major component as depicted in diagram,
A. SharePoint Online Mangement Shell
B. Authentication component – while connecting to SharePoint Online tenant
C. Validated Admin enable to process the execution to SPO
D.SharePoint Tenant – Site Collection  Targeted destination for deployment

Run Execution Command

Below is the command will be helpful to execute the tool. Kindly modify the parameters before execution,

PowerShell
.\ApplyDesignPackageInstalltionAndUpgradeWSP.ps1 -User admin@xxxxxx.onmicrosoft.com -SiteURL "https://xxxxxx.sharepoint.com/sites/xxxxxx" -wspFullFilePath "C:\Amjad\<WSPBuildName>.wsp"  -WspFileName "<WSPBuildName>.wsp" -wspPackageName "<WSPBuildName>" -majorVersion 1 -minorVersion 0
 Parameters details are as below,

Script can accept 7 parameters from the command line#

# User – mandatory – Administrator login ID for the tenant we are querying

# SiteURL – mandatory – Destination Site URL for the tenant we are querying

# wspFullFilePath – mandatory – Path of WSP location to upload from

# WspFileName – mandatory – Name of WSP file

# wspPackageName – Optional – WSP Package Name for Solution Gallery

# majorVersion – Optional – majorVersion of the Build demployment or upgrade

# majorVersion – Optional – minorVersion of the Build demployment or upgrade#

 

Hope this article helps.

PowerShell and CSOM:Tool to Import Design Package WSP for SharePoint Online O365

Introduction

O365- SharePoint Online : This tool is responsible for activating the madatory features for any site other than Publishing and Installing or Upgrading the WSP Solution.

Below are the features,

1. SharePoint Server Publishing Infrastructure

2. SharePoint Server Publishing

Download Source

Click here to download Source

You can also extend the logic for activation of other feature by calling below,

PowerShell
Enable-SPOFeature -sSiteColUrl $SiteURL -spoCtx $Context -sFeatureGuid $FeatureGuidServerPublishing -IsSiteScope $False
 Use below parameters while calling method,
$SiteURL – site collection URL
$Context – Context of the site
$sFeatureGuid – Guid of feature to be activated
$True or $False – is site collection level feature

Run Execution Command

Below is the command will be helpful to execute the tool. Kindly modify the parameters before execution,

PowerShell
.\ApplyDesignPackageInstalltionAndUpgradeWSP.ps1 -User admin@xxxxxx.onmicrosoft.com -SiteURL "https://xxxxxx.sharepoint.com/sites/xxxxxx" -wspFullFilePath "C:\Amjad\<WSPBuildName>.wsp"  -WspFileName "<WSPBuildName>.wsp" -wspPackageName "<WSPBuildName>" -majorVersion 1 -minorVersion 0

Parameters details are as below,

Script can accept 7 parameters from the command line#

# User – mandatory – Administrator login ID for the tenant we are querying

# SiteURL – mandatory – Destination Site URL for the tenant we are querying

# wspFullFilePath – mandatory – Path of WSP location to upload from

# WspFileName – mandatory – Name of WSP file

# wspPackageName – Optional – WSP Package Name for Solution Gallery

# majorVersion – Optional – majorVersion of the Build demployment or upgrade

# majorVersion – Optional – minorVersion of the Build demployment or upgrade#

Environment Setup for Node.js web apps for Azure App Service

The instructions in this tutorial can be followed on any operating system that can run Node.js.

Below is the list of installation required

  • Node.js – Click here to install setup
    • Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.

  • Bower – Click here to install setup
    • Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else – it just installs the right versions of the packages you need and their dependencies.

  • Yeoman – Click here to install setup
    • Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.

      To do so, Yeoman provides a generator ecosystem. A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts.

  • Git – Click here to install setup
    • The Git is a Source Code Management (SCM).The Git feature that really makes it stand apart from nearly every other SCM out there is its branching model.

      Git allows and encourages you to have multiple local branches that can be entirely independent of each other. The creation, merging, and deletion of those lines of development takes seconds.

  • Azure CLI 2.0 Preview – Click here to install setup
    • Microsoft has improved and update Azure CLI to provide a great native command-line experience for managing Azure resources.
  • A Microsoft Azure account. If you don’t have an account, you can sign up for a free trial or activate your Visual Studio subscriber benefits.
  • Also we need to install
    • Install Azure SDK for Node.js: Use and manage your Azure resources with Node.js

      Get the SDK from npm:
      Use below command
      npm install azure

      &amp;amp;amp;amp;lt;a href=”https://www.olark.com/site/8335-828-10-8454/contact&#8221; title=”Contact us” target=”_blank”&amp;amp;amp;amp;gt;Questions? Feedback?&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt; powered by &amp;amp;amp;amp;lt;a href=”http://www.olark.com?welcome&#8221; title=”Olark live chat software”&amp;amp;amp;amp;gt;Olark live chat software&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;