Leaderboard

Purpose of this web component is to display leaderboard of users or teams.

<scill-leaderboard class="scill-web-component"
                     app-id="632397832778612749"
                     leaderboard-id="643154716901539841"
                     avatar-images="false"
                     pagination="true"
                     member-type="user"
                     page-size="5"
                     >
</scill-leaderboard>

Attributes

AttributeDescription
user-idRequired attribute to fetch correct data from SCILL.
app-id (required)Required attribute to fetch correct data from SCILL. app-id you can find in the admin under Apps
leaderboard-id (required)Required attribute to display leaderboard data. If leaderboard-id is not provided leaderboard table will be empty.
avatar-imagesIf you set this attribute 'true' then avatars will be displayed, otherwise they will be hidden. Default is 'false'. If your image need sufix and prefix you can set it by avatar-url-prefix and avatar-url-suffix attributes. Result will be avatar-url-prefix + your_image + avatar-url-suffix
avatar-url-prefixPrefix helper for avatar images, depends how you get image name from server. avatar-url-prefix + your-image. In most cases this is URL where you store your images
avatar-url-suffixSuffix helper for avatar images, depends how you get image name from server. your-image + avatar-url-suffix. e.g. If you get only image name, you will add extension as your avatar-url-suffix attribute. Result will be your_image + .png
paginationIf you set this attribute 'false' then pagination will not be displayed, otherwise it will displayed. Default is 'true'
member-typeIndicates what type this entry is, it’s either user or team. Default is user
page-sizeSet number of table rows per page. Default is 25
languageSet language for leaderboard table. It can be en or de, en is default

Leaderboard customization

To change table styles we have provided few CSS classes.

ClassDescription
.scill-leaderboard-headerCustomize leaderboard table header
.scill-leaderboard-header-cellCustomize leaderboard table header cell
.scill-leaderboard-rowCustomize leaderboard table body row
.scill-leaderboard-cellCustomize leaderboard table body cell
.scill-leaderboard-footerCustomize footer of leaderboard table (pagination row)
.scill-leaderboard-footer-cellCustomize leaderboard table footer cell