Hi
I would like to create a dynamic field in the invoices module.
I would like a drop down that says yes/no (this has already been created) however when yes is selected I would like a text field to appear underneath the drop down box where users are able to enter either text or numbers how do I go about doing this? I have had a look at various different forums but cant seem to figure it out.
Any help would be greatly appreciated.
Thanks.
If you are familiar with php and javascript you can do it with a custom logic hook.
Find and follow the manual on how to create a logic hook and where to place the files. In your logic hook (in php) you just have to echo the javascript part that will do what you are looking for.
Sorry I have only just started working with SuiteCRM and PHP would you be able to offer any additional guidance?
Thanks.
Do you also need javascript support?
I can try to illustrate a solution in the week-end because I am away at a client’s tomorrow.
In the meantime have alook here:
https://github.com/audoxcl/SugarCRMLogicHooks
There is a sample logic hook that can easily be packaged and installed in SuiteCRM
Your code will be much simpler because you just have to output the javascript with an echo statement.
With respect to the javascript it should be at most 10/15 lines of code.
Here you can find an example:
https://stackoverflow.com/questions/13925845/javascript-show-hide-based-on-dropdown
Thank you for your help with this. I have had a look at the documentation that you have provided however it doesn’t really make sense to me as i’m new to PHP I don’t really understand the code.
Here are the instructions, but they probably require that you adjust the code to make it suite your installation.
My code works if you create from scratch the following two fields from Admin->Studio>Invoices:
(follow the screenshots exactly):
Create Dropdown field:
then:
Now create Text field:
then:
Once done proceed to modify the layout of the Edit View:
Now you are ready to add some php code:
Look for a file called: custom/modules/AOS_Invoices/views/view.edit.php
if it doesn’t already exist then create it and paste the following code inside it:
class AOS_InvoicesViewEdit extends ViewEdit
{
public function display(){
parent::display();
$javascript = <<<'EOT'
<script type="text/javascript">
window.onload=function(){
function toggle_extra_field() {
if(xx_extra_field.value == 0) {
document.querySelector('div[data-label="LBL_DFLH_EXTRA_FIELD"]').style.display='none';
document.querySelector('div[field="dflh_extra_field_c"]').style.display='none';
}
if(xx_extra_field.value == 1) {
document.querySelector('div[data-label="LBL_DFLH_EXTRA_FIELD"]').style.display='';
document.querySelector('div[field="dflh_extra_field_c"]').style.display='';
var xx_extra_field_sub = document.getElementById('dflh_extra_field_c');
xx_extra_field_sub.value = '';
}
}
var xx_extra_field = document.getElementById('dflh_bool_show_extra_field_c');
toggle_extra_field();
xx_extra_field.addEventListener('change', toggle_extra_field, false);
}
</script>
EOT;
echo $javascript;
exit;
}
}if it already exist you should open it and look for a line with:
public function display(){or
public function display()
{or
function display(){or
function display()
{if you can’t find it then, after the lines
class AOS_InvoicesViewEdit extends ViewEdit
{
paste the following code:
public function display(){
parent::display();
$javascript = <<<'EOT'
<script type="text/javascript">
window.onload=function(){
function toggle_extra_field() {
if(xx_extra_field.value == 0) {
document.querySelector('div[data-label="LBL_DFLH_EXTRA_FIELD"]').style.display='none';
document.querySelector('div[field="dflh_extra_field_c"]').style.display='none';
}
if(xx_extra_field.value == 1) {
document.querySelector('div[data-label="LBL_DFLH_EXTRA_FIELD"]').style.display='';
document.querySelector('div[field="dflh_extra_field_c"]').style.display='';
var xx_extra_field_sub = document.getElementById('dflh_extra_field_c');
xx_extra_field_sub.value = '';
}
}
var xx_extra_field = document.getElementById('dflh_bool_show_extra_field_c');
toggle_extra_field();
xx_extra_field.addEventListener('change', toggle_extra_field, false);
}
</script>
EOT;
echo $javascript;
exit;
}
If yo ahve already created the two fields yu have to adjust the code I provided with the names of the fields you have created. Please try exacty as I instruted you and post back any issues.
Hi
Thank you for going above and beyond to help me its greatly appreciated. I have tried following the instructions however the “pop up” field is always displayed. Below is the PHP code I have put in the view.edit.php file.
Under custom/modules/AOS_Invoices/ there was no views folder so i created it and added the view.edit.php file in. I have also run a rebuild and repair however the field did not change.
class AOS_InvoicesViewEdit extends ViewEdit
{
public function display(){
parent::display();
$javascript = <<<'EOT'
<script type="text/javascript">
window.onload=function(){
function toggle_extra_field() {
if(xx_extra_field.value == 0) {
document.querySelector('div[data-label="LBL_DEFECT_NUMBER"]').style.display='none';
document.querySelector('div[field="defect_number_c"]').style.display='none';
}
if(xx_extra_field.value == 1) {
document.querySelector('div[data-label="LBL_DEFECT_NUMBER"]').style.display='';
document.querySelector('div[field="defect_number_c"]').style.display='';
var xx_extra_field_sub = document.getElementById('defect_number_c');
xx_extra_field_sub.value = '';
}
}
var xx_extra_field = document.getElementById('defect_number_required_c');
toggle_extra_field();
xx_extra_field.addEventListener('change', toggle_extra_field, false);
}
</script>
EOT;
echo $javascript;
exit;
}
}Have you also included the php open and close tags?:
<?php
// your code goes below this line
?>
In any case the code I shared works only if you create the two fields in studio as I instructed you (follow exactly the instructions I provided with the screenshots.
Otherwise you need to share the following screenshots:
. dropdown field
. extra field
. source code (html) of suitecrm when you are in edit view of an invoice. Only the part with the two fields (you can get this rightclicking each of the fields and select inspect, then expand the relevant parts by clicking on “+”) Alternatively you can right click anywhere and select “view page source”)
Hi
I did create my own custom fields and try changing the code to what I think would be correct. I am unable to insert images for some reason however below are the field details.
Dropdown
Type - DropDown
Field Name - defect_number_required_c
Display Label - Defect Number Required
System Label - LBL_DEFECT_NUMBER_REQUIRED
Textfield
Type - Textfield
Field name - defect_number_c
Display Label - Defect Number
System Label - LBL_DEFECT_NUMBER
html source code
Dropdown
Textfield
try this:
<?php
class AOS_InvoicesViewEdit extends ViewEdit
{
public function display(){
parent::display();
$javascript = <<<'EOT'
<script type="text/javascript">
window.onload=function(){
function toggle_extra_field() {
if(xx_extra_field.value == 'No') {
document.querySelector('div[data-label="LBL_DEFECT_NUMBER"]').style.display='none';
document.querySelector('div[field="defect_number_c"]').style.display='none';
}
if(xx_extra_field.value == 'Yes') {
document.querySelector('div[data-label="LBL_DEFECT_NUMBER"]').style.display='';
document.querySelector('div[field="defect_number_c"]').style.display='';
var xx_extra_field_sub = document.getElementById('defect_number_c');
xx_extra_field_sub.value = '';
}
}
var xx_extra_field = document.getElementById('defect_number_required_c');
toggle_extra_field();
xx_extra_field.addEventListener('change', toggle_extra_field, false);
}
</script>
EOT;
echo $javascript;
exit;
}
}
?>I have tried this and the same results. again i have run a rebuild and repair then tested this when it did not work I rebooted the server and again this did not change anything.
Be careful because I have edited my post. Now my code is slightly different.
These are the two edits I did soon after posting the code I adapted to your install:
if(xx_extra_field.value == 0) {to:
if(xx_extra_field.value == 'No') { if(xx_extra_field.value == 1) {to:
if(xx_extra_field.value == 'Yes') {You don’t need to run Quick Repair and Rebuild. It should work immediately. Maybe you should just clear the browser cache (Ctrl+F5).
If it doesn’t work then:
Check the browser console when loading the page and when changing the dropdown value.
Check php logs
Report any anomalies.
Last thing:
I need to see your code because there must be something that you are not doing right in some way. In my test system it works perfectly.
Please make sure that the file is in the correct position and that it has correct permissions.
As an extra test you can remove all the php code and just place the javascript like this (without even php open/close tags):
<script type="text/javascript">
window.onload=function(){
function toggle_extra_field() {
if(xx_extra_field.value == 'No') {
document.querySelector('div[data-label="LBL_DEFECT_NUMBER"]').style.display='none';
document.querySelector('div[field="defect_number_c"]').style.display='none';
}
if(xx_extra_field.value == 'Yes') {
document.querySelector('div[data-label="LBL_DEFECT_NUMBER"]').style.display='';
document.querySelector('div[field="defect_number_c"]').style.display='';
var xx_extra_field_sub = document.getElementById('defect_number_c');
xx_extra_field_sub.value = '';
}
}
var xx_extra_field = document.getElementById('defect_number_required_c');
toggle_extra_field();
xx_extra_field.addEventListener('change', toggle_extra_field, false);
}
</script>
So it turns out there was a view.edit.php file in the file location you specified I have tried to modify the file by putting the below code below the function display(){ line however when i run a rebuild and repair and I try to create a new invoice I am unable to access the create invoices area of my crm. Please see below for my php code.
<?php require_once('include/MVC/View/views/view.edit.php'); class AOS_InvoicesViewEdit extends ViewEdit{ function AOS_InvoicesViewEdit(){ parent::ViewEdit(); } function display(){ public function display(){ parent::display(); $javascript = <<<'EOT' EOT; echo $javascript; exit; } echo ''; parent::display(); } } ?>Your code has some php bugs that should crash the execution.
Try this instead:
<?php
require_once('include/MVC/View/views/view.edit.php');
class AOS_InvoicesViewEdit extends ViewEdit{
function AOS_InvoicesViewEdit(){
parent::ViewEdit();
}
public function display(){
parent::display();
$javascript = <<<'EOT'
<script type="text/javascript">
window.onload=function(){
function toggle_extra_field() {
if(xx_extra_field.value == No) {
document.querySelector('div[data-label="LBL_DEFECT_NUMBER"]').style.display='none';
document.querySelector('div[field="defect_number_c"]').style.display='none';
}
if(xx_extra_field.value == Yes) {
document.querySelector('div[data-label="LBL_DEFECT_NUMBER"]').style.display='';
document.querySelector('div[field="defect_number_c"]').style.display='';
var xx_extra_field_sub = document.getElementById('defect_number_c');
xx_extra_field_sub.value = '';
}
}
var xx_extra_field = document.getElementById('defect_number_required_c');
toggle_extra_field();
xx_extra_field.addEventListener('change', toggle_extra_field, false);
}
</script>
EOT;
echo $javascript;
echo '<script type="text/javascript" src="custom/include/javascript/showhide.js"></script>';
}
}
?>If this doesn’t work it may be for the reason that @pgr explained (the class extension has already been defined.
In such case try this:
<?php
require_once('include/MVC/View/views/view.edit.php');
class My_Custom_AOS_InvoicesViewEdit extends AOS_InvoicesViewEdit {
function AOS_InvoicesViewEdit(){
parent::ViewEdit();
}
public function display(){
parent::display();
$javascript = <<<'EOT'
<script type="text/javascript">
window.onload=function(){
function toggle_extra_field() {
if(xx_extra_field.value == No) {
document.querySelector('div[data-label="LBL_DEFECT_NUMBER"]').style.display='none';
document.querySelector('div[field="defect_number_c"]').style.display='none';
}
if(xx_extra_field.value == Yes) {
document.querySelector('div[data-label="LBL_DEFECT_NUMBER"]').style.display='';
document.querySelector('div[field="defect_number_c"]').style.display='';
var xx_extra_field_sub = document.getElementById('defect_number_c');
xx_extra_field_sub.value = '';
}
}
var xx_extra_field = document.getElementById('defect_number_required_c');
toggle_extra_field();
xx_extra_field.addEventListener('change', toggle_extra_field, false);
}
</script>
EOT;
echo $javascript;
echo '<script type="text/javascript" src="custom/include/javascript/showhide.js"></script>';
}
}
?>I tried the first bit of code provided and this allows me to create a invoice after the code has been amended however the dynamic field is not working I then tried the seconds bit of code and I am unable to create a new invoice using this 2nd option.
At present I am using the first option of code you have provided however I have noticed an error in the php logs
“[04-Dec-2018 12:36:37 UTC] PHP Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; AOS_InvoicesViewEdit has a deprecated constructor in C:\inetpub\wwwroot\CRM\custom\modules\AOS_Invoices\views\view.edit.php on line 4”
try this:
(however this new modification is correcting some of the code you found. not mine)
<?php
require_once('include/MVC/View/views/view.edit.php');
class AOS_InvoicesViewEdit extends ViewEdit{
function __construct(){
parent::ViewEdit();
}
public function display(){
parent::display();
$javascript = <<<'EOT'
<script type="text/javascript">
window.onload=function(){
function toggle_extra_field() {
if(xx_extra_field.value == No) {
document.querySelector('div[data-label="LBL_DEFECT_NUMBER"]').style.display='none';
document.querySelector('div[field="defect_number_c"]').style.display='none';
}
if(xx_extra_field.value == Yes) {
document.querySelector('div[data-label="LBL_DEFECT_NUMBER"]').style.display='';
document.querySelector('div[field="defect_number_c"]').style.display='';
var xx_extra_field_sub = document.getElementById('defect_number_c');
xx_extra_field_sub.value = '';
}
}
var xx_extra_field = document.getElementById('defect_number_required_c');
toggle_extra_field();
xx_extra_field.addEventListener('change', toggle_extra_field, false);
}
</script>
EOT;
echo $javascript;
echo '<script type="text/javascript" src="custom/include/javascript/showhide.js"></script>';
}
}
?>
The error has now gone from the logs however the dynamic field is still not working.
To attach a screen shot you have to click “around” (4/5 mm above the top right corner of the button, slightly to the right: a tooltip should appear, then click) the submit button so that a pop up appears to let you select a file, It is a little tricky!
Evidently there is something that you are not doing right and I am missing it! So I need to see some screenshots.
Hi
See attached the PHP code although you have already seen it I thought it would be beneficial to attach it.Along with the dropdown field and text field details. If you require anything else let me know. Again thank you for all your help on this.
