Show Clock on click of button

Show Clock on click of button

  

Hello,

I want to show clock on click of a button. It should look like this: 


On click of Done button, the pop up is shown which captures the selected time, employee details and it looks like:


Please suggest an solution.

Hello Charul,

What do you expect to be the answer to yor question?

You say: 'I want to do XYZ. Please, suggest a solution'.

The only real answer to this is: Nice! You have a challenge! Go sit in front of your computer and starting programming. That's the solution if you want something done.

But I understand that if you are asking for a solution, probably you don't know how to do it?

In this case, the solution is to learn how to do it. As you are asking in an OutSystems forum, I'll assume you want to do it with OutSystems.

First, you need to learn OutSystems:

Mobile app online training: https://www.outsystems.com/learn/paths/1/becoming-a-mobile-developer/

Web app online training: https://www.outsystems.com/learn/paths/2/becoming-a-web-developer/

I'm pointing you to the courses because if you had done them, you would know how to do what you want to do. Everything you need to do what you to do is there. And much more!

If you already did the courses, and still don't know how to do what you want, I suggest to go through the course again, as the tools you need are there.

If you have a code but it is not working, than show your code, tell how you're trying to do and what is happening different than you expect, and we will be able to help.

What isn't fair is to expect for a ready solution for something you want to do... 

Right?

Cheers

Eduardo Jauch

Eduardo Jauch wrote:

Hello Charul,

What do you expect to be the answer to yor question?

You say: 'I want to do XYZ. Please, suggest a solution'.

The only real answer to this is: Nice! You have a challenge! Go sit in front of your computer and starting programming. That's the solution if you want something done.

But I understand that if you are asking for a solution, probably you don't know how to do it?

In this case, the solution is to learn how to do it. As you are asking in an OutSystems forum, I'll assume you want to do it with OutSystems.

First, you need to learn OutSystems:

Mobile app online training: https://www.outsystems.com/learn/paths/1/becoming-a-mobile-developer/

Web app online training: https://www.outsystems.com/learn/paths/2/becoming-a-web-developer/

I'm pointing you to the courses because if you had done them, you would know how to do what you want to do. Everything you need to do what you to do is there. And much more!

If you already did the courses, and still don't know how to do what you want, I suggest to go through the course again, as the tools you need are there.

If you have a code but it is not working, than show your code, tell how you're trying to do and what is happening different than you expect, and we will be able to help.

What isn't fair is to expect for a ready solution for something you want to do... 

Right?

Cheers

Eduardo Jauch

Thanks a lot for your advice Eduardo. I have completed this task successfully. One problem I am facing is to show the pop up. I am confused with the true false condition of Pop up on the client action of my button. 


Hi,

Can you show the client action code and the condition? 

:)

Eduardo Jauch wrote:

Hi,

Can you show the client action code and the condition? 

:)

These are my screens. In the First screen, I have shown you the properties of the container in which I have a Float Button and an Input variable of Input Type "Time". 



Client Action of my Button is OnClickFloatBtn.


This is my Javascript code. Also, I have set the Pop up to True. 


The problem is I have to hide the input variable because it is not required in my screen. But without it I think we cannot assign the ID to the Button ? Is it possible to hide the input var and continue to show the clock on click of button?

Thanks.


Hi Charul,

I'm not sure I understand you... But I'll give it a try :)

If I understood, you want to click the time picker input to select a time and after this, open a popup. Is that so?

If it is, you need to define a OnChange in the time picker input. In the OnChange action, you execute your JavaScript to click in the hidden button that will open your popup.

To set the button to be hidden, add a style "display:none" to it. This will make the button invisible and it will not use any space in the screen, but it will be there.

Is that what you are trying to do?

If not, could you tell the sequence of events you are thinking? Like "1. User click something. 2. Time picker open and user chose time. 3. Time picker close and open..."

Cheers

Eduardo Jauch

If what you want is to click the button to open the time picker and than after it open the popup, do like this:

1. Keep the input hidden using display:none (this is css, put in a class and give the class to the input style)

2. Do as you're doing, the button action clicks the input with JavaScript.

3. In the input OnChange action click in a hidden button to open your popup.

Because this is mobile and I never did it there, don't know if there is an easier way...

In any case, I wouldn't use a popup in mobile... I would navigate to a new screen and come back after entering data.

Cheers

Eduardo Jauch 

Eduardo Jauch wrote:

If what you want is to click the button to open the time picker and than after it open the popup, do like this:

1. Keep the input hidden using display:none (this is css, put in a class and give the class to the input style)

2. Do as you're doing, the button action clicks the input with JavaScript.

