Google+ Tech Chaitu

Introduction To SharePoint Framework

SharePoint Framework is also abbreviated as SPFx. SharePoint Framework offers modern technologies, Node-based development, TypeScript etc. that are applied to SharePoint and Office 365 development.


Earlier, we used to create web-parts (rectangular boxes with defined functionality) and even business users knew what web-parts are. In SharePoint Framework, these web-parts are termed as Client web-parts. From a technology perspective, they are quite different, but from a user perspective, they are the same rectangular widgets that the users can add on their pages. In addition, we know about Add-In model and the Iframe-based integration, which we used in our daily SharePoint development.

History of SharePoint Development
  1. Farm Solutions
    The development in SharePoint started with Farm Solutions, WSPs, full trust code. This approach was very powerful and developers could literally do whatever they wanted to do on the SharePoint Farm. However, it made upgrades very difficult and it made maintaining and keeping the environment secure very difficult.
  2. Sandbox Solutions
    A box in which code cannot run outside the boundary of the box.
  3. Add-Ins (App Model)This has been introduced in SharePoint 2013 and Office 365. It is based on Iframe-based integration. This approach also has many disadvantages.
  4. Script InjectionUsing Content Editor and Script Editor web-parts. With this approach, we can almost everything on a SharePoint page; however, this is not the best-recommended approach from Microsoft.
  5. No-script capabilityA tenant wide setting which removes all content editor web-part and scripts from the page.
  6. SharePoint FrameworkIt is a custom and supported way from Microsoft, to allow to embed code inside SharePoint sites.

Apple Unveils iPhone 8, Plus, iPhone X; Facial Recognition, Wireless Charging Are Key Features

Apple unveiled three new iPhone models on Monday, including a top-of-line handset described as "the biggest leap forward" since the original iPhone 10 years ago. Apple chief executive Tim Cook announced the premium iPhone X -- pronounced 10 -- as well as a new iPhone 8 and 8 Plus. Cook, speaking at the first event at the new campus theater named for the late Apple co-founder Steve Jobs, said the latest flagship handset is a milestone for the company a decade after the first iPhone release.


"Ten years later it is only fitting that we are here in this place, on this day to reveal a product that will set the path for technology for the next decade," Cook said, calling the iPhone X "the biggest leap forward since the original iPhone." The iPhone X has an edge-to-edge screen and uses facial recognition to unlock the device, and improved "super retina" display with improved graphics and resolution. Apple senior vice president Phil Schiller said the glass-body iPhone 8 and 8 Plus handsets were the first smartphones "really created for augmented reality," with improved power and graphics over their predecessors. Apple also unveiled an updated smartwatch and an upgraded streaming video system for 4K high-definition television.

iPhoneX

iPhone X, the future of the smartphone, is a gorgeous all-glass design with a beautiful 5.8-inch Super Retina display, A11 Bionic chip, wireless charging and an improved rear camera with dual optical image stabilization. iPhone X delivers an innovative and secure new way for customers to unlock, authenticate and pay using Face ID, enabled by the new TrueDepth camera. iPhone X will be available for pre-order beginning Friday, October 27 in more than 55 countries and territories, and in stores beginning Friday, November 3.
iPhone X introduces a revolutionary design with a stunning all-screen display that precisely follows the curve of the device, clear to the elegantly rounded corners. The all-glass front and back feature the most durable glass ever in a smartphone in silver or space gray, while a highly polished, surgical-grade stainless steel band seamlessly wraps around and reinforces iPhone X. A seven-layer color process allows for precise color hues and opacity on the glass finish, and a reflective optical layer enhances the rich colors, making the design as elegant as it is durable, while maintaining water and dust resistance.
The beautiful 5.8-inch Super Retina display2 is the first OLED panel that rises to the standards of iPhone, with stunning colors, true blacks, a million-to-one contrast ratio and wide color support with the best system-wide color management in a smartphone. The HDR display supports Dolby Vision and HDR10, which together make photo and video content look even more amazing. The addition of True Tone dynamically adjusts the white balance of the display to match the surrounding light for a more natural, paper-like viewing experience.
The new 7-megapixel TrueDepth camera that enables Face ID features wide color capture, auto image stabilization and precise exposure control, and brings Portrait mode to the front camera for stunning selfies with a depth-of-field effect.
The glass back design enables a world-class wireless charging solution. Wireless charging works with the established Qi ecosystem, including two new wireless charging mats from Belkin and mophie, available from apple.com and Apple Stores.
Price
iPhone X will be available in silver and space gray in 64GB and 256GB models starting at $999 (US) from apple.com and Apple Stores and is also available through Apple Authorized Resellers and carriers (prices may vary).
iPhone 8 and iPhone 8 Plus

