How to create a field with country code & country flag

[Ankita14]

[jessica1]

To Add Flag in Phone Field need to do some customization and create some files as below:

1. <YOUR CRM>/custom/Extension/application/Ext/LogicHooks/AddFlagPhoneField_Hook.php

<?php

if (!isset($hook_array) || !is_array($hook_array)) {

$hook_array = array();

}

if (!isset($hook_array['after_ui_frame']) || !is_array($hook_array['after_ui_frame'])) {

$hook_array['after_ui_frame'] = array();

}

$hook_array['after_ui_frame'][] = array(

1, //Hook version

'AddFlagPhoneField', //Label

'custom/include/AddFlagPhoneField/AddFlagPhoneField.php', //Include file

'AddFlagPhoneField', //Class

'AddFlagPhoneFieldMethod' //Method

);

2. <YOUR CRM>/custom/include/AddFlagPhoneField/AddFlagPhoneField.php

<?php

if(!defined('sugarEntry') || !sugarEntry) die('Not A Valid Entry Point');

class AddFlagPhoneField{

function AddFlagPhoneFieldMethod($event,$arguments){

if($_REQUEST['module'] == 'Accounts' && ($GLOBALS['app']->controller->action == 'EditView' || $_REQUEST['action'] == 'EditView')){

echo '<link rel="stylesheet" type="text/css" href="custom/include/AddFlagPhoneField/build/css/intlTelInput.css">';

echo '<script src="custom/include/AddFlagPhoneField/build/js/intlTelInput.js"></script><script src="custom/include/AddFlagPhoneField/AddFlagPhoneField.js"></script>';

}

}

}

3. <YOUR CRM>/custom/include/AddFlagPhoneField/AddFlagPhoneField.js

var input = document.querySelector("#phone_office");

window.intlTelInput(input, {

utilsScript: "custom/include/AddFlagPhoneField/build/js/utils.js",

});

For Point #4, #5 and #6, Download the files from below link and upload as suggested path.

Add Phone Field JSCSS

4. <YOUR CRM>/custom/include/AddFlagPhoneField/build/css/intlTelInput.css

5. <YOUR CRM>/custom/include/AddFlagPhoneField/build/js/intlTelInput.js

6. <YOUR CRM>/custom/include/AddFlagPhoneField/build/js/utils.js

[Ankita14]

Thank you for the solution could you help me with adding a button besides a field and on click it should dynamically add and remove multiple fields

[Ankita14]

Hey @jessica1 Jessica please share the Image folder with flag images as well it’s missing.

[jessica1]

Are you talking about the Flag Image which was added in the Phone Field? If yes then Flag is coming through the CSS file. So no need for an Image folder.

[Ankita14]

Image Folder is mentioned in the path whereas it is missing in the css folder

[jessica1]

Did you upload CSS file which was mentioned in the point #4 as per the path? If yes then please cross check folder and files having the recursive 777 permission or not.

[Ankita14]

tried all that you have mentioned still the issue persists

[jessica1]

Upload the flag images as suggested below in your SuiteCRM.

/custom/include/AddFlagPhoneField/build/img

Download flag images

[Ankita14]

Thanks it’s working .
Can you help me with multiple dynamic fields in suitecrm something like this

[rommeltraya25]

Hello. Where to locate the placeholders? I want to edit a few placeholder

[Ankita14]

what kind of placeholders?
elaborate your query

[p.konetskiy]

@Ankita14
I see this is an old post, but if you’re still interested, take a look at the post:

Solution for support three new fields types in Studio

Hi! I finished a project for adding new fields types to Studio. You can take the archive installer for Module Loader and small instruction here: I added next fields types: Collection - The block of fields which can be multiply on forms. Collection files - The multiply load files on forms. Dynamicbase - The one text which can be multiply on forms. The solution is safe when upgrading version. I will be glade to get your comments.

[waraikobuot]

@jessica1

For Point #4, #5 and #6, Download the files from below link and upload as suggested path.

Hello, how to add validation of input length of each country code? sample in the philippines without country code the length of our mobile number is 11 if it has the country code will be 13. It is include the “+” sign. 09170000827 (without country code) and +639170000827(w/ country code).

Additional how to remove the spacing of each number during edit? I tried to trim the result but the space still there.