Toolbar
From developer.newsgator.com
The Toolbar provides some of the user interactivity in NewsGator Widgets. The email and ratings stars you see in some of the default templates are part of the toolbar. There are many options for customizing the toolbar, including adding/removing elements and changing icons.
Arguments
The toolbar accepts the arguments specified in the list below. The arguments are passed to the RenderToolbar() function these are given as an arguments object. Eg:
${% RenderToolbar({ngEmail:true, ngImgEmail:"http://example.com/email.gif"}) %}
Note: many of the boolean arguments interpret the empty string as "true" for legacy compatibility reasons. You can avoid any issues or confusion by always using boolean values rather than strings.
- ngPostId
- The post the toolbar is for. This is automatically set by the widget RenderToolbar() function.
- ngFeed
- The feedId of the post. This is automatically set by the widget RenderToolbar() function.
- ngOrg
- The orgcode of the client using the toolbar. This is automatically set by the widget RenderToolbar() function.
- ngPostLink
- The HtmlUrl of the post. This is automatically set by the widget RenderToolbar() function.
- ngPostDescription
- The text of the post, used for emails. This is automatically set by the widget RenderToolbar() function.
- ngPostTitle
- The post's title, used for emails. This is automatically set by the widget RenderToolbar() function.
- ngEmail
- Enable/disable the email icon. Defaults to enabled.
- ngImgEmail
- URL of the email icon to use.
- ngEmailTitle
- Default title for emails sent from the toolbar. Default is "re: " + the post title.
- ngEmailData
- Default message body for emails.
- ngEmailHeaderMessage
- Text to put before the user:supplied email body. Note that if you set this you cannot use a custom email template.
- ngEmailFooterMessage
- Text to put after the user:supplied email body. Note that if you set this you cannot use a custom email template.
- ngEmailTemplate
- The name of a server:side ASPX template for the email. (See Custom Emails from Toolbar)
- ngSave
- Enable/disable clippings in the toolbar.
- ngImgSave
- URL for the clippings icon
- ngSaveMsg
- The text to show in a popup after a post has been clipped.
- ngDeleteSave
- Enable/disable the delete clipping function.
- ngImgDeleteSave
- URL for the delete clipping icon.
- ngDeleteSaveMsg
- The text to show in a popup after a clipping has been deleted.
- ngRatings
- Enable/disable ratings (note, can only be enabled if ngPostId is supplied)
- ngRatingsImgBase
- The URL prefix for custom ratings icons (see Custom Ratings "Stars")
- ngRatingsImgSuffix
- The URL suffix for custom ratings icons (see Custom Ratings "Stars")
Custom Ratings "Stars"
It is possible to use custom images for the ratings in the toolbar instead of the default star images. This requires making 6 images, naming them according to a specific scheme, and then pointing the toolbar to their URL.
Each of the ratings images should be 14x14px. The toolbar determines which image to show by appending a number and a letter to a base filename. The number determines the state of the outer part of the star, (on, off or half-on) which shows the average rating. The letter determines whether the center part of the star is filled or empty, which indicates the user's rating.
| Identifier | Example | Description |
|---|---|---|
| 1a | Image:Rate 1a.gif | average rating fully on, user rating empty |
| 1b | Image:Rate 1b.gif | average rating fully on, user rating full |
| 2a | Image:Rate 2a.gif | average rating half on, user rating empty |
| 2b | Image:Rate 2b.gif | average rating half on, user rating full |
| 3a | Image:Rate 3a.gif | average rating off, user rating empty |
| 3b | Image:Rate 3b.gif | average rating off, user rating full |
Once you've created the ratings stars you must put them on a publicly accessible website. Then you must tell the toolbar where to find them. You do that using the ratingsImgBase and ratingsImgSuffix arguments. ratingsImgBase should give the URL of the image up to just before the identifier. It should include the server, path and beginning of the file name. ratingsImgSuffix should give the part of the URL after the identifier. Typically this will be the image extension, such as ".gif" or ".png".
For example, if you've created the six images and put them at the following URLs:
- http://nmp.newsgator.com/host/EXMPL/img/rating_1a.gif
- http://nmp.newsgator.com/host/EXMPL/img/rating_1b.gif
- http://nmp.newsgator.com/host/EXMPL/img/rating_2a.gif
- http://nmp.newsgator.com/host/EXMPL/img/rating_2b.gif
- http://nmp.newsgator.com/host/EXMPL/img/rating_3a.gif
- http://nmp.newsgator.com/host/EXMPL/img/rating_3b.gif
You would then update the image template with the following line of code:
${% RenderToolbar({ngRatingsEnabled:true, ngRatingsImgBase:"http://nmp.newsgator.com/host/EXMPL/img/rating_", ngRatingsImgSuffix:".gif"}) %}
