Here's a tip on styling a checkbox on an edit form. Here's how it looks like:
Steps:
Step 1: At the fields page, uncheck (hide) the checkbox field, from the Edit form (leave it for List Page. (My field is ppSandbox for the codes below) .
Step 2: Go to the Designer page, create code snippet named "tag_flipswitch_ppsandbox" and insert at the location which should be occupied by your checkbox field:
echo '<b>Sandbox</b>
<label class="switch">
<input type="checkbox" id="my_sandbox" name="my_sandbox">
<span class="slider round"></span>
</label>
';
Note: At the designer page, click on the code snippet and set Padding Left = 10px, Bottom = 15px, if your field is on left alignment,
or other values to adjust the alignment accordingly.
Step 3: Click on the cell that contains the code snippet "tag_flipswitch_ppsandbox" and insert the Custom CSS:
Note: if you have more than one custom checkbox, you only need to insert the custom CSS once. Otherwise, they will all be merged with duplicates CSS codes in a custom CSS file (located at \styles\pages folder), This could interfere with one another, when you change one and not the other.
/* start of custom checkbox - insert only once even you have multiple custom checkboxes */
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* End of Custom Checkbox */
Step 4: Set the proxy value from the DB field to be passed to Javascript on load
// Ref: https://xlinesoft.com/phprunner/docs/setproxyvalue.htm
$pageObject->setProxyValue("proxySandbox",$values["ppSandbox"]);
Step 5: Javascript onload event
// Start: Custom checkbox
// Note: Reference; https://xlinesoft.com/phprunner/docs/add_custom_field_to_form.htm
// 1. Get proxy value for DB fieldname (ppSandbox), set in 'process record values event' earlier.
// 2. And copy the value to custom input 'my_sandbox' created in the code snippet.
//
// Use javascript document.getElementById to handle custom input field (cannot use phpr object class as we insert input field my_sanbox manually at Designer Page)
// Example of phpr field objects :
// var ctrlppSandbox = Runner.getControl(pageid, 'ppSandbox');
if (proxy['proxySandbox'] == 1)
{ document.getElementById("my_sandbox").checked = true; }
else
{ document.getElementById("my_sandbox").checked = false; }
$('#my_sandbox').on('change', function() {
var ctrlmySandbox_checked = document.getElementById("my_sandbox").checked;
alert("After checkbox has been changed: " + ctrlmySandbox_checked);
});
// Using phpr page obbject class: pass the custom input field value (my_sandbox)
// on the edit form to "before record update" event as a "REST" value when we click Save button
this.on('beforeSave', function(formObj, fieldControlsArr, pageObj) {
var val = document.getElementById("my_sandbox").checked;
formObj.baseParams['my_sandbox'] = val;
alert("checkbox value bf click save button: " + val);
});
// End custom Checkbox
Step 6: Get the REST Posted custom field value to the DB field in before record update event.
// echo "Before copy custom value to field value => ";
// echo "
old_values array => ".json_encode($old_values);
// echo "
New values array => " .json_encode($values);
if (isset($_REQUEST["my_sandbox"]))
{
// echo "
Sandbox: REST value (string value) " . $_REQUEST["my_sandbox"]. " | field value :".$values["ppSandbox"];
if ($_REQUEST["my_sandbox"] == "true")
{
$values["ppSandbox"] = 1;
// echo "
=> Set checkbox field value with REST value=" . $_REQUEST["my_sandbox"]. " | new field value=" .$values["ppSandbox"] ;
}
else
{
$values["ppSandbox"] = 0;
// echo "
=> Set checkbox field value with REST value=" . $_REQUEST["my_sandbox"]. " | DB Value=" .$values["ppSandbox"] ;
}
}
// echo "
After Setting field value =>";
// echo "
Old field array values => ".json_encode($old_values) ."
New field array values =>" .json_encode($values);
//////////////////////////////////////////////////
Step 7: That's it. Now you have a nice custom style checkbox.
For List Page:
- Go to designer page, select list page, insert the code snippet " tag_flipswitch_ppsandbox"for checkbox and remove the existing one.
- Insert the Custom CSS from
step 3 above.
- Add this to before record processed event:
$pageObject->setProxyValue("proxySandbox",$data["ppSandbox"]);
return true;
4. Add this to Javascript on load to disable the checkbox:
if (proxy['proxySandbox'] == 1)
{ document.getElementById("my_sandbox").checked = true; }
else
{ document.getElementById("my_sandbox").checked = false; }
document.getElementById("my_sandbox").disabled = true;