Installation of the SPFx Theme Package (client-side solution) for SharePoint Online (O365)

Note*
In order to perform this step you need to be an administrator of your O365 Tenant.

1. Sign in to Office 365 as a tenant admin and verify that the App Catalog exist in your tenant. If not, create an App Catalog by following the steps 2 - 4 below.

   The default path to the App Catalog:
   https://tenant.sharepoint.com/sites/appcatalog/_layouts/15/tenantAppCatalog.aspx/manageApps

2. From the app launcher menu (in the upper-left corner), select Admin to open the Office 365 admin center.

   

3. In the left pane, select Admin centers > SharePoint



4. In the SharePoint Admin Center select More Features in the left pane, and select Apps from the right pane. This procedure will create an App Catoalog if it has not already been created.

Note*
In order to perform this step you need to be an administrator of your O365 Tenant.

To make solutions available for installation in your tenant:

1. Navigate to the Manage Apps page and select Upload.
   

   The default path to the Manage Apps page:
   https://tenant.sharepoint.com/sites/appcatalog/_layouts/15/tenantAppCatalog.aspx/manageApps



2. Browse to the extracted YourPackage.zip > SPFx_Solutions > O365 folder.

3. Upload the MT-ModernTheme-01.sppkg and MT-ModernTheme-02.sppkg files.

4. When prompted, choose one the options under the App availability and enable the MT-ModernTheme-01.sppkg and MT-ModernTheme-02.sppkg client-side solutions.

   
5. Choose the MT-Modern0Theme-01 app, then select the three-dot icon to open the Properties Dialog menu.


6. In the Properties Dialog menu enter:

   For Short Description enter:
   "Modern Duotones" SPFx theming solution for SharePoint modern sites.

   For Description enter
   "Modern Duotones" SPFx theming solution for SharePoint modern sites from MasterThemes Inc.

   For Icon URL you use:
   https://sharepointpackages.com/images/images-MT_WP/app_icons/MT-App_Icon1.png

   
   Note:
   The app icon image shown above is enclosed in your theme package > App_Icon folder. You can upload it to your preferred location and reference the URL to the icon in the icon URL field accordingly.

   For Publisher enter:
   MasterThemes Inc.

Now change properties for the MT-ModernTheme-02 app:

7. Choose the MT-Modern0Theme-02 app, then select the three-dot icon to open the Properties Dialog menu.

8. In the Properties Dialog menu enter:

   For Short Description enter:
   "Modern Monotoness" SPFx theming solution for SharePoint modern sites.

   For Description enter
   "Modern Monotones" SPFx theming solution for SharePoint modern sites from MasterThemes Inc.

   For Icon URL you use:
   https://sharepointpackages.com/images/images-MT_WP/app_icons/MT-App_Icon2.png

   
   Note:
   The app icon image shown above is enclosed in your theme package > App_Icon folder. You can upload it to your preferred location and reference the URL to the icon in the icon URL field accordingly.

   For Publisher enter:
   MasterThemes Inc.

Note*
In order to perform this step you need to be an administrator of your O365 Tenant.

Important Note*

---

To deploy the SharePoint Starter Kit to the tenant App Catalog:

