Create Custom Button Next To Form Field

[handsprince]

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.

[jack123]

Good post - clear explanation.

[handsprince]

Hi [B]GunterEibl,

Thanks for your guidance i iwll try and update you again.[/B]

@GunterEibl

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

[handsprince]

HI Gunter Eibl,

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

[GunterEibl]

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

[handsprince]

Hi [B]GunterEibl,

Thanks for your guidance, it’s work.[/B]

@GunterEibl

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

[handsprince]

Hi Gunter,

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

[nonkelmike]

works fine in a form!

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

any suggestions?

[ctmservice]

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

[handsprince]

HI Bert Steinebach,

Please advice.

@ctmservice

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

[ctmservice]

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

[JaunLukePicard]

Hello [B]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.[/B]

[JaunLukePicard]

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?

[GunterEibl]

Hello JaunLukePicard,

I had a glance into the code of Thickbox.
As far as I can see there is no URL parameter implemented for the position.
It seems to be hard coded to position into the mid of ‘window’.

However:
Thickbox is open source and you can find the code at: http://codylindley.com/thickbox/
Thus you could add this function.

Regards

[JaunLukePicard]

Thank you Gunter/ I will check that out.

[johnmebao]

@GunterEibl

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

this solution is great to create personalized buttons, thank you very much for sharing the knowledge.

[handsprince]

HI,

I tried following the steps to create a new button after upgrade scriptcase version but i was unable to find the “a href” code anymore. Now the code showing like below.

New button - {Depart} = ‘<a id=“sc_Depart1_top” onclick=“scBtnFn_Depart1(); return false;” class=“scButton_default” style=“vertical-align: middle; display:inline-block;”>Depart1</a>’;

Old button - {ClickIn} = ‘<a href=“javascript: sc_btn_sc_btn_0()” id=“sc_sc_btn_0_top” onclick=“sc_btn_sc_btn_0(); return false;” class=“fileinput-button fileinput-button-padding scButton_default” style=“vertical-align: middle; display:inline-block;”>Job Start</a>’;

The biggest difference for these buttons is for old button i able to execute my ajax code when i hide the actual button from toolbars, but for the new button, it won’t execute my ajax code when i hide the new button from the toolbar. Anyone can give me hints on how to solve this?

[handsprince]

HI,

I tried following the steps to create a new button after upgrade scriptcase version but i was unable to find the “a href” code anymore. Now the code showing like below.

New button - {Depart} = ‘<a id=“sc_Depart1_top” onclick=“scBtnFn_Depart1(); return false;” class=“scButton_default” style=“vertical-align: middle; display:inline-block;”>Depart1</a>’;

Old button - {ClickIn} = ‘<a href=“javascript: sc_btn_sc_btn_0()” id=“sc_sc_btn_0_top” onclick=“sc_btn_sc_btn_0(); return false;” class=“fileinput-button fileinput-button-padding scButton_default” style=“vertical-align: middle; display:inline-block;”>Job Start</a>’;

The biggest difference for these buttons is for old button i able to execute my ajax code when i hide the actual button from toolbars, but for the new button, it won’t execute my ajax code when i hide the new button from the toolbar. Anyone can give me hints on how to solve this?

[GunterEibl]

Hi handsprice,

you’re right. Scriptcase did change the way they handle this.
We bumped into this during a coaching at a customer over here some weeks ago.

In fakt, Scriptcase now calls a JS function, where they check if the button is visible.

You can bypass this by changing the fuction which is called in the onclick event.

Sample:
replace onclick="scBtnFn_button_link() with onclick="sc_btn_button_link()

Or in your case you should change scBtnFn_Depart1() to something like sc_btn_Depart1()

I hope this will help you.

Sincerely

Gunter Eibl

[cliff030]

I know this I not the ideal way of doing this but until SC creates option to add buttons next to field this is the next best thing. While using default button coding process.

I create a normal SC button as AJAX then create my PHP code needed. Then I run the app and use Chrome to inspect code of button. I just copy the <a link which the key here is the JavaScript onclick that is called on the button. Then I go to the field I want the button next to and add code to the Help Description area as type “Text”. Once you have copied the link SC created you can hide the button on insert and update. Even though SC is hiding the button it still creates the JS function that calls your PHP ajax code.

Example of html copied from a button to put into help desc:
<a id=“sc_MyNewButton_top” title=“Run My Code” onclick=“scBtnFn_ MyNewButton(); return false;” class=“scButton_default” style=“vertical-align: middle; display:inline-block;”><i class=“fas fa-external-link-alt”></i></a>

You can create link as text or I used front awesome as icon in button.
<i class=“fas fa-external-link-alt”></i>

Hope this help someone else until SC creates a button option to be added next to fields or in their own field.