Hey there, I’ve gone through the tutorials and am new to building with AppGyver. It seems intuitive but I am struggling to get a basic daily/weekly/monthly check-in polling function to work. It’s a binary yes or no poll with a submission button. The check-in window is for a set period of time either daily, weekly, or monthly which will be determined by the user upon setup. It seems simple but can’t figure out what I’m doing wrong or how to make it work properly.
I’d like to make it where:
Can only select one checkbox at a time
The description text also checks/unchecks the checkbox that it is associated with
Tie the submit button to ensuring at least one checkbox is checked
Resetting check-in ability after a set period of time
It seems quite basic yet I am struggling. I am very much a business user and not an engineer by training besides being able to do very basic HTML, CSS, and limited knowledge of Javascript.
Simplest way to create the checkbox logic is to have a pageVars.checkedId page variable, and bind your checkbox state to a formula such as current.id === pageVars.checkedId (assuming your repeating the checkboxes from a data source), and then set the logic for tapping the whole repeated component to set pageVars.checkedId to current.id.
The submit button would then simply check !IS_EMPTY(pageVars.checkedId).
To ensure you can check in only once in a certain time period, you could use the Set item to storage API to set lastSubmitAt key item to NOW() on submit. Similarly, you’d set a checkinPeriod item to "day"/"week"/"month" when the user is setting up their app. You’d also set these items to respectively named app variables.
Now, in global canvas, on app load, you would use Get item from storage to get both saved items, and set them to app variables. You now have a system where your lastSubmitAt and checkinPeriod app variables always have the right data as saved/submitted by the user.
Then, you can simply run a DATETIME_IS_BEFORE(appVars.lastSubmitAt, NOW(), appVars.checkinPeriod) to see if the last submit timestamp is before current timestamp in the given precision (which is the last parameter, i.e. day/week/month). See https://docs.appgyver.com/reference/formula_functions/date/datetime_is_before for the full docs.
That was a bit densely packed answer, but I hope it helps!
Thanks @Harri_Sarsa ! I didn’t see that specific to-do list tutorial. I only went through the prompts in Composer before attempting to build. Will give this a watch and the go through your recommendation above.
I’ve gone through all the tutorials again and started following the instructions above. I’m getting stuck on:
This is what I’ve been doing:
In the logic section of the repeated checkbox component going to EVENT Component tap --> Set Page Variables. Then within the Set Page Variables logic selecting Variable name to be checkedID then setting Assigned value using a formula current.id
I’ve also tried applying the same logic flow to the checkbox onChange event without success as well.
Alright so to simplify this a bit in a new app canvas. I’ve moved away from checkbox then submit flow to two static buttons for each challenge check-in.
I’ve also included the create a challenge flow that sets the checkinPeriod and a few other details. I’m hoping to either disable or hide the check-in buttons when a user has already checked in for that time period on the details page.
I’m struggling to get that functionality to work using the below guidelines you laid out earlier.
Can you help me troubleshoot where I’m going wrong?
Question though. I see that I’ve managed to disable buttons using your formula above so after a check-in those buttons disable and text appears saying you’ve checked-in already.
How do I know it will become clickable again if I haven’t set the length to “day”, “week”, “month”? Do I need to define the check-in period terms or does the logic understand “day”, “week”, “month” equates to the 24 hours, 7 days, & 30 days?
I’m loving AppGyver by the way! As someone not technical by nature I am starting to pick up how to build applications!
@Harri_Sarsa it did clarify thank you! It is properly printing the correct boolean of true or false. Now my issue is disengaging or hiding the buttons. I tried simply binding the formula (below) to disabled or visible state of the button component itself and that didn’t allow the buttons to become visible or enabled once it was in a new check-in time period.
I also tried using the logic canvas and an IF condition to the hide component and show component using the same formula above. That also hasn’t worked properly.
I know the function seems to be working as I’ve printed the “true” & “false” statements on the screen to double check. Additionally, I have tied strings to print “time to check-in” or “you’ve already checked-in for this period.” Using this formula:
IF(DATETIME_IS_BEFORE(data.myChallenges.lastSubmitAt, NOW(),data.myChallenges.checkinPeriod),“You’ve already checked-in for this time period.” , “It’s time to check-in”)
How do I make it where the buttons are clickable during the check-in window and disabled when they’ve already checked-in?
While @Sasu_Makinen is technically correct, using Set component property directly should be discouraged – it’s better to make your components react to bound values.
The real reason it’s not working is because the formulas you post are only re-evaluated if the constituent parameters change – so only if data.myChallenges.lastSubmitAt or data.myChallenges.checkinPeriod change.
So, instead of NOW(), you could have an appVars.now and add a loop to Global canvas that sets its value to NOW() e.g. every 1 second.