1. Download the sharepoint-starter-kit.sppkg file to your Downloads folder:
   https://sharepointpackages.com/sp-starter-kit/sharepoint-starter-kit.sppkg
   
   You may also download it from the sp-starter-kit GitHub repository:
   (https://github.com/SharePoint/sp-starter-kit/tree/master/package)
   

2. Navigate to the Manage Apps page and select Upload.

   The default path to the Manage Apps page:
   https://tenant.sharepoint.com/sites/appcatalog/_layouts/15/tenantAppCatalog.aspx/manageApps



3. Browse to the Downloads folder and upload the sharepoint-starter-kit.sppkg file.

4. When prompted, choose one the options under the App availability and enable the sharepoint-starter-kit.sppkg client-side solutions by selecting Enable app.



5. Select Go To API access page to approve the API permissions:



6. Approve the Microsoft Graph permission requests by selecting each permission request and clicking Approve.



7. The pending permissions should now be approved.


8. Request a custom API key to Alpha Vantage o use the StockInformation Web Part.

StockInformation Web Part:


Note:

To use the StockInformation Web Part, you need to request a custom API key to Alpha Vantage, which is the provider for live stocks data.

The StockInformation Web Part uses the live stocks service provided by Alpha Advantage. To use it you need a software key, that you can ask for free to the API provider. You will simply need to go to the page to Claim your API Key, fill in the form, and store the generated key in a safe place.

The key should be configured at tenant level, by creating a storage entity using the following PowerShell script:

Set-PnPStorageEntity -Key "PnP-Portal-AlphaVantage-API-Key" -Value "your-api-key" -Comment "API Key for Alpha Advantage REST Stock service" -Description "API Key for Alpha Advantage REST Stock service"

---

To configure your API Key:

Make sure that you have the latest version of the SharePoint Online Management Shell available on the Microsoft Download site.

1. Run the SharePoint Online Management Shell as Administrator (right-click on the icon).

   

2. Install the PnP PowerShell for SharePoint Online running the following cmdlet:

   Install-Module SharePointPnPPowerShellOnline

   Confirm that you want to install the modules from 'PSGallery' by typing Y and pressing enter:

   

3. Connect to SharePoint Online tenant using thfollowing cmdlet:

Connect-PnPOnline -Url  https://tenant-admin.sharepoint.com -credential $credential

When the Sign in window pops up, use your admin credentials to log in:

e.g.
administrator@tenant.onmicrosoft.com

4. Configure your API Key by running the following cmdlet:

   Set-PnPStorageEntity -Key "PnP-Portal-AlphaVantage-API-Key" -Value "your-api-key" -Comment "API Key for Alpha Advantage REST Stock service" -Description "API Key for Alpha Advantage REST Stock service"

Note*
This section is for the Supreme Bundle only

---

To deploy additional Web Parts to the tenant App Catalog:

1. Navigate to the Manage Apps page and select Upload.

   The default path to the Manage Apps page:
   https://tenant.sharepoint.com/sites/appcatalog/_layouts/15/tenantAppCatalog.aspx/manageApps



2. Browse to the extracted YourPackage.zip > Web_Parts > O365 folder, and upload the modern-charts.sppkg, pnp-script-editor.sppkg, staff-directory.sppkg, react-calendar.sppkg, and video-banner.sppkg files one by one.

3. When prompted, choose one of the options under the App availability and enable the uploaded sppkg client-side solution.



4. If prompted, select Go To API access page to approve the API permissions.



5. Approve the Microsoft Graph permission requests by selecting each permission request and clicking Approve.

Important Note*

Note*
In order to perform this step you need to be an administrator of your O365 Tenant.

1. In the SharePoint Admin Center select Sites > Active Sites in the left pane, and then select Create (Create a site) from the right pane.


2. On the CreateSite dialog box select Other Options.

3. Under Other Options select More templates from the Choose a template drop-down list.

4. In the Create Site Collection dialog box for Title enter:
   MasterThemes Assets
   
   

   For Web Site Address leave /sites/ unchanged, and enter exactly:
   masterthemes-assets

Important Note*
The web site address of the MasterThemes Assets site collection must be https://[ tenant.sharepoint.com ]/sites/masterthemes-assets. If it is different, the collapsible footer and some other components provided with the package will be either missing or will not work correctly.



5. On the Site Collections page, open the newly created MasterThemes Assets site. The Template Selection page will open.



6. On the Template Selection page, navigate to Solution Gallery



7. In the Solutions Gallery, select Upload Solution > navigate to the extracted YourPackage.zip > MasterThemes_Assets > O365 folder, and upload the MasterThemes_Assets.wsp file.

   Make sure the uploaded solution is activated.

   

8. Navigate back to the Template Selection page for the MasterThemes Assets site by removing /_catalogs/solutions/Forms/AllItems.aspx from your browser's address bar and hitting enter.
   
   Location of the MasterThemes Assets site:
   https:// [ tenant.sharepoint.com ] /sites/masterthemes-assets

9. On the Template Selection page under Custom tab, select the MasterThemes Assets template and click OK.

   

10. Under People and Groups > Set Up groups for this Site, create a group of members (Members of this Site) who will have rights to contribute content of the collapsible footer to SharePoint sites with applied Modern Duotones SPFx theming solution. Members with these rights can also be added to the MasterThemes Assets site at a later time.

    

1. In your browser navigate to the site collection you want to install the SPFx Modern Theme app.

2. Open the settings menu by clicking the gears icon on the top navigation bar, and then select Add an app to go to your Apps page.

3. In the Search box, enter MT-Modern-Theme and press Enter to filter your apps.



As a result, 2 apps should match your search: MT-Modern-Theme-01 (Modern Duotones), and MT-Modern-Theme-02 (Modern Monotones).

4. Add ether the Modern Theme 01 (Modern Duotones) or MT-Modern-Theme-02 (Modern Monotones) to install the solution for your site.

   Important Note*
   Do not add both solutions one a single site. Install either the Modern Theme 01 (Modern Duotones) or MT-Modern-Theme-02 (Modern Monotones) per site.

5. To check if either solution is installed on your site, wait a while and refresh your page (F5).

6. In the Search box, enter modern-charts and press Enter to filter your apps.

7. Add the modern-charts-client-side-solution to install the Modern Charts SPFx web part.