[av_codeblock wrapper_element=” wrapper_element_attributes=” codeblock_type=” av_uid=’av-kldk7ysi’ custom_class=’cust-codeblock-ads1 mb-small’]




[/av_codeblock]

[av_textblock size='' font_color='' color='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-ul1ft2' custom_class='' admin_preview_bg='']
[av_breadcrumbs]
[/av_textblock]

[av_one_half first min_height='av-equal-height-column' vertical_alignment='av-align-middle' space='no_margin' custom_margin='aviaTBcustom_margin' margin='0px,50px' padding='0px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='' av_uid='av-r85suu']
[av_image src='https://gestudio.dev/wp-content/uploads/2018/10/Vtiger-Dynamic-Fields-And-Blocks-Using-Javascrip-JQuery_square_1.png' attachment='4426' attachment_size='full' align='center' styling='no-styling' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation' custom_class='' admin_preview_bg='' av_uid='av-p5sz46'][/av_image]
[/av_one_half]

[av_one_half min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='' av_uid='av-ojlpyu']
[av_image src='https://gestudio.dev/wp-content/uploads/2020/11/scriptwriterph-technical-support-1.png' attachment='5957' attachment_size='full' align='center' styling='no-styling' hover='' link='page,3483' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av_uid='av-lyp10m' custom_class='' admin_preview_bg=''][/av_image]
[/av_one_half]

[av_textblock size='' font_color='' color='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-23r2nq' custom_class='' admin_preview_bg='']

VTiger Dynamic Fields and Blocks Using Javascript/JQuery

[wpb_last_updated_date]

VTiger’s module layouts and fields are meant to be customized. Most often we change layout of a module based on client’s preferences or maybe because of some business requirements. No problem since we could easily customize module layouts and fields under Module Management settings; But what if your client needs a more complex functionalities? like dynamic fields? (show/hide fields based on another field value). Thought of some extension like VTiger dynamic fields?

There’s actually a lot of extensions out there like Conditional Layouts for VTiger that will help you configure your module layouts and fields. With this extension, you can hide field in VTiger module based on another field value.

Another solution is to use the dependent field/block feature of VTiger. One problem, when we tried to navigate to CRM settings, Module Layouts and fields under Module Management , we can’t see dependent field/block tab. The only tabs displayed are Details View Layout, Relationships, and Duplicate Prevention. We thought that VTiger version 7.1 doesn’t have the dependent field/block feature. Found out that the VTiger version isn’t the issue, dependent field/block feature IS NOT implemented to the community version of VTiger.

Another option is Dynamic Blocks, an extension that will give you the capability to show or hide blocks based on picklist value.

All the options above we have given you require you to spend a dime to acquire them. Medium to big companies could surely afford to invest on those extensions from VTExperts. For small businesses or for some VTiger users who don’t want to spend $69 per month; if you’re willing to put an effort to create your own VTiger dynamic fields then continue to read. We will share you the steps to make module fields and blocks become dynamic using Javascript/JQuery.

[av_hr class=’invisible’ height=’25’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=” custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=” icon=’ue808′ font=’entypo-fontello’ admin_preview_bg=” av_uid=’av-j035fq’]

Remarks

We’ll give you an example code in javascript to be modified and uploaded to your server. As an example, we will use Sales Order module to implement VTiger dynamic fields and blocks. You don’t need to worry since this tutorial is applicable to any module in VTiger.

This tutorial uses the latest version of VTiger CRM — VTiger 7.1. You may upgrade your VTiger CRM first before proceeding.
[/av_textblock]

[av_codeblock wrapper_element=” wrapper_element_attributes=” codeblock_type=” av_uid=’av-kldk7ysi’ custom_class=’cust-codeblock-ads1′]



[/av_codeblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-23r2nq’ custom_class=” admin_preview_bg=”]
Remember that it is required that you have permission to create and modify your VTiger files.

[av_hr class=’invisible’ height=’25’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=” custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=” icon=’ue808′ font=’entypo-fontello’ admin_preview_bg=” av_uid=’av-hd8vpy’]
[/av_textblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-f57kva’ custom_class=” admin_preview_bg=”]

Steps to Create VTiger Dynamic Fields And Blocks

Let’s create a little scenario here. When a user selects a value from a picklist element we will show/hide some fields and blocks.

Step 1: Connect to the server where your VTiger CRM is hosted. You can do this using CPANEL or FTP solutions such as FileZilla or WinSCP (if you’re on Windows). Navigate to your-vtiger-crm/layouts/v7/modules/vtiger/resources directory and create your-javascript-file.js. See how we created the escrie.js file.

Step 2: Copy and paste the following javascript/jquery code to your newly created javascript file.
[/av_textblock]

[av_codeblock wrapper_element=’pre’ wrapper_element_attributes=” escape_html=’aviaTBescape_html’ deactivate_shortcode=’aviaTBdeactivate_shortcode’ deactivate_wrapper=’aviaTBdeactivate_wrapper’ av_uid=’av-dxgv1y’]
$(document).ready(function() {

// on change of your SELECT ELEMENT
$( document ).on( ‘change’, ‘select[data-fieldname=”cf_751″]’, function( e ) {

// get the value of your target SELECT ELEMENT
selectElement = $(‘select[data-fieldname=”cf_751″]’).val();

// uncomment this for to see SELECT ELEMENT value
alert(‘Select element value: ‘ + selectElement);

// put some condition here …
if ( (selectElement == ‘Job Order’) ||
(selectElement == ‘Rush Order’) ||
(selectElement == ‘Repeat Order’) ) {

// target all INPUT ELEMENTs to hide
inputElementsToHide = [
$(“input[id=’SalesOrder_editView_fieldName_cf_880′]”),
$(“input[id=’SalesOrder_editView_fieldName_cf_884′]”)
];

// hide all targetted INPUT ELEMENT
$.each(inputElementsToHide, function (index, value) {

// check if ELEMENT is an INPUT or TEXTAREA
if(value.is(‘input’) || value.is(‘textarea’)) {

// hide the element container
value.closest(‘td’).prev().hide();
value.closest(‘td’).hide();

// only disable the INPUT element
/*value.prev().prop(‘disabled’, true);
value.prop(‘disabled’, true);*/
}

});

// hide BLOCK
$(“div[data-block=’Sample Block’]”).hide();

} else if (selectElement == ‘MTO’) {

// target all INPUT ELEMENTs to show
inputElementsToShow = [
$(“input[id=’SalesOrder_editView_fieldName_cf_880′]”),
$(“input[id=’SalesOrder_editView_fieldName_cf_884′]”)
]

// show all targetted INPUT ELEMENT
$.each(inputElementsToShow, function (index, value) {

// is input
if(value.is(‘input’) || value.is(‘textarea’)) {

// show the element container
value.closest(‘td’).prev().show();
value.closest(‘td’).show();

// enable the INPUT element
/*value.prev().prop(‘disabled’, false);
value.prop(‘disabled’, false);*/
}

});

// show BLOCK
$(“div[data-block=’Sample Block’]”).show();

}

});

});
[/av_codeblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-d6d7li’ custom_class=” admin_preview_bg=”]
Source Code Explanation

Line 5: Do something on change of your SELECT ELEMENT.

Line 8: Get your SELECT ELEMENT value and assign it to a variable.

Line 14: Create some conditions. In our case, we hide fields and blocks based on selected Order Category.

Line 19: Put all INPUT ELEMENTs you want to hide inside of an array variable.

Line 25-39: Hide containers of each INPUT ELEMENT.

Line 42: Also hide your BLOCK.

Line 44: Else condition to show fields and blocks.

Line 47: Put all INPUT ELEMENTS you want to show inside of an array variable.

Line 53-67: Show containers of each INPUT ELEMENT.

Line 70: Also show your BLOCK.

Step 3: Open JSResources.tpl located at your-vtiger-crm/layouts/v7/modules/Vtiger folder and include your newly created javascript file.

Now let’s see if we have successfully created our own VTiger dynamic fields.

Here’s the screenshot of our VTiger module after selecting MTO from Order Categories.
[/av_textblock]

[av_codeblock wrapper_element=” wrapper_element_attributes=” codeblock_type=” av_uid=’av-kldk7ysi’ custom_class=’cust-codeblock-ads1′]



[/av_codeblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-d6d7li’ custom_class=” admin_preview_bg=”]

After selecting Job Order from Order Categories.

Notice that some of the fields and blocks disappear. Feel free to choose which SELECT ELEMENT you want to use — fields and blocks will depend on.

[av_hr class=’invisible’ height=’25’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=” custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=” icon=’ue808′ font=’entypo-fontello’ admin_preview_bg=” av_uid=’av-ac5xw6′]
[/av_textblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-9nwb9y’ custom_class=” admin_preview_bg=”]

What We Have Learned

VTiger dynamic fields and blocks is a really helpful feature for us VTiger developers when creating fields or blocks with dependencies.

There’s a lot of existing solutions out there created by team of experienced developers such as VTExperts. You may choose paid extension to save time and avoid development works.

The solution that we have created here can be implemented on other VTiger version.

You may also want to read add contact to your VTiger CRM using VTiger API.

That’s all, we hope this tutorial about VTiger dynamic fields and blocks using javascript/jquery helped you create a free solution to show/hide fields and blocks in VTiger.
[/av_textblock]

[av_hr class=’default’ height=’50’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=” custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=” icon=’ue808′ av_uid=’av-8878ti’]

[av_social_share title=’SHARE THIS POST’ style=’minimal’ buttons=” admin_preview_bg=” av_uid=’av-5oj4t2′]

[av_hr class=’invisible’ height=’50’ shadow=’no-shadow’ position=’center’ custom_border=’av-border-thin’ custom_width=’50px’ custom_border_color=” custom_margin_top=’30px’ custom_margin_bottom=’30px’ icon_select=’yes’ custom_icon_color=” icon=’ue808′ font=’entypo-fontello’ admin_preview_bg=” av_uid=’av-43ovom’]

[av_comments_list av_uid=’av-3aout2′]