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;
}