Admin Panel

Leaderboard

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

HTML
<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

Attribute Description
user-id Required 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-images If 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-prefix Prefix 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-suffix Suffix 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
pagination If you set this attribute 'false' then pagination will not be displayed, otherwise it will displayed. Default is 'true'
member-type Indicates what type this entry is, it’s either user or team. Default is user
page-size Set number of table rows per page. Default is 25
language Set 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.

Class Description
.scill-leaderboard-header Customize leaderboard table header
.scill-leaderboard-header-cell Customize leaderboard table header cell
.scill-leaderboard-row Customize leaderboard table body row
.scill-leaderboard-cell Customize leaderboard table body cell
.scill-leaderboard-footer Customize footer of leaderboard table (pagination row)
.scill-leaderboard-footer-cell Customize leaderboard table footer cell