# Leaderboard Display any Adalo collection as a live, ranked leaderboard. Rows are numbered by sort order — connect your database, sort descending by score, and the component handles the rest. A banner at the top shows the logged-in user's current rank so they always know where they stand. ## Getting Started Add the Leaderboard to a screen, connect it to a collection sorted descending by your score field (e.g. Points, Wins, Revenue), and map the Row Data fields. The component will automatically number rows 1, 2, 3 from top to bottom. To show the current user's rank in the banner, set **Current User ID** and **User ID Field** as described in the My Rank Banner section below. ## Settings ### Row Data * **Line 1 (e.g. Name)** — The first line of text in each row. Best used for the user's primary display name or title. Bind to your collection field using Magic Text. * **Line 2 (e.g. Company)** — A secondary line displayed below Line 1. Optional — leave blank to hide. Good for company name, team, or subtitle. * **Line 3 (e.g. Title)** — A third line below Line 2. Optional — leave blank to hide. Good for job title, level, or location. * **Avatar Image URL** — A URL pointing to the user's profile photo. Bind to an image field or image URL text field. If left blank or the URL is invalid, the component shows a circle with the user's initials from Line 1. * **Score** — The value displayed in the right column next to the score icon. Bind to your score field (points, wins, revenue, etc.). This is text, so you can include formatting like "1,250 pts" or just pass a raw number. ### My Rank Banner * **Show My Rank Banner** — Toggle the current user rank banner on or off. (default: on) * **Current User ID** — Bind to `Logged In User > ID`. This is matched against the **User ID Field** below to identify which row belongs to the logged-in user and calculate their rank. Leave blank to hide the banner even if the toggle is on. * **Label** — The small label shown above the rank number in the banner. (default: "Your Rank") * **Background Color** — Banner background color. (default: deep purple `#6200EA`) * **Text Color** — Color for all text inside the banner. (default: white) ### My Rank Banner · ID Field * **User ID Field (per row)** — Bind to the ID field of your collection (e.g. `Users > ID`). The component compares each row's value here against **Current User ID** above to find the logged-in user's position. This is a per-row binding — it must come from the same collection connected to the list. ### Ranking Options * **Tie Handling** — Controls how rows with equal scores are numbered. *Shared rank (1, 1, 3)* gives tied rows the same number and skips ahead accordingly — standard in games and sports. *Sequential (1, 2, 3)* numbers every row uniquely by position. (default: Shared rank) * **Highlight Top 3** — When on, ranks 1, 2, and 3 receive distinct medal colors on the rank number, avatar ring, and avatar background. (default: on) * **1st Place Color** — Color for rank 1 highlights. (default: gold `#FFD700`) — only visible when Highlight Top 3 is on. * **2nd Place Color** — Color for rank 2 highlights. (default: silver `#C0C0C0`) — only visible when Highlight Top 3 is on. * **3rd Place Color** — Color for rank 3 highlights. (default: bronze `#CD7F32`) — only visible when Highlight Top 3 is on. ### Row Appearance * **Row Background** — Background color for each row. (default: white) * **Text Color** — Color for all row text. Line 2 and Line 3 are rendered at reduced opacity relative to this color. (default: dark gray `#222222`) * **Show Avatar** — Toggle the circular avatar column on or off. When off, rows show rank, text lines, and score only. (default: on) * **Avatar Size** — Diameter of the avatar circle in pixels. (default: 42, range: 24–80) — only visible when Show Avatar is on. * **Score Icon** — Decorative icon shown above the score in the right column. Options: Star (★), Trophy (⛆), Flame (▲), Lightning (⚡), None. (default: Star) * **Icon Color** — Color of the score icon. (default: gold `#FFD700`) * **Score Color** — Color of the score text. (default: dark gray `#222222`) * **Show Row Divider** — Toggle the hairline divider between rows. (default: on) * **Divider Color** — Color of the row divider line. (default: light gray `#EEEEEE`) — only visible when Show Row Divider is on. ### Score Font * **Font Size** — Size of the score text in pixels. (default: 13, range: 10–28) * **Font Weight** — Weight of the score text. Options: Light, Regular, Medium, Semi Bold, Bold. (default: Semi Bold) ### Line 1 Font * **Font Size** — Size of the Line 1 text in pixels. (default: 14, range: 10–28) * **Font Weight** — Weight of the Line 1 text. Options: Light, Regular, Medium, Semi Bold, Bold. (default: Semi Bold) ### Line 2 Font * **Font Size** — Size of the Line 2 text in pixels. (default: 12, range: 10–24) * **Font Weight** — Weight of the Line 2 text. Options: Light, Regular, Medium, Semi Bold, Bold. (default: Regular) ### Line 3 Font * **Font Size** — Size of the Line 3 text in pixels. (default: 11, range: 10–22) * **Font Weight** — Weight of the Line 3 text. Options: Light, Regular, Medium, Semi Bold, Bold. (default: Regular) ## Actions ### On Row Tap Fires when a user taps any row in the leaderboard. * **When it fires** — On tap of any row (not the banner). * **Data passed** — Row ID (the value bound to **User ID Field** for that row). * **Example use case** — Navigate to a user profile screen, passing the tapped user's ID as a link parameter. ## Tips & Best Practices * **Sort your collection in Adalo, not the component.** The component assigns rank 1, 2, 3 based on the order rows arrive. Sort descending by your score field in the Adalo list filter settings before the component sees the data. * **Both ID fields must come from the same collection.** Current User ID (from Logged In User) and User ID Field (from the connected collection) are compared directly — they must use the same ID format to match. * **Use a text field for Score to control formatting.** If you want "1,250 pts" or "$4.2k", store a formatted string. If you need the raw number for sorting, keep a separate numeric field for sorting and a formatted text field for display. * **Line 2 and Line 3 are optional — leave them blank to hide them.** Rows will automatically collapse to show only the lines you've filled in. A name-only layout with Line 1 and Score only looks clean for simple use cases. * **The banner only shows if a match is found.** If Current User ID doesn't match any row's User ID Field value, the banner is hidden automatically — no broken UI. * **Use Magic Text with "No Formatting" for ID fields.** When binding IDs with Magic Text, select No Formatting to ensure the raw ID value is passed, not a display label. * **Highlight Top 3 draws attention to leaderboard leaders.** For competitive apps, leave this on. For internal dashboards or neutral contexts, turn it off for uniform styling. ## Example Use Cases * **Gaming leaderboard** — Store player Points in a Users collection. Sort descending by Points, map Line 1 to Username, Score to Points, and Avatar to profile photo. Show players how they rank among all users. * **Sales competition dashboard** — Connect to a Sales Reps collection with a Revenue field. Map Line 1 to Rep Name, Line 2 to Region, Score to formatted revenue. Use On Row Tap to navigate to a rep's detail screen. * **Fitness challenge** — A Steps collection sorted by weekly steps. Map Line 1 to Member Name, Line 2 to Team, Score to step count. The banner shows each user their current rank so they know how close they are to overtaking the next person. * **Community reputation system** — Sort Users by Reputation Points. Map Line 1 to Display Name, Line 2 to Role, Line 3 to Location, Score to points. Gold/silver/bronze highlights reward top contributors visually. * **Class rankings** — A Students collection sorted by Grade. Map Line 1 to Student Name, Line 2 to Class, Score to grade percentage. Toggle off Highlight Top 3 for a neutral academic context and use a neutral icon or None for the score icon. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/component-basics/marketplace-components/leaderboard.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.