131
Views
11
Comments
Solved
How to know if an input widget with the Input Type property set to Time is filled?


I have a default input widget that has the input type set to Time in a reactive app.

The issue that I'm having is:
1) When I save without setting a value to the variable, or when  I save with 12:00 AM , It stores in the database as 00:00:00, and when I refresh the page shows --:-- -- .
2) When I save with any time different than 12:00 AM, it shows correctly the date on the screen.

What I would like to happen: 
1) The user does not put a time on the input, shows --:-- -- on the screen
2) The user puts a time on the input, shows the time

My question is it possible to know if the input has a value introduced by the user? 
I can't compare with 00:00:00 because it conflicts with the time 12:00 AM. 
I thought maybe have an OnChange event and put some boolean variable to True so that I know the user interacted with the component, but then I get stuck on the False logic because I have nothing to compare to :/ 
Maybe the IsValid property of the widget, but so far no luck :/

Thanks in advance for the help :)

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi @Luis Martins ,

Outsystems itself does not make the distinction between empty and 00:00.  But HTML does.  So it is possible to know the difference between them by looking at the elements value.

I have created an OML to show what you could do.

  • You can just keep using a variable and input of type time, no need to change anything to that.  
  • You need to keep track in your database of whether a value of 00:00 was entered or nothing.  So add extra boolean to your entity named something like "TimeXIsEmpty"  You need this to know what to show wherever you are showing that information, both in that input when later updating, but also in other places where you are just showing that time as an expression
  • So, in the Save action of the screen where you have that input, the value of the variable will be 00:00, whether user left it empty, or entered time 00:00
  • What you can do in that case, is look at the value property of the input element with a piece of javascript.  That will help you decide the value of the boolean "TimeXIsEmpty" that you store along with the time value in the database
  • When coming back to the screen, since Outsystems doesn't know whether it was empty or not, it would show as --:-- in the input
  • In the first OnRender after the Fetch (*) , you need to fix this if the TimeXIsEmpty boolean is false : again with a small piece of Javascript, setting the value to 00:00 in that case
  • Anywhere else that you are showing this time (like in my demo oml in the list) you can use an if in the expression taking into account that boolean to know if there is a time to be shown or not

Dorine


(*) this is maybe the hardest to get/explain : basically, at the end of the OnAfterFetch, Outsystems is updating the input by giving it a value based on the variable, so if you would put that bit of javascript to fix the non-empty 00:00  in the OnAfterFetch , it would be overwritten by Outsystems after that.

QDR_ZegDekkeOeLoatAtes.oml
2021-09-06 15-09-53
Dorine Boudry
 
MVP

oh, btw, I only looked at a 24-hour time format, maybe you'll need to do little tweaks to this to also work for 12-hour time format.

2021-09-06 15-09-53
Dorine Boudry
 
MVP

new version of the oml : changed the default value of the boolean IsEmpty to true, that way, it starts empty when adding a new record

QDR_ZegDekkeOeLoatAtes.oml
2021-04-06 14-11-15
Luis Martins

Wow! 
Thanks for the detailed explanation, as well as, giving me an example of what I can do!
I like this solution better. For me, at least, it's easier to understand and more intuitive.

2019-02-27 17-48-20
Caldeira81

Hi, maybe convert time to text and compare with nulltextidentifier() or ""

Or validate if the input field was filled then convert to TextToTime()

2021-04-06 14-11-15
Luis Martins

Thanks for the reply!
At first,I didn't understand your suggestion.
But from what I understood the changes are:
1) instead of using an input of type Time, I switch to an input of type Text.
2) if the variable of that input is empty means the user didn't wrote anything there
3) if the user in fact put something in the input I validate if it is possible to convert to a Time format. If it is possible save the value, otherwise I would have extra logic.

I think that might work. Thanks!

UserImage.jpg
Kay Lun

I guess you could have a local boolean variable just to determine if the user has interact with the widget or not, use OnChange event and assign the local boolean variable to True

I uploaded the oml file for your better idea.

Hope this help.

CheckTimeSelected.oml
2021-04-06 14-11-15
Luis Martins

Thanks for the reply.
I used the component and initially was like the picture.
I then selected a time and it in fact showed me the time and that the user interacted with the component.

I then deleted the value I introduced, and was hoping the IsSelected was back to False, but it was not the case.

UserImage.jpg
Kay Lun

Hi Luis,

If that the case, how about using the timepicker instead?

Cuz they have clear action and also open and close action, which should fit your case.

Hope this help.

2021-04-06 14-11-15
Luis Martins

Hi Kay Lun
Thanks for the suggestion. I didn't know that component existed. I'll check it out! :)

2021-04-06 14-11-15
Luis Martins

I think I'll do a workaround:

1) Create a variable to know if the user has to input a Time or not
2) Create a checkbox to give a boolean value to said variable
3) If the checkbox is not selected: I use the input with the default behaviour so that when I don't have nothing selected, or select 12:00 AM, it shows --:-- --.
4) If the checkbox is selected: I use the input but to show 00:00:00 when I select 12:00 AM I change the properties according to this thread: https://www.outsystems.com/forums/discussion/74674/display-000000-as-1200-am-in-input-type-of-time/

I think in this way I can later know if the user introduced a value even if it is 12:00 AM and show the time, OR if the user doesn't put anything I show --:-- -- based on the new variable. 

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi @Luis Martins ,

Outsystems itself does not make the distinction between empty and 00:00.  But HTML does.  So it is possible to know the difference between them by looking at the elements value.

I have created an OML to show what you could do.

  • You can just keep using a variable and input of type time, no need to change anything to that.  
  • You need to keep track in your database of whether a value of 00:00 was entered or nothing.  So add extra boolean to your entity named something like "TimeXIsEmpty"  You need this to know what to show wherever you are showing that information, both in that input when later updating, but also in other places where you are just showing that time as an expression
  • So, in the Save action of the screen where you have that input, the value of the variable will be 00:00, whether user left it empty, or entered time 00:00
  • What you can do in that case, is look at the value property of the input element with a piece of javascript.  That will help you decide the value of the boolean "TimeXIsEmpty" that you store along with the time value in the database
  • When coming back to the screen, since Outsystems doesn't know whether it was empty or not, it would show as --:-- in the input
  • In the first OnRender after the Fetch (*) , you need to fix this if the TimeXIsEmpty boolean is false : again with a small piece of Javascript, setting the value to 00:00 in that case
  • Anywhere else that you are showing this time (like in my demo oml in the list) you can use an if in the expression taking into account that boolean to know if there is a time to be shown or not

Dorine


(*) this is maybe the hardest to get/explain : basically, at the end of the OnAfterFetch, Outsystems is updating the input by giving it a value based on the variable, so if you would put that bit of javascript to fix the non-empty 00:00  in the OnAfterFetch , it would be overwritten by Outsystems after that.

QDR_ZegDekkeOeLoatAtes.oml
2021-09-06 15-09-53
Dorine Boudry
 
MVP

oh, btw, I only looked at a 24-hour time format, maybe you'll need to do little tweaks to this to also work for 12-hour time format.

2021-09-06 15-09-53
Dorine Boudry
 
MVP

new version of the oml : changed the default value of the boolean IsEmpty to true, that way, it starts empty when adding a new record

QDR_ZegDekkeOeLoatAtes.oml
2021-04-06 14-11-15
Luis Martins

Wow! 
Thanks for the detailed explanation, as well as, giving me an example of what I can do!
I like this solution better. For me, at least, it's easier to understand and more intuitive.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.