Goal Thermometer Web Part Product Guide
Features:
- Includes 12 Thermometer Mercury colors, and 2 Thermometer sizes.
- 30 day trial period. Purchase a license for continued use. License is good for each front-end server (on premise) or each tenant (online).
- Enter the Goal Amount and Current Amount in the web part properties.
- Enter optional Header message and/or Footer message to appear above and below the Goal Thermometer.
- Header/Footer message can include HTML for full customization (like adding a button/link)
- Easily change the font color and background color.
- Change the amount of time it takes for the Thermometer to fill to the current amount on page load.
- Enter a prefix and/or suffix for the numbers, to make "500" appear as "$500M" or any other combination you need.
- Alternatively, you can load your Goal Amount, Current Amount, Header message, Footer message from a SharePoint List. This way you can write custom code in another project to update the list and change your amounts and messages dynamically. Whole numbers only, decimals will be rounded to nearest whole number.
- Packaged as a SharePoint Sandbox Solution, can be installed as a Farm Solution or Sandbox Solution on premise or in the cloud.
- Compatible with SharePoint 2010 (Foundation and Server), SharePoint 2013 (Foundation and Server), and Office 365/SharePoint Online.
- Packaged as a Site Collection Feature, activate once per site collection. JS and CSS is available via a list in the root site of site collection. Feel free to tweak and make it your own. Almost all source code is JavaScript, free to customize.
Product Demonstration
Install as Farm Solution
For Farm Solution installation: using either PowerShell or STSADM, add the WSP to the farm (we recommend opening SharePoint PowerShell, then using STSADM within)
STSADM.EXE -o addsolution -filename "AEGoalThermometer.wsp"
Then deploy the solution using Central Administration (System Settings, Farm Solutions), so you can easily target the web application. You can optionally do this step too with STSADM or PowerShell, but we recommend deploying using the Central Admin GUI.
Install as Sandbox Solution
For Sandbox Solution installation, open the Site Collection that you want to add the web part, open Site Settings (must be a site admin or owner to do this), open the Solution Gallery (or Solutions in 2013), add the WSP to the gallery, then activate the solution.
NOTE: Product is contained in a single WSP file for both installing as a Farm solution and Sandbox solution. If installing On Premise then you can install as either Farm solution or Sandbox solution at your discretion. If installing SharePoint Online then Sandbox solution is your only option.
Install on Office 365 SharePoint Online
Follow the instructions for installing as a sandbox solution.
Post Install Steps Feature Activation and Basic Usage
- After the solution is deployed (either Farm or Sandbox), you then activate a Site Collection Feature named “AE Goal Thermometer Web Part”. This adds the web part and creates a library in the root site of the site collection.
- Add the web part to a page (Group is “AMREIN Engineering”, web part name is “Goal Thermometer Web Part”).
- Edit the web part properties.
- Enter a license key, or leave blank for a 30 day trial.
- Thats it! Your Thermometer Web Part will render its amounts with its default settings.
- UPDATE: Due to a reported SharePoint 2013 and SharePoint Online bug you might need to disable the "Minimal Download Strategy" "site feature" for this web part to work.
Retrieving Goal Thermometer Amounts from a List
You can retrieve the Goal Amount, Current Amount, Header message, and Footer Message from a SharePoint List. This is done by pointing your web part at a site url and list name. Update these values in the web part properties for your web part.
Relevant Web Part Properties:
- Server Relative Web Url: Server Relative Url of the SharePoint Web Site where List is located, or leave blank to use current web site, ex. '/sites/finance'.
-
Query List Name: Name of SharePoint List where Goal Thermometer values are located. Entering a listname here will force the web part to get its data from a list. Leave it blank to use values from Web Part Properties.
The Goal Thermometer only needs a single listitem's data to render, so the List Query will quit after finding the first listitem row. We recommend the list only contain a single listitem.
- View Field Goal Amount: Internal field name in List where Goal Amount value is saved, ex. 'GoalAmount'.
- View Field Current Amount: Internal field name in List where Current Amount value is saved, ex. 'CurrentAmount'.
- View Field Header Text (optional): Optional, internal field name in List where Header Text value is saved, ex. 'HeaderText'.
- View Field Footer Text (optional): Optional, internal field name in List where Footer Text value is saved, ex. 'FooterText'.
- Amount Divisor: Optional, a number that all amounts will be divided by, useful for rounding, ex. use 1000 to convert $5000 to $5. Can be useful to use with Suffix (like 'M' for Millions, to make '$5,000,000' appear as '$5M', to make Thermometer thinner).
Thermometer Amounts Explained
The Thermometer web part needs actual numbers for the Goal and Current Amounts. This is because of the JavaScript math that is required for the proper rendering and animation of the Thermometer. So, dollar amounts and other formatted numbers are not supported. Plain whole numbers are used (like 1000). However, you can optionally enter an Amount Prefix and Suffix. These are treated as plain text, and not part of some special formula or function. They will simply be either prepended (prefix) or appended (suffix) to your dollar amounts when displayed. So, you can enter any text you like as a prefix or suffix.
Ex. prefix="$", suffix="M", "10" becomes "$10M".
Ex. prefix="", suffix="%", "10" becomes "10%"
Custom Header/Footer Messages
You can include optional Header and Footer messages, that can contain either plain text or custom HTML. This makes it easy to add links, buttons, etc. to the Thermometer. For example, if you want the footer message to include a button or link to a donation page or other page, use the following:
<input type='button' value='Donate' onclick='window.open("https://www.google.com/search?q=donate","_blank");' />Which renders as this:
Upgrade from Earlier Version
Download the latest version WSP from the AMREIN product catalog
If you are upgrading from another paid version available from the AMREIN product catalog, then you can use the “STSADM –o upgradesolution” to upgrade to the latest version.
If upgrading as a Farm Solution, open “SharePoint 2010 (or 2013) Management Shell”, then use the following command:
STSADM.EXE -o upgradesolution -name "AEGoalThermometer.wsp" -filename "AEGoalThermometer.wsp" -immediate –allowGacDeployment
If upgrading as a Sandbox Solution, open the root site of the site collection you want to upgrade. Open Site Settings, then open the Solution Gallery. You will have to deactivate the solution first, then upload the new solution (replace existing one), then activate again. You will have to upgrade the web part sandbox solution in every site collection separately. This is not applicable for sub sites, just site collections.
TIP: before upgrading, we recommend deleting the JS and CSS resources used by the product in the following library: AEGoalThermometerAssets. This library is located in the root site of the site collection. If any customizations were done here, they will be lost in the upgrade, since you will either be deleting the contents manually or they will be automatically replaced during solution upgrade. Sometimes the contents of this library are not replaced/overwritten correctly during solution upgrade, so this is why we recommend manually deleting the contents of this list/library before upgrading.
Locating Version Number
After the page is done loading, use your browser to “View Source”, and search for the following string “AEGT_VERSION_NUMBER”. Your version number will appear next to it. Alternatively, edit the web part properties, and you should see the version number at the bottom of the Thermometer Settings section.
Licensing Information
The product is available as a 30 day free trial, per front-end server, or per Office 365 tenant license. You can download and install the web part and evaluate for 30 days before a license is needed for continued usage. After 30 days you will be prompted to license the product.
Each license is valid for each front-end server in your SharePoint Farm (or each Office 365 tenant). The web part can then be used as many times as needed on each server/tenant.
You can enter the license key in two ways:
- Enter license key in web part's "web part properties" tool pane.
- For on premise deployments you can optionally enter the license key in a web.config file. This is the preferred method if you will be using the web part in many locations, so that you can enter the key once and be done. You will enter the license key in an “appSetting” configuration section in the web.config file:
<appSettings><add key="AEGT" value="{MY_LICENSE_KEY_VALUE}" /></appSettings>
- For Farm Solutions, use web.config here:
C:\inetpub\wwwroot\wss\VirtualDirectories\{YOURSITE}\web.config
- For Sandbox Solutions, use web.config here:
-
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\UserCode\web.config *
* This path is for SP2010, it may be different in SP2013.
Web Part Permissions
The web part’s CSS and JavaScript resources are saved in a list named “AEGoalThermometerAssets” located in the root site of the site collection.
It is important that any user expected to use the web part have at least read permissions to:
- The root site of the site collection (that contains the web part and page it’s on).
- The list “AEGoalThermometerAssets” that contains the CSS and JavaScript resources, located in the root site of the site collection.
How to Customize the Code
Almost all the source code for the application is included in a library in the root site of the site collection named “AEGoalThermometerAssets”. You can make changes to the CSS and JS files here to customize how the web part functions.
- WARNING: you can break the web part by changing the source code.
- NOTE: if you break the web part’s source code, you can delete the contents of this library and “deactivate” and then “activate” again the site collection feature. This will refresh the contents of the library.
- NOTE: if you change the source code, any future upgrades/fixes/releases to this web part will likely overwrite your changes.
Change Log
- 1.0: Initial Release
- 1.1: Removed image preloading from goal-thermometer.js, was causing strange behavior in older versions of IE in SP2010.
- 1.2:
Changed program to use SharePoint Client Object Model (JavaScript Object Model) to read items, instead of using CodePlex SPServices. Side effect is no longer support public/anonymous sites.
Removed View Name from web part properties, will always pull ignoring view when using caml query in JSOM, query stops after finding 1 one in List.
Added specific version folder in assets module/library, to help get past sp2013 overwrite elements.xml issue. New JS/CSS files are in this folder, no replace needed, just changing URL paths in web part page.