3. In the input OnChange action click in a hidden button to open your popup.

Because this is mobile and I never did it there, don't know if there is an easier way...

In any case, I wouldn't use a popup in mobile... I would navigate to a new screen and come back after entering data.

Cheers

Eduardo Jauch 

I didn't understood the third step. I have done the CSS work and the javascript work. But I think setting display:none doesn't take the ID of that input variable and unfortunately the button does not take the time from clock.

Charul Mathur wrote:

Eduardo Jauch wrote:

3. In the input OnChange action click in a hidden button to open your popup.


I didn't understood the third step. I have done the CSS work and the javascript work. But I think setting display:none doesn't take the ID of that input variable and unfortunately the button does not take the time from clock.

Hi Charul,

If you want to open a popup after selecting the time, you need to "click" in a hidden button/link that will open the PopUp for you. It must be hidden, because you don't want the user to see it. To hidden something, you can add an extended property called "style" (without quotes) to the button/link, and give as value "display:none" (with quotes).

If you need to pass the time to the popup, create a Input Parameter in the Popup, and when you set the button/link that will open the popup, you will define which value to pass to it, that will be the variable where you are storing the time (associated with the time input).

Cheers,
Eduardo Jauch

EDIT:

Please use the information shared by Lester. :)

Hi Eduardo,

Things are a little different in OutSystems 10 Mobile when it comes to Popups...

First you add a Popup control to your screen.  This opens up a screen area where you can start adding your popup controls.

The trick now is that the Popup control has a boolean "ShowPopup" property which you must link to a local variable created on your main screen.  When you want the popup screen to show, you just set your local variable to true and the popup shows.  In the popup, you do your stuff and hit CLOSE or whatever.  You now just set your variable to false and the popup disappears with you left exactly where you were on the main screen.

All local variables on the main screen are shared by the popup.  You need to click the little radio button on the control to show or hide the popup in service studio (like you can do on an IF control)

Charul, I hope you followed this as well.  I didn't read all your post history so this may not be what you were asking about.

Cheers,

Lester

Oh man...

I was just reading this right now: https://success.outsystems.com/Documentation/10/Developing_an_Application/Design_UI/Inputs/Create_and_Use_a_Popup#Example_in_a_Mobile_App

Thanks for the clarification. I'm studying again Mobile (did the training last year and did little with mobile ever since).

Charul,

According to Lester explanation, you only need to change the variable you are using already and the popup will shows up.

As the popup shares the variables of the screen, you don't need to pass anything. You just use the time variable as you want.

I'll avoid answer "mobile" questions till I finish the training again :P haha Thanks :)

Lester Hanger wrote:

Hi Eduardo,

Things are a little different in OutSystems 10 Mobile when it comes to Popups...

First you add a Popup control to your screen.  This opens up a screen area where you can start adding your popup controls.

The trick now is that the Popup control has a boolean "ShowPopup" property which you must link to a local variable created on your main screen.  When you want the popup screen to show, you just set your local variable to true and the popup shows.  In the popup, you do your stuff and hit CLOSE or whatever.  You now just set your variable to false and the popup disappears with you left exactly where you were on the main screen.

All local variables on the main screen are shared by the popup.  You need to click the little radio button on the control to show or hide the popup in service studio (like you can do on an IF control)

Charul, I hope you followed this as well.  I didn't read all your post history so this may not be what you were asking about.

Cheers,

Lester

Hi Lester,

I understood your logic. The problem is my local variable is of input type Time. How can I set it to True ? And how should I link my local variable to the property as you said ?


Hi Charul,

Lester was explaining is that your Popup widget has a ShowPopup property of type Boolean that determines whether it should be displayed on screen or not.

