Date Conditional Modal Window (for COVID health screening)

Support
1

I am looking to have a modal fire when a user lands on a page that is based on an event that takes place on a certain calendar date. I.e, if they have an event on Friday, when they open the app on Friday and go to the detail page, a modal fires on the event page to ask them 4 covid questions that they have to answer before completing the business part of their task. I know I can make things conditionally show using “!model.thingIWantToShow”, but I want this particular window to only fire on the date and only if they haven’t answered the questions with “NO”…
Guidance and ideas much appreciated!
JR

2

The easiest way to wrap conditional logic around BetterForms actions is with Named Actions. In this situation, I would define 2 named actions. The first action would be called by your button and contain just a function action that could conditionally call the 2nd named action which would show your modal. You can call named actions from javascript using the EventBus.

So the javascript (containing your conditional logic) would look something like this

if (model.day == 'today') {
    EventBus.$emit('processNamedAction', {
        "action": "namedAction",
        "name": "yourOtherNamedAction"
    })
}

Technically this JS could be within a function action on your button, but I would recommend a named action so that you can re-use this bit of code in other places on your page.

3

that assumes pressing a button. I’d like this function to fire when the page loads. I guess that can be accomplished with an onPageLoad hook?

4

onFormLoad namedAction, yes.

Or you can run the onFormRequest hook in FileMaker to perform this logic also.

5

ok. looks like I am going to do this without a modal and use visible_calc.
“!model.covidComplete + moment(model.date)”?

6

If you’re trying to use the logical “and” that is && in JavaScript

7

OK. so in trying to nail down the JS here, this is what I have for my visibility_calc:
“!model.Contractor.covidComplete && moment()isSameOrAfter(model.Event.DateOfEvent, ‘day’);”
Where model.Event.DateOfEvent is where the date we want to hide the component BEFORE.
this code is currently blocking the page from painting. What’s missing?

8

“!model.Contractor.covidComplete && moment().isSameOrAfter(model.Event.DateOfEvent);”

9

How is your date formatted? It may be best to convert the date to a moment object instead of just passing a string as the date. It might look something like this:

moment().isSameOrAfter(moment(model.Event.DateOfEvent, 'MM/DD/YYYY'), 'day
')

If all else fails, try experimenting with the moment functions in the console of your browser.