The new iPhone features a new glass and aluminum design in three beautiful colors made out of the most durable glass ever in a smartphone, Retina HD displays and A11 Bionic chip, and is designed for the ultimate augmented reality experience. The world’s most popular camera gets even better with single and dual cameras featuring Portrait Lighting on iPhone 8 Plus, and wireless charging brings a powerful new capability to iPhone. Both devices will be available for pre-order beginning Friday, September 15 in more than 25 countries and territories, and in stores beginning Friday, September 22.
iPhone 8 and iPhone 8 Plus introduce a beautiful glass back design made with the most durable glass ever in a smartphone in three new finishes: space gray, silver and gold. The glass finish is made using a seven-layer color process for precise hue and opacity, delivering a rich depth of color with a color-matched aerospace-grade aluminum bezel, and is water and dust resistant.
The new 4.7-inch and 5.5-inch Retina HD displays with the addition of True Tone adjust the white balance of the display to match the surrounding light for a more natural, paper-like viewing experience. The vibrant wide color gamut Retina HD display offers the best color accuracy in the industry. Redesigned stereo speakers are up to 25 percent louder and deliver deeper bass, enabling richer-sounding music, videos and speakerphone calls.
The world’s most popular camera gets even better, featuring an improved 12-megapixel camera with a larger and faster sensor, a new color filter and deeper pixels.
The glass back design enables a world-class wireless charging solution. Wireless charging works with the established Qi ecosystem, including two new wireless charging mats from Belkin and mophie, available from apple.com and Apple Stores.
Price
iPhone 8 and iPhone 8 Plus will be available in space gray, silver and an all-new gold finish in increased 64GB and 256GB capacity models starting at $699 (US) from apple.com and Apple Stores and is also available through Apple Authorized Resellers and select carriers (prices may vary).

Prerequisites To Build SharePoint Solutions With Typescript


  1. TypeScript was developed and introduced by Microsoft.
  2. TypeScript is object oriented programming language which is considered as a super set of JavaScript.
  3. TypeScript cannot be used directly on SharePoint platforms.
  4. TypeScript code has to be precompiled to JavaScript before deploying it on SharePoint.
  5. TypeScript has compiler (tsc) to compile the code from TS to JS. The compiler produces a JavaScript file from a TypeScript source file
