The SunSmart Web Part is client-side web part built for SharePoint Online using the SharePoint Framework (SPFx) that displays UV weather information for capital cities in Australia. It is totally free, just download the solution package from this page, upload it to your app catalog, install it on a web site and add a web part instance to a page.
This page will guide you through the steps to:
- Download and add the solution package to your tenancy
- Add the app to a web site
- Add a web part instance to a page
- Apply various configuration settings.
Download and add to the App Catalog
You can download the solution package file, named SunSmart.sppkg, from here.
Then log on as administrator to you O368 SharePoint tenancy and access your App Catalog site. Note that an App Catalog site is not automatically provisioned but you need to have one to be able to add any custom solutions to your tenancy.
From your App Catalog site click on the Apps for SharePoint link and upload or drag and drop the solution package file into the Catalog.
Once the package has completed uploading, the Do you trust… dialog will pop up. Click the Deploy button to make the solution available in the tenancy.
Click on the edit button to edit the properties of the solution package.
Provide the following values for the below listed properties:
- Short Description: SunSmart
- Description: Shows a feed from the SunSmart web site to indicate when UV protection is required in Australian capital cities.
- Icon URL: https://kaboodlesoftware.files.wordpress.com/2018/09/sunsmartappicon.png
- Publisher Name: Kaboodle Software
- Support URL: https://kaboodlesoftware.com/products/sunsmart-client-side-web-part.
Add the App to a Web Site
Once the solution package has been uploaded, deployed and configured, you can then add the app to any SharePoint site in you tenancy.
To do that, navigate to a suitable site and select the Add an app menu item from the site actions menu.
In the Apps you can add section click on the SunSmart application icon to install the app on the site.
You may have to wait a couple of minutes before the solution is available.
Add a Web Part to a page
Once the solution has finished installing, you can navigate to a page where the web part is to be displayed and switch into page edit mode. Then find a suitable section column in which to add a web part instance.
The web part is listed in the Text, Media and Content group but probably the easiest way to locate it is to type “sun” into the search box.
Then simply click on the web part icon to an add an instance of the web part to the page.
Web Part configuration
When in page edit mode, you can edit the web part properties to control how the web part is displayed on the page.
You can adjust the following settings:
- Location: The drop down lets you choose the location for which the information show in the web part applies.
- Header: Type a value if you want the web part to display a header value or leave it blank if no header is to be shown.
- Width: Use the slider control to set the width of the web part between a minimum value of 170px to a maximum of 500px.
- Layout: Use the radio button to specify where in the web part container the web part should be positioned.
- Display Mode: You can choose to display the web part in Minimum or Full mode.
The settings below show a web part configured for Sydney, in Full mode with a width of 330px, centrally aligned on the page.
The web part actually has a 2nd property page which shows some additional information and provides links to this web site and to SunSafe as well.
If you want to find out more on how we built this web part please read the associated blog articles.
Kaboodle Software 