You need to fill this ShowPopup property with a new local boolean variable (I'd name it something like ShowTimePopup, with Boolean Data Type and with Default Value set to False). This way you can dynamically control whether the popup shows or not by changing the value of ShowTimePopup.

On your ClickFloatBtn Screen Action you simply need to assign to variable ShowTimePopup the value True, the platform will react to this change and render the popup.

On the popup logic itself, both the Screen Actions that handle the "Cancel" and "Send" buttons will need to set the variable ShowTimePopup to False so that the platform knows that it needs to hide the popup again. 

Jorge Martins wrote:

Hi Charul,

Lester was explaining is that your Popup widget has a ShowPopup property of type Boolean that determines whether it should be displayed on screen or not.

You need to fill this ShowPopup property with a new local boolean variable (I'd name it something like ShowTimePopup, with Boolean Data Type and with Default Value set to False). This way you can dynamically control whether the popup shows or not by changing the value of ShowTimePopup.

On your ClickFloatBtn Screen Action you simply need to assign to variable ShowTimePopup the value True, the platform will react to this change and render the popup.

On the popup logic itself, both the Screen Actions that handle the "Cancel" and "Send" buttons will need to set the variable ShowTimePopup to False so that the platform knows that it needs to hide the popup again. 

I understood the whole process and I have done this task. I have hidden my pop up. I want to hide my input field which is of Time type and through which my floating button gets ID to show clock. Because the local variable is not to be shown in my screen. 

"Enclose In Container" your Input widget and set the container's Visible property to False. That should do the trick.

Jorge Martins wrote:

"Enclose In Container" your Input widget and set the container's Visible property to False. That should do the trick.


I have already tried this but in this case, when the value is false , the button doesn't takes the ID.  

Gotcha, that has to do with how screens are rendered in mobile...

but... why don't you just use $actions.ClickFloatBtn() to directly call your screen action?

See the documentation for more information.

Jorge Martins wrote:

Gotcha, that has to do with how screens are rendered in mobile...

but... why don't you just use $actions.ClickFloatBtn() to directly call your screen action?

See the documentation for more information.

By using this, how can I show clock then ? As now, I am giving the ID of my input widget to the button. If I dont use the input widget, how the clock will be shown on the click of a button ?

Hi Charul,

I am struggling to follow what it is you are trying to achieve.  It seems you want to make an input widget show or hide under different circumstances.

For this you can create a local boolean variable on your main screen (Eg: ShowInputWidget) and use this in a couple of ways to control your widget visibility:

1. Set the "Visible" property of the widget to be the ShowInputWidget variable or

2. Wrap the widget (and any other controls associated that you want to hide) in an IF (TRUE part).  Set the IF condition to be your ShowInputWidget variable.  Leave the FALSE part blank.

When you want to hide your controls, set ShowInputWidget to True.  When you want to hide the controls, set ShowInputWidget to False.

I apologise if this is not what you are getting at.  Perhaps you could provide a sample set of code or a drawing of what it is you want to achieve.

Regards,

Lester 

Hi Lester,

For what I could understand from Charul question, he wants to do the following:

1. User clicks a button.
2. The action triggered by the button clicks a hidden input associated to a Time variable (Time input), to show the time picker.
3. User chooses the time.
4. The time picker disappear and automatically opens a popup to the user enter other information, with the time picked inside it already.

My understand on how to do this is:

1. Keep the input hidden (display:none)
2. On button click, execute JavaScript to click the input and open the Time picker
3. On closing the TimePicker (or in OnChange like event), set the value of the text field to contain the timer picked and open the PopUp

Cheers,
Eduardo Jauch

Eduardo Jauch wrote:

Hi Lester,

For what I could understand from Charul question, he wants to do the following:

1. User clicks a button.
2. The action triggered by the button clicks a hidden input associated to a Time variable (Time input), to show the time picker.
3. User chooses the time.
4. The time picker disappear and automatically opens a popup to the user enter other information, with the time picked inside it already.

My understand on how to do this is:

1. Keep the input hidden (display:none)
2. On button click, execute JavaScript to click the input and open the Time picker
3. On closing the TimePicker (or in OnChange like event), set the value of the text field to contain the timer picked and open the PopUp

Cheers,
Eduardo Jauch

You get it right Eduardo !! Now my question is, with "display:none", can we still open time picker on the click because when I implemented this, error was shown which said "cannot read property click"?

And by the way I am not "he" but "she" :)


Hi Charul,

If you just add a CSS style (display: none) to that Input widget, can you check on the Simulator if your Time Input element is on the Elements tree? (using Chrome's Dev Tools)

If not, you may need to have your Input widge visible and only hide it (by manipulating the DOM directly) on the OnReady event, as it is possible that the platform's React implementation is probably not even adding the element to the DOM if it is not visible.

Hi Jorge,

I did a small test and even with the input visible, using JavaScript to click or focus does not trigger the time picker...
Didn't tested further.

I tried with click() and focus() and none seems to trigger the time picker.

Cheers,
Eduardo Jauch

Hi!

And sorry Charul... :(

I "assumed" and "assumption" is the mother of... You know :)

Hi Charul,


OK - What you are trying to do is actually very simple - No need to get caught up with setting visibility of widgets etc.  What you do is the following:

1. Add a BOOL variable to your main screen (ShowTimePicker).

2. Add a POPUP to your main screen (TimePopup)

3. Add your UI with timepicker to the popup window.  I'll assume you have a button on there called Done which will execute action DoneClick.

4. Add a TEXT variable to hold your text you want in the detail (DetailText) to the main screen.

5. Add another BOOL variable to the main screen for your second pupup (ShowDetail)

6. Add a second POPUP to the main screen (DetailPopup)

7. Add your UI to the new popup for capturing the detail.  I assume you have a TEXT AREA (multi-line text entry).

8. Now we hook it all together...  On your main screen provide an action that will launch the whole process (CaptureLateDetails).  In this action just set ShowTimePicker to True.

9. In the TimePicker popup, create an action for the Done button to do the following:

   a) Set your DetailText to the details you want to show using NewLine() between lines

Eg: "Late Request" + NewLine() + "Employee Name: Charul Mathur" + NewLine() + "Time: " + FormatDateTime(Timestamp, "HH:mm") + NewLine() + "EmpID: 932205"

   b) Set your ShowTimePicker to False to hide the timepicker control

   c) Set your ShowDetail to True to show the detail screen