We can install TypeScript for Visual Studio from Microsoft site (https://www.microsoft.com/en-us/download/details.aspx?id=48593). For other versions of Visual Studio, the download links are available from http://www.typescriptlang.org/index.html#download-links.

Create a new SharePoint 2016 - Empty project (or SharePoint 2013).

Fill in the site URL and select "Deploy as sandbox solution" option.

 

On Visual Studio, navigate to Tools -> NuGet Package Manager -> Manage NuGet Packages for solution. Install the TypeScript plugins. The required plugins for executing TypeScript sample on SharePoint are -

jquery.TypeScript.DefinitelyTyped
Microsoft.TypeScript.Compiler
Microsoft.TypeScript.MSBuild
sharepoint.TypeScript.DefinitelyTyped 
microsoft-ajax.TypeScript.DefinitelyTyped

The above plugin also installs the TypeScript build/compiler components.
 
Edit the project file (Required if the compiler/build plugins are not available for Visual Studio)
From the solution explorer, right click the project and select "Unload Project" option
Again right click on the project and select edit project.
Paste the below code on the project file within the project tag. Save the project file.

 <PropertyGroup>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
  </PropertyGroup>
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />



*From Solution explorer, right click the project and select reload project option. If the dialog box appears, close it and proceed loading the project.

*From Solution Explorer, right click the project and select properties option. TypeScript build option will appear on the properties.


Benefits Of SharePoint 2016 From A End User Perspective

The new changes introduced in SharePoint 2016.

List/Library Improvements 

Durable Links
This is a feature introduced in SharePoint 2016 for document library. It allows users to rename or move their documents to new locations without breaking the links referring to the document. It also helps in the SEO improvement and search based indexing to let the documents to be functional.

Internally, SharePoint maintains the same DocID assigned to the document, even if it is renamed or moved to a different location. We need to activate the “Document ID Service” feature from the Site Collection features page. Henceforth, with the introduction of Durable links in SharePoint 2016, users do not have to worry about the broken or dead links while renaming or moving a document from one document library to another.


File Names
With the release of SharePoint 2016, Microsoft has introduced two of the good features for documents in a document library:-

Special Characters
In SharePoint 2013, there was a restriction on file names in a document library while creating or uploading the files. The restriction was – “A file name cannot contain any of the following characters: \ / : * ? < > | # {} % ~ &”. In SharePoint 2016, this restriction has been removed and now users can upload files having special characters like ~, &, %, {} etc.

Filename Length
In SharePoint 2013, there was a limit of 128 characters while uploading a file or while creating a folder in a document library (SharePoint 2013 used to give error – “Sorry something went wrong”, if we create files longer than 128 characters). In SharePoint 2016, users can create or upload files that are longer than 128 characters.
Usability Ease (Shortcuts)

Keyboard shortcuts are included in document library, for the following tasks:-
Alt + N – New
Alt + E – Edit
Alt + U – Upload
Alt + S – Share
Alt + Y – Synchronization

Large File Handling

The addition of large file limit was introduced in SharePoint 2013, however that was only 2 GB. In SharePoint 2016, users can now upload large files, as it has been increased from the 2 GB maximum file limit to 10 GB maximum file size. In addition, the threshold limit of list and libraries have been increased.

Hybrid Sites

Users can now follow sites on both SharePoint Online and SharePoint On-Premise and these followed sites can be displayed in single unified list.

Hybrid One Drive for Business


Users can now sync their files with Office 365. This gives an advantage to the users to access files (documents, images etc.) directly from Office 365 and on any device.

User Profile 


Users can now have a single profile in Office 365 where all their profile information will be stored and users can use that profile information for both SharePoint Online and SharePoint On-Premise environments.

Hybrid Search

The Hybrid Search concept was introduced in SharePoint 2013 which allows searching across both SharePoint Online and SharePoint On-Premise environments through a single interface. However, in SharePoint 2013 Hybrid Search, there was an issue  that search results from the SharePoint Online and SharePoint On-Premise environments used to appear as separate and not integrated. This caused the users a problem to determine which result is more relevant etc.

The above issue got resolved in SharePoint 2016.


SharePoint 2016 now provides a unified search experience for hybrid cloud search. Essentially, the way this works is that the Office 365 search functionality will consume the SharePoint On-Premise search index so that it can provide integrated results from both sources for the same query and users will now get the most relevant results from the two environments.

Zero Downtime Patching

As we know, applying patches on a regular basis is an important part of SharePoint environment from a maintenance standpoint. Earlier, installing patches was a time-consuming process because it needed the installation of large cumulative update files (in GB’s). Applying all the patches would result in the downtime of the environment for some time, which ultimately created the problem for end users.

SharePoint 2016 introduced the concept of Zero Downtime Patching where patches are in the form of small packages (in MB’s) and all these patches are having very less or no dependencies on one another. So, now the patches contains more targeted changes, so the SharePoint Administrator has choice about which patches to install and which patches to skip, so that users do not face any downtime of the application.


Additionally, there is a concept introduced called Automatic Patching, which means that SharePoint 2016 Server receives automatic patch updates that allows less downtime for organizations.

Create Custom Sharepoint List Using SharePoint Framework Development Model

Create a new SharePoint Framework project
  1. Open any Windows Powershell/command  tool. I prefer to use Powershell.
  2. Navigate to a folder or create a new folder ex: FrameWorkList.
  3. Run the Yeoman Generator to create SharePoint Framework solution package.
yo @microsoft/sharepoint
Fill the details required for creating a new SharePoint solution and choose Enter.


This will display the prompt, which we must fill up, to proceed with the project creation.

What is your solution name? : framework-list
On pressing enter, we will be asked to chose the working folder for the project.

Where do you want to place your files- Use current folder.
What framework would you like to start with- Select “No javaScript web framework” for the time being, as this is a sample Web part.
What is your Webpart name- CustomSPFxList
What is your Webpart description- We will specify it as ‘This is my Custom List’.


Yeoman has started working on the scaffolding of the project. It will install the required dependencies and scaffold the solution files for the CustomSPFxList webpart which will take some time to complete. Once completed, we will get a successful message.

In the console, go to the \src\webparts\customSpFxList directory.

Enter the following command to open the web part project in Visual Studio Code (or use your favorite editor): CODE

Create folder named ‘CustomSPList’ by clicking on the New Folder Icon on left side. Within the CustomSPList folder lets add another sub folder named Assets. In the Assets folder create xml file name it as elements.xml which hold the information to provision the SP List.


Under CustomSPList/assets folder, add or modify the list instance definition file (elements.xml) with the necessary basic information like 
  • Title.
  • FeatureId (Base feature ID of the generic list or any other list).
  • Description.
  • Template type (Base template type ID of generic list or any other list).
  • URL.
  • Schema File URL.
Add the below list information to the elements.xml file which contains the list name and type. The feature Id ‘00bfea71-de22-43b2-a848-c05709900100’ refers to custom list.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<ListInstance
CustomSchema="schema.xml"
FeatureId="00bfea71-de22-43b2-a848-c05709900100"
Title="CustomSPFxList"
Description="This is SharePoint Custom List"
TemplateType="100"
Url="Lists/CustomSPFxList">
</ListInstance>
</Elements>

Package and Deploy the Solution
Now let’s create the deployment package by running gulp package-solution --ship command.





This will create the .sppkg package in the solutions folder as shown below.
 Copy the sppkg file url by opening it in File Explorer and upload this package to the App Catalog.

 

Browse to your App Catalog site and upload the package.



After upload, it will ask if we trust the package. Click on Deploy to add the solution.

 If we refresh the App Catalog page we can see the uploaded solution.

  we can see the newly uploaded solution in the site contents.
Click on it to add the solution to the site.


It will add the solution to the site contents. At the same time, it will provision custom list with the name ‘CustomSPFxList’. We can see it from the Site contents as shown below.


Create WebPart using SharePoint Framework and test it in SharePoint online Workbench

Check this link to setup the SharePoint Framework environment
http://techchaitu.blogspot.com/2017/09/what-is-sharepoint-framework-development.html

SharePoint Framework 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. 
Create a new SharePoint Framework project
  1. Open any Windows Powershell/command  tool. I prefer to use Powershell.
  2. Navigate to a folder or create a new folder.
  3. Run the Yeoman Generator to create SharePoint Framework solution package.
yo @microsoft/sharepoint
  1. Fill the details required for creating a new SharePoint solution and choose Enter


    Yeoman has started working on the scaffolding of the project. It will install the required dependencies and scaffold the solution files for the Twinkle-webpart which will take some time to complete. Once completed, we will get a Congratulations message.



    Preview the web part

    To preview the web part, build and run it on a local web server our browser will report a certificate error . The client-side toolchain uses HTTPS endpoint by default. However, since a default certificate is not configured for the local dev environment. The SPFx toolchain comes with a developer certificate that you can install for building web parts.

    To install the developer certificate for use with SPFx development, switch to your console, make sure you are still in the Twinkle-webpart directory and enter the following command:

    gulp trust-dev-cert


    we have installed the developer certificate.

    SharePoint Workbench


    SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. Using local workbench application can be tested in many ways. We can also launch the workbench.aspx file from the SharePoint site to test the application in SharePoint Framework.


    Example URL : https://xxxxxxxxx.sharepoint.com/sites/dev/_layouts/15/workbench.aspx


    After Success message, we can run “gulp serve” this command will execute a series of gulp tasks and will create a Node-based HTTPS server at 'localhost:4321'. It will then open the browser and display the client web part.











    Thus the SharePoint Workbench has opened up in the browser but there are no visible web parts. So let’s go ahead and click on the Plus + sign. The + button opens the toolbox where you can see a list of web parts available for you to add. The list will include the Twinkle web part that we have created recently.


    Choose Twinkle webpart to add the web part to the page:


    Click on the pencil icon to reveal the webpart properties and we can edit the description property as shown below.



    However if we want to edit this web part to add more details and functionality, we will have to go back and terminate the gulp server command. To stop Gulp from listening to the process we can press ‘Control + C’ . This will terminate the Gulp Serve command and stop the server.




    In the console, go to the src\webparts\twinkle directory.

    Enter the following command to open the web part project in Visual Studio Code (or use your favorite editor): CODE


    In the left pane of Visual Studio Code, we can see the project structure. Most of the logic resides within the TwinkleWebPart.ts file. Let’s add JavaScript code to alert a message within this typescript file.


    After adding the script, save all the files, on save Gulp will rebuild the web part project.Again running ‘gulp serve’ this time it will display the updated web part in the browser with alert message as well.


    Preview the web part in SharePoint

    upto now we have tested the webpart in SharePoint Workbench locally, let’s try to test it within the SharePoint online. SharePoint Workbench is also hosted in SharePoint to preview and test your local web parts in development. It can be accessed by adding ‘ _layouts/15/workbench.aspx’ to the SharePoint Online URL. The key advantage is that now you are running in SharePoint context and that you will be able to interact with SharePoint data.

    Go to the following URL: 'https://your-sharepoint-site/_layouts/workbench.aspx'


    Expand the + sign and add the TWINKLE web part.


    Web Part added to the page successfully with alert message.



    Finally , we have created client web part using SharePoint Framework and tested it within SharePoint online workbench.

    Create WebPart using SharePoint Framework and test it in local Workbench

    Check this link to setup the SharePoint Framework environment
    http://techchaitu.blogspot.com/2017/09/what-is-sharepoint-framework-development.html

    SharePoint Framework 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. 
    Create a new SharePoint Framework project
    1. Open any Windows Powershell/command  tool. I prefer to use Powershell.
    2. Navigate to a folder or create a new folder.
    3. Run the Yeoman Generator to create SharePoint Framework solution package.
    yo @microsoft/sharepoint
    1. Fill the details required for creating a new SharePoint solution and choose Enter


      Yeoman has started working on the scaffolding of the project. It will install the required dependencies and scaffold the solution files for the Twinkle-webpart which will take some time to complete. Once completed, we will get a Congratulations message.



      Preview the web part

      To preview the web part, build and run it on a local web server our browser will report a certificate error . The client-side toolchain uses HTTPS endpoint by default. However, since a default certificate is not configured for the local dev environment. The SPFx toolchain comes with a developer certificate that you can install for building web parts.

      To install the developer certificate for use with SPFx development, switch to your console, make sure you are still in the Twinkle-webpart directory and enter the following command:

      gulp trust-dev-cert


      we have installed the developer certificate.

      SharePoint Workbench


      SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. Using local workbench application can be tested in many ways. We can also launch the workbench.aspx file from the SharePoint site to test the application in SharePoint Framework.


      Example URL : https://xxxxxxxxx.sharepoint.com/sites/dev/_layouts/15/workbench.aspx


      After Success message, we can run “gulp serve” this command will execute a series of gulp tasks and will create a Node-based HTTPS server at 'localhost:4321'. It will then open the browser and display the client web part.











      Thus the SharePoint Workbench has opened up in the browser but there are no visible web parts. So let’s go ahead and click on the Plus + sign. The + button opens the toolbox where you can see a list of web parts available for you to add. The list will include the Twinkle web part that we have created recently.



      Choose Twinkle webpart to add the web part to the page:


      Click on the pencil icon to reveal the webpart properties and we can edit the description property as shown below.



      However if we want to edit this web part to add more details and functionality, we will have to go back and terminate the gulp server command. To stop Gulp from listening to the process we can press ‘Control + C’ . This will terminate the Gulp Serve command and stop the server.




      In the console, go to the src\webparts\twinkle directory.

      Enter the following command to open the web part project in Visual Studio Code (or use your favorite editor): CODE


      In the left pane of Visual Studio Code, we can see the project structure. Most of the logic resides within the TwinkleWebPart.ts file. Let’s add JavaScript code to alert a message within this typescript file.


      After adding the script, save all the files, on save Gulp will rebuild the web part project.Again running ‘gulp serve’ this time it will display the updated web part in the browser with alert message as well.


      Finally , we have created client web part using SharePoint Framework and tested it within local SharePoint workbench.