2. PHPRunner Tips and Tricks
  3. Change Custom Button Color and Icon on the fly
This topic is locked

Change Custom Button Color and Icon on the fly

 		12/16/2019 3:45:01 PM
PHPRunner Tips and Tricks
A
 acpan author

[Note: Please refer to the improved and revised version below, which does not need to use Chrome to find the object id]
Here's a trick to change the custom button color and icon. Eg. a button to turn on and off "Call Recording".
When button is clicked, the Server Event will update database table, eg. set the field to 1 (On) or 0 (Off);

The client After event will then change the color and icon of the Call Recording Button.
To do so, open the developer tool on Chrome, and click the button, then on the right panel, locate the id of the button.



Add the events to the button Tri-Part Events as follows:
Server Event:



// Do your database query and set is_recording variable and pass it to the After Client Event.

$strSQL = "SELECT is_recording from accounts WHERE id = ".$_SESSION["user_id"];

$rs = DB::Query($strSQL);

DB::Exec($strSQL);

while( $data = $rs->fetchAssoc() )

{

$result["is_recording"] = $data["is_recording"];

}


Client After Event:


var is_recording = result["is_recording"];
if (is_recording == 0)

{

var button_label =" Call Record On";

$("span[data-itemid=is_recording_button]").find("a").text(button_label);

$("#Recording_Button_7").removeClass('btn btn-danger fa fa-remove').addClass('btn btn-success fa fa-music');

}

else

{

var button_label =" Call Record Off";

$("span[data-itemid=is_recording_button]").find("a").text(button_label);

$("#Recording_Button_7").removeClass('btn btn-success fa fa-music').addClass('btn btn-danger fa fa-remove');

}


ACP
Sergey Kornilov admin 12/17/2019

Thank you for posting!
My suggestion is to use findItem() API and "Item ID" provided by Page Designer instead of "#Recording_Button_7" which can change in case of inline Add/Edit or if page is popup.

https://xlinesoft.com/phprunner/docs/finditem().htm
It also returns the jQuery object so the rest of code stays the same. So instead of

$("#Recording_Button_7").removeClass('btn btn-danger fa fa-remove').addClass('btn btn-success fa fa-music');


it will be

pageObj.findItem("is_recording_button").removeClass('btn btn-danger fa fa-remove').addClass('btn btn-success fa fa-music');
A
 		acpan author 12/17/2019

Thanks Sergey for the tip over trick! I was just thinking how nice if PHPRunner can find the id itself!
Note: pageObj.findItem does not work for custom button but pageObj.getItemButton works.

I suppose findItem API is for the default page objects(like form elements) where as getItemButton is specially for custom button.
Here's the revised version (i am keeping the old version on the first post so that people who always use chrome to find the object id, can see the automatic way of finding the id here without using Chrome.
=================================
Purpose: A custom button, when clicked, change color, text label, and icon. During query and update of database, it will also disable the button.
Here's how it looks like:



Step 1: Find the custom button ID from Page Designer:






Step 2: Setup the Tri-Part events for the custom button:


Client Before Event:



$("span[data-itemid=is_recording_button]").find("a").text(" Updating ...");

pageObj.getItemButton("is_recording_button").removeClass('btn btn-success btn-danger fa fa-remove fa-music').addClass('btn btn-secondary fa fa-refresh disabled');


Server Event:



// Do your database update

$strSQL = "UPDATE accounts SET is_recording = IF(is_recording=1, 0, 1) WHERE `id` = ".$_SESSION["user_id"];

$debug_sql = $strSQL;

DB::Exec($strSQL);

if ( DB::LastError() )

{

echo DB::LastError().": ".$strSQL;

}
// Check DB to get the status updated and pass to the Client After event.

$strSQL = "SELECT is_recording from accounts WHERE id = ".$_SESSION["user_id"];

$rs = DB::Query($strSQL);

DB::Exec($strSQL);

while( $data = $rs->fetchAssoc() )

{

$result["is_recording"] = $data["is_recording"];

}


Client After Event:



var is_recording = result["is_recording"];

if (is_recording == 0)

{

$("span[data-itemid=is_recording_button]").find("a").text(" Call Record On");

pageObj.getItemButton("is_recording_button").removeClass('btn btn-danger fa fa-refresh fa-remove disabled').addClass('btn btn-success fa fa-music');

}

else

{

$("span[data-itemid=is_recording_button]").find("a").text(" Call Record Off");

pageObj.getItemButton("is_recording_button").removeClass('btn btn-success fa fa-refresh fa-music disabled').addClass('btn btn-danger fa fa-remove');

}


Enjoy!
ACP