Skip to content

Installation process

Olivier Carpentier edited this page Mar 8, 2017 · 26 revisions

Installing the SPFx Fantastic 40 WebParts

Note: The SharePoint Framework is now in GA (v1.0.0.0)! This means that you can now deploy and use these web parts in production environments. Have fun!

Pre-requisites

To install these WebParts, you need:

  • An Office 365 Tenant
  • A SharePoint administrator account
  • Be sure that the following address are opened in your proxy (if applicable): spfx40fantastics.azureedge.net and cdn.ckeditor.com

1. Download the WebParts package

Download the latest version of the SharePoint App (*.sppkg file) from the releases page: https://github.com/OlivierCC/spfx-40-fantastics/releases

2. Deploy the App in the SharePoint Apps Catalog

Go to the SharePoint admin page. Go to the apps section and click on the Apps Catalog (if the Apps Catalog do not exist, create it).

In the Apps Catalog, go to the Apps for SharePoint section. Drag & Drop the downloaded spfx-40-fantastics.sppkg file in the Apps list. Wait during the deployment and verify that the package is correctly installed.

3. Add the App in a SharePoint site (classic or modern)

Go to the SharePoint site where you want to use the SPFx 40 Fantastics WebParts. Go to the Site Contents page. Click on the add an app button.

Search the SPFx 40 fantastics, and click on the SPFx 40 Fantastics WebPart:

Wait during the installation process (few minutes), and check that the App is correctly installed.

Congrats, the SPFx 40 Fantastics are correctly installed, and you can now use it in your pages.

4 How to use the WebParts in classical pages

You can use the SPFx 40 Fantastics in a classical SharePoint site, or a modern site. The following chapter explains how to use the Web Part in a classical SharePoint page.

Go to an existing page, or create a new one. Edit the page, and click on add WebPart button in the ribbon.

The WebParts are available in different groups, as "Maps, Charts" or "News Management", etc. Go to the group that you want, click on the WebPart that you want to use and click on OK button.

The WebPart is now insert in your page. To edit the properties, you can click on the top right menu, and click on the Edit button.

In the old school WebPart properties pane, click on the Configure button.

The new WebPart properties pane is now available, and you can edit the properties:

4 (BIS) How to use the WebParts in modern pages

The modern team sites and modern pages are very cool. You can use more easily the new client side web parts. To use the SPFx 40 Fantastics, use the following process.

Create or go to a modern page. Edit the page. Identify the "+" button and click on it to discover the client side web parts.

You can click on the top left button (with a pen icon) to edit the web part properties.

The modern property pane appears and you can customize the web part. You do not need to save the properties, everything is automatically saved and you can preview in real time the modifications.

Have fun with the SPFx 40 Fantastics.