Create an alert - show alert component

App Building
1

Hi All,
We have five different queries (for each of the days of the week), which check for time overlaps/conflicts - they return the result; conflict result false or conflict result true (if there is a conflict). We want to try and create an alert based on these results.
What we have tried so far; We have a alert component which is hidden as default, what we want to happen is when these 5 different queries are ran - if there is a a conflict just display the alert. We have created a JS code which runs the five queries and should display the alert - the queries run successfully but the alert does not display. Anybody have any ideas? even if there is a better method (non-developers here, this is the only method we've tried!)

Thanks in advance!

2

HI there @MaElectra,

How are you trying to show your hidden component? Would you mind sharing a couple of screenshots?

As an idea, on your JS query you can set an event handler (right on the bottom of the query settings) to run when the query is true and one when the query is false (only run when, use something like {{ self.data === true }}) and make the handler to show/hide a modal (or your component).

3

Hi @MiguelOrtiz - Thank you for your reply!

Yes - based on the results of certain queries. I'll attach some images to explain further.
image -
User has entered times for Monday (there are already entries for the same date and time).

image

A JS query is ran to check through a table in our database to find any conflicts.

image
Once this result is returned - we want this component to show.

image
(when visible)

Thanks again!

4

Thanks for the context and screenshots @MaElectra!

The approach I'd take would be the following:

  • create a variable, let's say conflictFlag, with a false default.
  • set an event handler in your conflict query that runs only if self.data === true which sets your variable value to true.
  • within your alert component's hidden setting you can add {{ conflictFlag.value }} so that it follows the variable value.
  • Finally, you can also add event handlers (e.g. on change) in your input values so that when they set your variable's value to false (and user stops seeing the alert)

In alternative, an easier way is just referencing your javascript result within your component's hidden settings. e.g. {{ query1.data === true ? true : }}