How to create new UI type in vTiger CRM

Steps to make new UI Type

When new button is clicked the UI that comes uses EditViewUtils.php and EditViewUI.tpl

EditView and CreateView

EditViewUtils.php

Add a new elseif block for our new uitype - else if ($uitype == 1001) {

1) $editview_label[]=getTranslatedString($fieldlabel, $module_name); This line will store the label of the field

2) $fieldvalue[] = $phoneValue; $fieldValue will store the value of that UI type

So the block looks like this -
else if ($uitype == 1001) {
$phone = $_REQUEST[$fieldname];
//echo $_REQUEST['$fieldname'];
$phoneValue = explode("-",$phone);
//print_r($phoneValue);
$editview_label[]=getTranslatedString($fieldlabel, $module_name);
$fieldvalue[] = $phoneValue;


}


EditViewUI.tpl

{elseif $uitype eq '1001'}

{$mandatory_field}{$usefldlabel}
{if $MASS_EDIT eq '1'}<< type="checkbox" name="{$fldname}_mass_edit_check" id="{$fldname}_mass_edit_check" class="small">{/if}


onFocus="this.className='detailedViewTextBoxStdCodeOn'"
onBlur="this.className='detailedViewTextBoxStdCode'" onChange="makePhoneNo()"> -
size="20" name="phoneno" id="phoneno" value="{$fldvalue[1]}"
class=detailedViewTextBoxPhone onFocus="this.className='detailedViewTextBoxPhoneOn'" onBlur="this.className='detailedViewTextBoxPhone'" onChange="makePhoneNo()">


1) {$usefldlabel} comes from $editview_label[] of EditViewUtils.php 2) {$fldvalue[0]} comes from $fieldvalue[] of EditViewUtils.php

Detail View

DetailViewUtils.php

elseif($uitype == 1001) {
//echo $_REQUEST[$fieldname];
$label_fld[] = getTranslatedString($fieldlabel, $module);
$fieldValues = explode("-",$col_fields[$fieldname]);
array_push($label_fld, $fieldValues);
//print_r($label_fld);
}

1) $label_fld[0]=getTranslatedString($fieldlabel, $module_name); This line will store the label of the field

2) $label_fld[1] = $phoneValue; $fieldValue will store the value of that UI type

DetailViewUI.tpl

{elseif $keyid eq 1001}
<td class="dvtCellInfo" align="left" width=25%"> {$keyval[0]}-{$keyval[1]}
<input type="hidden" name="{$keyfldname}" id="{$keyfldname}" value="{$keyval[0]}-{$keyval[1]}" ></td>
1) {$keyval[0]},{$keyval[1]} comes from $label_fld[1] of DetailViewUtils.php

dtlviewajax.js

else if(uitype == 1001)
{
fieldNameArray = fieldName.split(",");
var stdCode = document.getElementById(fieldNameArray[1]).value;
var phoneNo = document.getElementById(fieldNameArray[2]).value;
var txtBox = 'txtbox_' + fieldLabel;
document.getElementById(txtBox).value = stdCode + "-" + phoneNo;
//alert(document.getElementById(txtBox).value);

}

When in detail view u click on edit inside the box, then when the value of StdCode and Phone changes it should reflect in hidden field that is why we have this ajax.

CSS

Go to the following file and make appropiate css /themes/{theme_name}/style.css

Example in - /themes/softed/style.css I made the following css

.detailedViewTextBoxStdCode {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
border:1px solid #bababa;
padding-left:5px;
width:15%;
background-color:#ffffff;
}

.detailedViewTextBoxPhone {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
border:1px solid #bababa;
padding-left:5px;
width:60%;
background-color:#ffffff;
}
.detailedViewTextBoxStdCodeOn {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
border:1px solid #bababa;
padding-left:5px;
width:15%;
background-color:#ffffdd;
}

.detailedViewTextBoxPhoneOn {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
border:1px solid #bababa;
padding-left:5px;
width:60%;
background-color:#ffffdd;
}



Fixing the Issue on Custom Module Saving That Gives a Blank Data

The reason for displaying a page during save is the empty entry in the vtiger_entityname table.

mysql> insert into vtiger_entityname(fieldname,tablename,entityidfield,modulename,tabid,entityidcolumn) values ('didtestname','vtiger_didtest','didtes
tid','DIDTest',47,'didtestid');
Query OK, 1 row affected (0.03 sec)
but the other solution is to include this text..

$moduleInstance->initWebservice();
Another issue when a particular module is saved it is giving an empty page. This time aside from that table “vtiger_entityname” mentioned above, a table “vtiger_ws_entity” must be also looked upon. The issue encountered is that when saved, its just give an empty page. When that table is examined, it turns out that the name of the module is “Receivable” (notice the caps on R) while it expects to be “receivables”. After updating the table, it is fixed :)

fixing_blank_on_custom_module_saved_issue.txt · Last modified: 2010/05/28 14:00 (e