Announcement

Collapse
No announcement yet.

Create Custom Button Next To Form Field

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Create Custom Button Next To Form Field

    Hi All,

    Please kindly advice how can i create a button next to my form field to get latest system time & date. This application is to capture user job start and job ended time & date.

  • #2
    Hi handsprince,

    let me try to explain one way to do it:

    1. Create a form with one element: A Date/Time field named 'date_of_last_Button_click'
    That's where the button will insert the current date/time.

    2. Create a button on this form to place the code into. That has to happen, when clicked. We're using a button of AJAX type.
    The code in this button will be:
    {date_of_last_Button_click} = date("Y-m-d H:i:s");
    Thus a click onto the button will insert the current date/time into that field.

    Example:

    scriptcase_button_in_form_1.jpg



    3. Run the form and get the code of that button, which now is within the toolbar of the form.
    Now get the HTML code to execute when you click onto that button:
    I'm using Chrome, therefore I right click onto the button to get the window to examine the code.
    There we copy the part of the <a href ... > ... </a> code into the clipboard.


    scriptcase_button_in_form_2.JPG




    4. Create a new field 'click_me' (type LABEL) and place it onto the form where you want to have the new button. Let's say right of the date/time field.
    (Make sure that the label of 'click_me' field is empty.)


    5. Create a ON LOAD event in the form and tell 'click_me' which HTML-code to show. In fact it is the code which we copied into the clipboard:

    {click_here} = '<a href="javascript: sc_btn_set_date_time()" id="sc_set_date_time_top" onclick="sc_btn_set_date_time(); return false;" class="scButton_default" style="vertical-align: middle; display:inline-block;">set_date_time</a>' ;


    6. Polish: Remove the original button from the toolbar - do NOT delete it, cause the code is still needed for execution.


    7. Now the new form has a button right to the field and if you click onto the button that field will show the current date/time.

    scriptcase_button_in_form_4.JPG



    I hope this helps to have a button everywhere on a form.

    Gunter Eibl
    Munich, Germany





    Attached Files
    Gunter Eibl
    email@GunterEibl.de

    asdw.de - Scriptcase & Open Source projects (German/English)
    SECI.solutions - Solutions for IT-distribution & reseller (German)
    GunterEibl.de - About me (German)

    Comment


    • #3
      Good post - clear explanation.

      Comment


      • #4
        Hi GunterEibl,

        Thanks for your guidance i iwll try and update you again.



        Originally posted by GunterEibl View Post
        Hi handsprince,

        let me try to explain one way to do it:

        1. Create a form with one element: A Date/Time field named 'date_of_last_Button_click'
        That's where the button will insert the current date/time.

        2. Create a button on this form to place the code into. That has to happen, when clicked. We're using a button of AJAX type.
        The code in this button will be:
        {date_of_last_Button_click} = date("Y-m-d H:i:s");
        Thus a click onto the button will insert the current date/time into that field.

        Example:

        [ATTACH=CONFIG]n70485[/ATTACH]



        3. Run the form and get the code of that button, which now is within the toolbar of the form.
        Now get the HTML code to execute when you click onto that button:
        I'm using Chrome, therefore I right click onto the button to get the window to examine the code.
        There we copy the part of the <a href ... > ... </a> code into the clipboard.


        [ATTACH=CONFIG]n70486[/ATTACH]




        4. Create a new field 'click_me' (type LABEL) and place it onto the form where you want to have the new button. Let's say right of the date/time field.
        (Make sure that the label of 'click_me' field is empty.)


        5. Create a ON LOAD event in the form and tell 'click_me' which HTML-code to show. In fact it is the code which we copied into the clipboard:

        {click_here} = '<a href="javascript: sc_btn_set_date_time()" id="sc_set_date_time_top" onclick="sc_btn_set_date_time(); return false;" class="scButton_default" style="vertical-align: middle; display:inline-block;">set_date_time</a>' ;


        6. Polish: Remove the original button from the toolbar - do NOT delete it, cause the code is still needed for execution.


        7. Now the new form has a button right to the field and if you click onto the button that field will show the current date/time.

        [ATTACH=CONFIG]n70488[/ATTACH]



        I hope this helps to have a button everywhere on a form.

        Gunter Eibl
        Munich, Germany




        Comment


        • #5
          HI Gunter Eibl,

          Everything working fine except the positioning, may i know how can you align the button to next to the field?

          Comment


          • #6
            Hi handsprince,

            I created a block with two colomns and placed both fields into.

            scriptcase_button_in_form_5.JPG


            positioning of the fields within the block:


            scriptcase_button_in_form_5a.JPG


            Gunter
            Gunter Eibl
            email@GunterEibl.de

            asdw.de - Scriptcase & Open Source projects (German/English)
            SECI.solutions - Solutions for IT-distribution & reseller (German)
            GunterEibl.de - About me (German)

            Comment


            • #7
              Hi GunterEibl,

              Thanks for your guidance, it's work.


              Originally posted by GunterEibl View Post
              Hi handsprince,

              I created a block with two colomns and placed both fields into.

              [ATTACH=CONFIG]n70502[/ATTACH]


              positioning of the fields within the block:


              [ATTACH=CONFIG]n70503[/ATTACH]


              Gunter

              Comment


              • #8
                Hi Gunter,

                May i know how can i disable the button based on if-else condition?

                Comment


                • #9
                  works fine in a form!

                  Does not seem to work with a button group in a form, neither in a GRID

                  any suggestions?

                  Comment


                  • #10
                    First the whole setup for a button next to a field is not something you should do with scriptcase. Yes it is possible as described above (I did not tried) but a little complex.
                    This all is common when you writes code in PHP / Java/ Bootstrap without using Scriptcase. But because I want to do RAD with less code therefore I use Scriptcase. In principle I never look the code deployed. An easy escape (but less nice, i agree) is to have an Ajax-event "on click" on this field. Use in the helpsettings of the datefield the hint to declare what happens when clicking.
                    When using blocks to get it lined-up is an option, but in Scriptcase you are getting limits (or have to use dummy blocks) in your lay-out.
                    I you want to go this way I can help you.

                    Regards Bert Steinebach, Zwolle NL

                    Comment


                    • #11
                      HI Bert Steinebach,

                      Please advice.

                      Originally posted by ctmservice View Post
                      First the whole setup for a button next to a field is not something you should do with scriptcase. Yes it is possible as described above (I did not tried) but a little complex.
                      This all is common when you writes code in PHP / Java/ Bootstrap without using Scriptcase. But because I want to do RAD with less code therefore I use Scriptcase. In principle I never look the code deployed. An easy escape (but less nice, i agree) is to have an Ajax-event "on click" on this field. Use in the helpsettings of the datefield the hint to declare what happens when clicking.
                      When using blocks to get it lined-up is an option, but in Scriptcase you are getting limits (or have to use dummy blocks) in your lay-out.
                      I you want to go this way I can help you.

                      Regards Bert Steinebach, Zwolle NL

                      Comment


                      • #12
                        Hi handsprince,

                        If you have a date field and you want to update it with the system date on the moment you want,

                        Click Ajax Fields:

                        Choose: New Ajax Event -> on click

                        Create event:

                        And write php code:

                        {datum} = date("Y-m-d");

                        That's it...

                        Every time you click on the field the date becomes the system date. Of course you have to click the INSERT (BEWAREN) buttom in the form after you agree with all you changed.

                        Or otherwise write this code in the AJAX event:

                        $actualdate = date("Y-m-d");
                        $idx = {id}; //this is the unique id of your record

                        sc_exec_sql ("UPDATE <tablename> SET <name of the field> = '$actualdate' where id = '$idx');

                        Then it is updated in then moment you click.

                        Perhaps this is not clear for the user. So I would extend the field with a hint or pop-up:

                        This is on the bottom of your datefield. Or perhaps do something with colours. (when clicking it becomes green, and after i.e. 10 minutes and a reload it becomes red)




                        Regards, Bert Steinebach, Zwollel NL
                        Last edited by ctmservice; 10-31-2016, 04:53 PM.

                        Comment


                        • #13
                          Hello GunterEibl,

                          This post was GREAT. I would like to know if it is possible to have the newly created button to open a Form in a Model window (iframe) of any size and position. I see jQuery JBox and was wondering if I could use it to do this.

                          There are times when I want to open up a new window to a Form, enter data and then return back to the previous form.

                          Comment


                          • #14
                            Hello JaunLukePicard,

                            I'm not 100% sure if this would be the solution for your question.

                            But if you're looking for a modal window which can take any website (including a Scriptcase form) you might look for library which is already included in Scriptcase and which will also be deployed to production environments automatically: jquery_thickbox.

                            Some time ago I had a similar issue to solve and published a BLOG how to do this:

                            https://asdw.de/application-mit-thic...zurueck-geben/

                            Short description:
                            We had a form where we wanted a modal form to open (on click).
                            In this modal form we wanted to select a number of email receiptiants via a multi select.
                            When this is done (OK-button clicked) the result is written into the proper field of the original form, a change event is fired and the modal form is closed.

                            Unfortunately this BLOG for Scriptcase is in German, but maybe it will help you anyway.

                            Regards
                            Öffnen einer weiteren Scriptcase-Applikationals Popup via thickbox um Daten einzugeben und dann in die ursprüngliche Eingabe-Form zurück zu schreiben
                            Gunter Eibl
                            email@GunterEibl.de

                            asdw.de - Scriptcase & Open Source projects (German/English)
                            SECI.solutions - Solutions for IT-distribution & reseller (German)
                            GunterEibl.de - About me (German)

                            Comment


                            • #15
                              Hello Gunter, I was able to get the Thickbox to display the form I wanted. That's GREAT! I do have one question. If I want to set the position of the Thickbox as well as its height how would I go about doing that. Could I add '&top' and/or '&left' to the code?

                              Comment

                              Working...
                              X