# Achievements system

**URL:** <https://forum.adalo.com/t/achievements-system/17015>\
**Category:** Get Help\
**Created:** [September 8, 2021, 3:32pm UTC](https://forum.adalo.com/t/achievements-system/17015 "2021-09-08T15:32:53Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![tbel](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tbel/32/11159_2.png) [@tbel](https://forum.adalo.com/u/tbel)\
**Post date:** [September 8, 2021, 3:32pm UTC](https://forum.adalo.com/t/achievements-system/17015/1 "2021-09-08T15:32:53Z")

</div>

Hiya guys, I’m in the beginning phases of implementing an Achievements system and wanted to know if something like this is possible with the Avatar List?

 ![IMG_F9E01E934EA9-1](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/e/e90a4f6e6d6bd91927008f7a39ea8c050747b834.jpeg)

I would like to have dimmed icons until the achievement is met, but I need a nudge in the right direction with ‘achieving’ this 😉

Any help would be awesome thx!

---

<div class="post-metadata">

**Author:** ![pford](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/pford/32/4648_2.png) [@pford](https://forum.adalo.com/u/pford)\
**Post date:** [September 8, 2021, 4:26pm UTC](https://forum.adalo.com/t/achievements-system/17015/2 "2021-09-08T16:26:59Z")

</div>

There’s actually several different ways to accomplish this, with the easiest being to use the Custom List, but if you’re set on using the Avatar list for the horizontal scroll functionality, it will prove much more complex and require some interesting record and collection customization that I would need to work out myself. The Custom List is by far much easier to do than the Avatar List, but let me work up an example for you to clone. Give me a sec.

---

<div class="post-metadata">

**Author:** ![Applicationspeciali](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/applicationspeciali/32/13027_2.png) [@Applicationspeciali](https://forum.adalo.com/u/Applicationspeciali)\
**Post date:** [September 8, 2021, 4:28pm UTC](https://forum.adalo.com/t/achievements-system/17015/3 "2021-09-08T16:28:16Z")

</div>

great i needed this 😊 😊 😊

---

<div class="post-metadata">

**Author:** ![pford](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/pford/32/4648_2.png) [@pford](https://forum.adalo.com/u/pford)\
**Post date:** [September 8, 2021, 4:42pm UTC](https://forum.adalo.com/t/achievements-system/17015/4 "2021-09-08T16:42:28Z")

</div>

Here’s a cloneable app that shows a very basic system for doing this with the Avatar list complete with badges and updating images upon completion: [Achievements Tracker Template](https://previewer.adalo.com/ceab94ce-f87d-45ef-b14e-d0592105f9e3)

This approach makes use of several hacks such as the Countdown batch update, the Image appending URL parameters (duotone in this case), and the onboarding screenflow.

---

<div class="post-metadata">

**Author:** ![tbel](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tbel/32/11159_2.png) [@tbel](https://forum.adalo.com/u/tbel)\
**Post date:** [September 8, 2021, 4:53pm UTC](https://forum.adalo.com/t/achievements-system/17015/5 "2021-09-08T16:53:51Z")

</div>

Amazing thank you! I would indeed love the Horizontal scroll functionality based on the design space needed.

Looking forward to your example, appreciate it!

---

<div class="post-metadata">

**Author:** ![tbel](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tbel/32/11159_2.png) [@tbel](https://forum.adalo.com/u/tbel)\
**Post date:** [September 8, 2021, 4:55pm UTC](https://forum.adalo.com/t/achievements-system/17015/6 "2021-09-08T16:55:18Z")

</div>

Wow that was fast, really appreciate this as it’ll add some needed retention to my app! Will dissect this today for sure.

Thx!

---

<div class="post-metadata">

**Author:** ![pford](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/pford/32/4648_2.png) [@pford](https://forum.adalo.com/u/pford)\
**Post date:** [September 8, 2021, 5:11pm UTC](https://forum.adalo.com/t/achievements-system/17015/7 "2021-09-08T17:11:56Z")

</div>

No problem! Let me know if you have any questions.

---

<div class="post-metadata">

**Author:** ![tbel](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tbel/32/11159_2.png) [@tbel](https://forum.adalo.com/u/tbel)\
**Post date:** [September 9, 2021, 1:15am UTC](https://forum.adalo.com/t/achievements-system/17015/8 "2021-09-09T01:15:27Z")

</div>

When you have a moment, how would update without clicking a button? Would I need something like an invisible text input that waits for a condition to be met then fire off the url call? 🤔

Or maybe I can be sneaky and add a full screen modal?

---

<div class="post-metadata">

**Author:** ![tbel](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tbel/32/11159_2.png) [@tbel](https://forum.adalo.com/u/tbel)\
**Post date:** [September 9, 2021, 1:26am UTC](https://forum.adalo.com/t/achievements-system/17015/9 "2021-09-09T01:26:04Z")

</div>

Oh, performant wise in the Achievement Copies collection, you have individual entries per user, is this better in the long run? Or having Multiple Users to 1 Achievement is good as well?

Thx!

---

<div class="post-metadata">

**Author:** ![pford](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/pford/32/4648_2.png) [@pford](https://forum.adalo.com/u/pford)\
**Post date:** [September 9, 2021, 1:42am UTC](https://forum.adalo.com/t/achievements-system/17015/10 "2021-09-09T01:42:42Z")

</div>

> [@tbel](#):
>
> how would update without clicking a button

For this you would still need the User Achievement Copy’s as a list to you can update the “Current User Achievement Copy” You can really make anything a list so it doesn’t have to be a button, but the user will need to take an action of some kind still. Usually you can make this work better by having a congrats screen or something that they have to confirm. Another option is to use a modal screen to display a Lottie file that is actually a list and will update automatically once the animation has played.

> [@tbel](#):
>
> Or having Multiple Users to 1 Achievement is good as well?

This actually will not work because if you update the achievement to completed, it will make it complete for all users.

---

<div class="post-metadata">

**Author:** ![tbel](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tbel/32/11159_2.png) [@tbel](https://forum.adalo.com/u/tbel)\
**Post date:** [September 9, 2021, 11:53am UTC](https://forum.adalo.com/t/achievements-system/17015/11 "2021-09-09T11:53:42Z")

</div>

Gotcha! ANd of course, that makes perfect sense regarding the collection 🙂

I also have an issue where the Image Url doesn’t display in the list, even directly copying the url you used.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/d/d83aa7e98c60a6d54a563aafcc8dac4a5a4c2d4d.png)

And you’re correct! This is much more complex ☹  
thx!

---

<div class="post-metadata">

**Author:** ![pford](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/pford/32/4648_2.png) [@pford](https://forum.adalo.com/u/pford)\
**Post date:** [September 9, 2021, 1:34pm UTC](https://forum.adalo.com/t/achievements-system/17015/12 "2021-09-09T13:34:57Z")

</div>

This is because the image URL stays the same for all achievements and the User Achievements Copies are what should be displayed. You’ll notice that the URL for those is set to be the Achievements URL, but with `&duotone=000000,ffffff` appended to the end of it to make it greyed out. Once the user completes it, the URL is updated to the original Achievement Image URL. In this screenshot, remove the `&duotone=000000,ffffff` from the URL and it should work for you.

---

<div class="post-metadata">

**Author:** ![tbel](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tbel/32/11159_2.png) [@tbel](https://forum.adalo.com/u/tbel)\
**Post date:** [September 9, 2021, 3:51pm UTC](https://forum.adalo.com/t/achievements-system/17015/13 "2021-09-09T15:51:33Z")

</div>

Looks like I got it going! Not sure what I changed but maybe it was reassigning them.

I think the only thing needed now is some form of Global Variable or Conditional check. I’m more versed in Game Development in this regard, 🙂 so I’m thinking something like;

If Achievement is True  
then link to Modal

Then once the user clicks ok/close it will flip the icon. Know what I mean?

You can set actions per screen, so I guess I can go that route using the visibility check?

---

<div class="post-metadata">

**Author:** ![pford](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/pford/32/4648_2.png) [@pford](https://forum.adalo.com/u/pford)\
**Post date:** [September 9, 2021, 9:10pm UTC](https://forum.adalo.com/t/achievements-system/17015/14 "2021-09-09T21:10:58Z")

</div>

I think that would work just fine! As long as there is some sort of conditional visibility or action you should be able to control the user flow.

---

<div class="post-metadata">

**Author:** ![tbel](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tbel/32/11159_2.png) [@tbel](https://forum.adalo.com/u/tbel)\
**Post date:** [September 10, 2021, 12:21am UTC](https://forum.adalo.com/t/achievements-system/17015/15 "2021-09-10T00:21:43Z")

</div>

Gave me a good idea with the countdown timer. I’m using an invisible countdown to do the check. Thx so much for all your help on this. Looks like it’s all working.

---

<div class="post-metadata">

**Author:** ![tbel](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tbel/32/11159_2.png) [@tbel](https://forum.adalo.com/u/tbel)\
**Post date:** [September 10, 2021, 3:04pm UTC](https://forum.adalo.com/t/achievements-system/17015/16 "2021-09-10T15:04:34Z")

</div>

Hiya @pford quick question, for onboarding, any suggestions to quickly update existing users? I have roughly 40 signed on already. 😬

---

<div class="post-metadata">

**Author:** ![tbel](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tbel/32/11159_2.png) [@tbel](https://forum.adalo.com/u/tbel)\
**Post date:** [September 11, 2021, 10:18pm UTC](https://forum.adalo.com/t/achievements-system/17015/17 "2021-09-11T22:18:42Z")

</div>

Hiya, out of curiosity, how would you do it with a custom list? I’m thinking of scalability as I will eventually add more as I go.

Cheers!

---

<div class="post-metadata">

**Author:** ![tbel](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tbel/32/11159_2.png) [@tbel](https://forum.adalo.com/u/tbel)\
**Post date:** [September 16, 2021, 10:46am UTC](https://forum.adalo.com/t/achievements-system/17015/18 "2021-09-16T10:46:08Z")

</div>

Quick update, I love Adalo, got the existing users onboarded using your countdown solution but changed it to “Current User” Was able to do them all in 5mins 🙂

All looks solid now! We should make this a clonable kit for the front page!

Cheers!

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/system/32/40401_2.png) [@system](https://forum.adalo.com/u/system)\
**Post date:** [September 26, 2021, 10:46am UTC](https://forum.adalo.com/t/achievements-system/17015/19 "2021-09-26T10:46:10Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
