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'}
<td width=20% class="dvtCellLabel" align=right>
<font color="red">{$mandatory_field}</font>{$usefldlabel} {if $MASS_EDIT eq '1'}<< type="checkbox" name="{$fldname}_mass_edit_check" id="{$fldname}_mass_edit_check" class="small">{/if}
</td>
<td width=30% align=left class="dvtCellInfo">
<input type="text" size="8" name="stdcode" id="stdcode" value="{$fldvalue[0]}" class=detailedViewTextBoxStdCode onFocus="this.className='detailedViewTextBoxStdCodeOn'" onBlur="this.className='detailedViewTextBoxStdCode'" onChange="makePhoneNo()"> - <input type="text" size="20" name="phoneno" id="phoneno" value="{$fldvalue[1]}" class=detailedViewTextBoxPhone onFocus="this.className='detailedViewTextBoxPhoneOn'" onBlur="this.className='detailedViewTextBoxPhone'" onChange="makePhoneNo()">

<input type="hidden" name="{$fldname}" id="{$fldname}" value="{$fldvalue[0]}-{$fldvalue[1]}" >
</td>

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.php

{elseif $keyid eq '1001'}


{$keyval[0]}-{$keyval[1]}

-


{$APP.LBL_OR}
{$APP.LBL_CANCEL_BUTTON_LABEL}

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