10. Finally, on your DetailPopup screen, add an action to hide the popup by setting ShowDetail to False


So what this all does when you run your CaptureLateDetails action is: 

1. Show the time picker popup.  You will slect the time and click Done.

2. DetailText will be populated with the relevant text including the selected time.

3. The TimePicker popup will close and the DetailPopup will open with all the relevant text already in the control (coz it is bound to the variable).

4. You will edit the text and press Done to close the popup, leaving the edited text still in your DetailText variable.


I'm sure this is what you are trying to do and the above should do it.


The circles we have been going through talking about making controls visible and hidden buttons etc are all because of the work-arounds required to get this type of thing to work on previous versions of OutSystems.  I'm afraid OutSystems is still very much in its infancy and as good as it is, is still way behind where it needs to be.  The type of workarounds that were mentioned are something you will have to live with for a long time to come but there are always ways to do what you want (or hopefully close to) and things improve all the time.  The latest mobile stuff is a HUGE improvement over previous versions and has lots of things that now work properly instead of needing workarounds.  You will discover ways of doing things that work for you and will use those all the time until you suddenly see a new way and you'll wonder how you managed without it.  Enjoy.

PS What are you using for your TimePicker?

I see there is a Calendar control in the Mobile Patterns extension but it looks a bit buggy when allowing Time to be set (month overwrites time).  I'm not quite sure how to drive it properly so perhaps I'm being silly.

I tried to create a simple demo for you but things got confusing at not being able to show the time picker so I thought I'd just describe the "simple" process involved so you could see step by step.

Lester Hanger wrote:

PS What are you using for your TimePicker?

I see there is a Calendar control in the Mobile Patterns extension but it looks a bit buggy when allowing Time to be set (month overwrites time).  I'm not quite sure how to drive it properly so perhaps I'm being silly.

I tried to create a simple demo for you but things got confusing at not being able to show the time picker so I thought I'd just describe the "simple" process involved so you could see step by step.

For time picker, I have been using an input widget of input type "Time" which displays the clock. It should be hidden but also want value from that. 


Eduardo Jauch wrote:

Hi Jorge,

I did a small test and even with the input visible, using JavaScript to click or focus does not trigger the time picker...
Didn't tested further.

I tried with click() and focus() and none seems to trigger the time picker.

Cheers,
Eduardo Jauch

But it does trigger the Date picker... as Charul managed to do that.


Jorge Martins wrote:

But it does trigger the Date picker... as Charul managed to do that.

Hi Jorge,

Forget it.
I used a "test" application and the action had other code that was raising an exception before reaching the JavaScript.

It works as it should :)


Solution

Here is an example on how to do what was suggested (I had to try...)

In fact, using display:none is preventing the trigger of the Time Picker...
I put it inside a container and set dimensions of the container to 0 with overflow hidden and it worked in mobile (doe snot work in preview, thou).

Cheers,
Eduardo Jauch

Solution

Hi Eduardo,

Its working..:)

may be due to the style added in the container..rest all work I had already implemented.

Thanks a lot guys for helping me and taking out time to explain everything.

Hi Charul,

Nice. Please, just pick one of the correct answers that answer the initial question and mark it as solution, to help keep the forum easier to find solutions to similar questions :)

Cheers

Eduardo Jauch

Hello,

I am again getting a problem in showing clock. The solution was working correctly in Android devices but it failed in IPhone device. Please help.

Hi Cherul.

Which part of the solution fails in the iPhone?

Cheers,
Eduardo Jauch

Eduardo Jauch wrote:

Hi Cherul.

Which part of the solution fails in the iPhone?

Cheers,
Eduardo Jauch

When I clicked on the float button which shows clock in Android device but it is not showing in iOS devices. I have followed the same process the way you guys guided me but why it is not working in iPhones, I don't understand. Please help.