locked
Adding realtime clock control in Lightswitch html client RRS feed

  • Question

  • Hi, 

    I just want to know if anyone has a sample how to add realtime clock in Lightswitch html client, I want to add these in my home page. i tried to search for some javascript for realtime click but can't make it work. 

    Trying to convert this Html file into a lightswitch postRender code. Please kindly help. Many thanks

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Display Date and Time in Javascript</title>
            <script type="text/javascript" src="date_time.js"></script>
        </head>
        <body>
                <span id="date_time"></span>
                <script type="text/javascript">window.onload = date_time('date_time');</script>
        </body>
    </html>

    many thanks

    Wednesday, August 21, 2013 7:25 PM

Answers

  • Hi,

    I have a method to show real-time in the screen by using some javascript codes. The steps:

    1.Create a LightSwitch Html Client project. Create the tables and screens you need. 

    2.Open the screen which you want to show the real-time in designer. Create a DataItem and add it to screen. Change the type of control to Text. Then edit the Post Render Code. Your Visual Studio will generate a function in behind code. Show in image:

    3.Add code in the function:

    myapp.BrowseInfoes.TimeProperty_postRender = function (element, contentItem) {
        // Write code here.
        this.setInterval(
            function(){
                var currentTime = new Date();
                $(element).text(currentTime.toLocaleTimeString());
            }, 
            1000
            );
    };
     OK! Finish!


    The result:

    I think the important point in this issue is the method setInterval(). Another useful method is setTimeout(). But they are different. I share with you two articles. One is for these two methods with some samples:

    http://www.w3schools.com/js/js_timing.asp

    Another one is for some javascript sample code in Lightswitch html client projects:

    http://code.msdn.microsoft.com/JavaScript-for-LightSwitch-f1ec057c/sourcecode?fileId=79279&pathId=1116478624

    May it is helpful to you.

    Yao


    • Edited by yao5461 Thursday, August 22, 2013 6:55 AM
    • Proposed as answer by ADefwebserver Thursday, August 22, 2013 12:43 PM
    • Marked as answer by Janx2av Monday, August 26, 2013 4:00 PM
    Thursday, August 22, 2013 6:53 AM

All replies

  • Hi,

    I have a method to show real-time in the screen by using some javascript codes. The steps:

    1.Create a LightSwitch Html Client project. Create the tables and screens you need. 

    2.Open the screen which you want to show the real-time in designer. Create a DataItem and add it to screen. Change the type of control to Text. Then edit the Post Render Code. Your Visual Studio will generate a function in behind code. Show in image:

    3.Add code in the function:

    myapp.BrowseInfoes.TimeProperty_postRender = function (element, contentItem) {
        // Write code here.
        this.setInterval(
            function(){
                var currentTime = new Date();
                $(element).text(currentTime.toLocaleTimeString());
            }, 
            1000
            );
    };
     OK! Finish!


    The result:

    I think the important point in this issue is the method setInterval(). Another useful method is setTimeout(). But they are different. I share with you two articles. One is for these two methods with some samples:

    http://www.w3schools.com/js/js_timing.asp

    Another one is for some javascript sample code in Lightswitch html client projects:

    http://code.msdn.microsoft.com/JavaScript-for-LightSwitch-f1ec057c/sourcecode?fileId=79279&pathId=1116478624

    May it is helpful to you.

    Yao


    • Edited by yao5461 Thursday, August 22, 2013 6:55 AM
    • Proposed as answer by ADefwebserver Thursday, August 22, 2013 12:43 PM
    • Marked as answer by Janx2av Monday, August 26, 2013 4:00 PM
    Thursday, August 22, 2013 6:53 AM
  • Thanks Yao, perfect it's working fine just what I needed. Thanks again.
    Monday, August 26, 2013 4:01 PM
  • I've read something about a UI clock control, seems to satisfy your requirement.


    ondonClock.DisplaySystemTime = true;

    tokyoClock.Offset = new TimeSpan(7, 0, 0);newYorkClock.Offset = new TimeSpan(-6,0,0);



    Thursday, January 9, 2014 2:52 AM