SharePoint Modern Client Webpart

Click here to download the Modern Pages SharePoint Page Tour Webpart.

*** The SharePoint Page Tour add-in works in conjunction with another add-in i.e. The SharePoint Page Tour Web Part, which is only available from the SharePoint Page Tour Web Site. This requires installation on your environment outside of the Microsoft Office Store processes due the level of required permissions. A tenant administrator will need to deploy this specific add-in to the tenant app catalog site manually, so that it can be installed to your environment. We have added required steps that need to be followed to install the web part add-in package (downloaded from the SharePoint Page Tour Web site). When apps are installed outside of the Microsoft Office Store, they may bypass any, and all, safety and security checks provided by Microsoft.

You may wish to establish contact with the SharePoint Page Tour Support before proceeding with installation. Also, please consider trying this add-in on a separate SharePoint Tenancy before installing it on your primary SharePoint site(s). ***

SharePoint Page Tour modern web-part Deployment and Usage Instruction

Downlaod the package from the above link and Unzip it. Package contains two files as below:

  • spfx-sppagetour-webpart.sppkg (Modern – Client Web part)
  • SharePointPagaeTour ClientWebpart Instruction Guide.pdf (Deployment Guide)

Deployment Instructions

  • We are assuming that app catalog site is already configured in your tenant. If not, kindly follow this link to configure app catalog in SharePoint.
  • Navigate to your App Catalog site and select Apps for SharePoint from left navigation.
  • Upload spfx-sppagetour-webpart.sppkg file over there. It will prompt you to trust the application. Click on Deploy button to add it into your site.
    Trust SharePointPagaeTour Modern Webpart
  • Once you click on Deploy button, spfx-sharepointpagetour-webpart is deployed in your tenant and it will be visible something like below screenshot.
    Register App with App Catalog
  • Now navigate to desired site and go to Site Contents and click on Add an app.
    Add App to Site
  • Once you click on it, it will be added to your site and ready to start tour from the modern pages.
    App added to Site

Usage of SharePoint Page Tour web part with Modern Pages

  • Navigate to respective modern page where you would like to add SharePoint Page Tour webpart and click on + sign.
    Add web part to Modern SharePoint Page
  • Click on Pencil icon to edit the web-part property
    Modern Client Webpart added to Modern Page
  • When you edit the SharePoint Page Tour Webpart, you will see below options in the property pane which appears right side of the browser.
    Client Webpart Configuration
    • Select Version: Based on app version you installed in your site, choose the respective version of the app. If your app title is like “SharePoint Page Tour – Free” then it’s free version of the app and you have to select Free in the Version dropdown otherwise select Premium.
    • Select Tour ID: Based on selection of the App Version, Tour ID will be populated into the Select Tour ID dropdown and select the Tour ID which you would like to render on the page.
    • Edit Tour in Tour Builder: Based on selection of App version, when you click on Edit Tour in Tour Builder, you’ll be redirected to Tour Builder of the Application to edit the existing tour details or create new tour.
  • Upon selection of Version, Select Tour ID will be populated with the Tour ID mentioned at the time of creation of the Tour. Select respective Tour and Save the page and then publish it.
    Version Selection
  • Once you publish page, Start Tour button will be added to top right corner of the page, as displayed in below screenshot.
    Start Tour Button on SharePoint Modern Pages
  • When you click on Start Tour button, tour will be started on the page.
    SharePoint Page Tour

Usage of SharePoint Page Tour web part with Classic Pages

  • Navigate to respective Classic Page where you would like to add SharePoint Page Tour webpart and edit the page from the gear icon.
  • Add Web Part to Classic Page.
    • Web Part Pages: If you would like to add SharePoint Page Tour web part to the Web Parts page, then go to respective page and edit it. Once you edit page, you will see the configured web part zones and already added web parts to that zones, click on Add a Web Part.
      Add a Web Part to Web Part Pages
    • Wiki/Article Pages: If you would like to add SharePoint Page Tour web part to the Wiki/Article Page, then go to respective page and edit it. After opening page in edit mode, set cursor to the place where you would like to add it. Then Click on Insert tab in the ribbon and click on Web Part.
      Add a Web Part to Wiki Pages
  • Select CIRRUSSOFT under Categories and SharePoint Page Tour under Parts and click on Add button to add Web Part to the page.
    Add a Web Part to SharePoint Page
  • Edit the SharePoint Page Tour web part and click on Configure button in Configure web part.
    Configure SharePoint Page Tour Web Part
  • Once you clicked on Configure button, it will open the property pane to configure the webpart.
    SharePoint Page Tour Web Part Configuration
    • Select Version: Based on app version you installed in your site, choose the respective version of the app. If your app title is like “SharePoint Page Tour – Free” then it’s free version of the app and you have to select Free in the Version dropdown otherwise select Premium.
    • Select Tour ID: Based on selection of the App Version, Tour ID will be populated into the Select Tour ID dropdown and select the Tour ID which you would like to render on the page.
    • Edit Tour in Tour Builder: Based on selection of App version, when you click on Edit Tour in Tour Builder, you’ll be redirected to Tour Builder of the Application to edit theexisting tour details or create new tour.
  • Upon selection of Version, Select Tour ID will be populated with the Tour ID mentioned at the time of creation of the Tour.
  • Close the configuration pane by clicking on close icon available at top right corner in the configuration pane.
  • Expand the Appearance configuration and set Chrome Type as None to hide the web part title from the web page.
  • Click on Ok button to save the web part configuration.
  • After successful configuration, Start Tour button will be visible in the secondary ribbon at top right corner.
    Start SharePoint Page Tour from Classic Page

loader