Prácticas recomendadas para el script de cliente
Siga las prácticas recomendadas a continuación para una mejor creación de scripts de cliente.
1. Utilice recursos estáticos para scripts repetidos
2. Utilice los argumentos disponibles de los tipos de eventos en su script
3. Para varias acciones en la misma página, cree un solo script con condiciones “if” o “switch”
4. Depure mediante instrucciones de registro
5. Utilice la sección Terminal para probar los archivos ZDK
6. Cree scripts independientes para cada diseño
7. Incluya las llamadas de API en la lista blanca
8. Utilice la opción Reordenar para cambiar el orden de los scripts
9. Utilice el tipo de evento adecuado para su requisito
10. Utilice Cargadores para administrar los límites de tiempo de espera
1. Utilice recursos estáticos para scripts repetidos
Si desea utilizar el mismo script en varias páginas para varios eventos, cargue el código como un recurso estático, agregue el recurso estático al script de cliente y haga referencia a él en el script.
Supongamos que desea validar el número de SSN. Si tiene el mismo requisito o funcionalidad en varios diseños o en varias páginas del mismo módulo o en varios módulos, puede utilizar una sola línea de script en lugar de repetir el mismo conjunto de códigos en varios scripts de cliente. De esta manera, podemos lograr la capacidad de reutilización del código mediante el uso de recursos estáticos.
Archivo js:
function is_socialSecurity_Number(str) {
regexp = /^(?!000|666)[0-8][0-9]{2}-(?!00)[0-9]{2}-(?!0000)[0-9]{4}$/;
if(regexp.test(str)) {
return true; }
else {
return false;
} }
Cree un archivo JavaScript y cargue el archivo estático anterior y agregue el archivo estático al script de cliente. Consulte Recursos estáticos para obtener más información. Puede llamar al método desde el recurso estático y usarlo en su script como se muestra en el siguiente script.
//Get the field value that has to be validated
var ssn = ZDK.Page.getField("SSN");
//*Check if the value is a valid SSN using function in js file.*/
if(is_socialSecurity_Number(ssn))
{
//If it is a valid SSN, display confirmation box that "The lead details are validated".
ZDK.Client.showConfirmation('The lead details are validated');
}
else
{
//If it is not a valid SSN, display error message that " The lead values are not validated".
ZDK.Client.showMessage('The lead details are not validated', { type: 'error'
});
}
Nota:
Solo pueden cargar hasta 5 recursos estáticos para una página en particular.
2. Utilice los argumentos disponibles de los tipos de eventos en su script
Consulte la siguiente tabla para conocer los argumentos que se pueden utilizar dentro del script para un tipo de evento en particular.
| Página | Tipo de evento | Nombre del evento | Argumentos |
|---|---|---|---|
| Página Clonar / Página Editar | Página | onChange | field_name |
| onLoad | __ | ||
| onSave | __ | ||
| Campo | onChange | valor | |
| Página Detalles (lienzo) | Página | onLoad | __ |
| Campo | onBeforeUpdate | valor | |
| Formulario con campos obligatorios | onBeforeMandatoryFormSave | valor | |
| onMandatoryFormLoad | campo | ||
| Evento de Blueprint | beforeTransition | transición | |
| Evento de etiqueta | onTagChanged | etiqueta, agregada y eliminada | |
| Lienzo | onClick | __ | |
| Ícono | onClick | __ | |
| Texto | onClick | __ | |
| Página Crear | Página | onChange | field_name |
| onLoad | __ | ||
| onSave | __ | ||
| Campo | onChange | valor | |
| Página Detalles (estándar) | Página | onLoad | __ |
| Campo | onBeforeUpdate | valor | |
| Formulario con campos obligatorios | onBeforeMandatoryFormSave | valor | |
| onMandatoryFormLoad | campo | ||
| Evento de Blueprint | beforeTransition | transición | |
| Evento de etiqueta | onTagChanged | etiqueta, agregada y eliminada | |
| Página Lista (estándar) | Evento de página | onCustomViewLoad | custom_view |
| onBeforeCustomViewChange | custom_view | ||
| Página Crear (asistente) | Evento de asistente | onLoad | __ |
| onChange | field_name | ||
| onTransition | pantalla | ||
| onBeforeTransition | source_screen, target_screen | ||
| onBeforeSave | __ | ||
| Evento de campo | onChange | valor | |
| Página Editar (asistente) | Evento de asistente | onLoad | __ |
| onChange | field_name | ||
| onTransition | pantalla | ||
| onBeforeTransition | source_screen, target_screen | ||
| onBeforeSave | __ | ||
| Evento de campo | onChange | valor |
Por ejemplo, valor es el argumento para el tipo de evento onChange de campo y, por tanto, el script de cliente mantendrá el valor de ese campo en valor. Solo puede usar el valor en lugar de ZDK.Page.getField("field_name").getvalue();
3. Para varias acciones en la misma página, cree un solo script con condiciones “if” o “switch”
En el caso de varios eventos de campo en la misma página, puede crear un solo script con una instrucción if o switch.. case para verificar qué campo se actualiza.
Por ejemplo, para agregar validación para los campos Producto, Número de teléfono, País y Categoría en la página Crear, puede crear cuatro scripts de cliente en la página Crear con eventos de campo para cada uno de los campos por separado. Sin embargo, es una práctica recomendable crear un solo script de cliente en la página Crear con un evento de página onChange en lugar de varios scripts de cliente. En el evento de página, puede utilizar condiciones para verificar qué campo se está cambiando y agregar acciones dentro de esas condiciones. A continuación, se muestra el script de ejemplo que tiene varias condiciones para varios campos.
switch (field_name)
{
case 'Product':
var product_name = ZDK.Page.getField('Product').getValue();
var category_field = ZDK.Page.getField('Category');
if (['Sparking cable', 'Ignition box', 'Ignition coil', 'Spark plug'].includes(product_name)) {
category_field.setValue("Ignition system"); ZDK.Page.getField('Number_of_Boxes').setMandatory(true); }
else if (['Speedometer', 'Odometer', 'Voltmeter', 'Temperature gauge'].includes(product_name)) { category_field.setValue('Gauges and meters'); }
break;
case 'Phone_Number':
var phone_field = ZDK.Page.getField('Phone_Number');
if (phone_field.getValue().length < 10) {
phone_field.showError('Enter a valid phone number'); }
break;
case 'Country':
ZDK.Page.getField('Phone_Number').setMaxLength(10); break;
case 'Category':
if(ZDK.Page.getField('Category').getValue() === 'Ignition system') { ZDK.Page.getField('Number_of_Boxes').setMandatory(true); }
break; }
Nota:
Puede crear hasta 30 scripts de cliente por página.
4. Depure mediante instrucciones de registro
Utilice la instrucción de registro para depurar el script cuando sea necesario y ejecute el script mediante la opción Ejecutar en el IDE de script de cliente. Los registros estarán disponibles en el panel de mensajes de la opción Ejecutar. Esta es la captura de pantalla de cómo puede agregar instrucciones de registro en su script y dónde puede ver los registros cuando se ejecuta el script.


5. Utilice la sección Terminal para probar los archivos ZDK
Siempre que desee probar nuestros archivos ZDK al instante, puede hacerlo en la sección Terminal disponible en la opción Ejecutar del IDE de script de cliente. Por ejemplo, cuando escribe el siguiente script en la sección Terminal y presiona Intro, puede ver el mensaje de alerta en la pantalla.
ZDK.Client.showMessage('Test ZDK Functionality using Terminal section', { type: 'info' });
6. Cree scripts independientes para cada diseño
Los scripts de cliente se ejecutarán solo para el diseño que especificó al configurar el script de cliente. Si desea que se ejecute el script para otros diseños o para todos los diseños de un módulo, deberá crear un script separado para cada diseño.
7. Incluya las llamadas de API en la lista blanca
Asegúrese de que las llamadas de API de un script de cliente a otros dominios estén en la lista blanca en Dominios de confianza.
Por ejemplo, supongamos que desea completar el campo Distancia con la distancia entre los campos Ubicación del vendedor y Ubicación del fabricante. Para lograrlo, puede escribir un script para el evento de página onChange.
Script:
//Check if the Location fields are updated if (field_name === "Seller_Location" || field_name === "Manufacturer_Location") { //Assign the third party API key to a variable var api_key = "2Ty9CbowZU8Nu3pl3LQb*********"; //Assign the field "Distance" to a variable var distance = ZDK.Page.getField("Distance"); //Make the field "Distance" read-only. distance.setReadOnly(true); //Get form values var formObj = ZDK.Page.getForm(); var form = formObj.getValues(); if (form.Manufacturer_Location && form.Seller_Location) { /*Third party API call with the Location fields values. The domain of the API call should be added to Trusted Domains of Zoho CRM */ var response = fetch("https://api.***/maps/api/dist**/json?origins="+form.Manufacturer_Location+"&destinations="+form.Seller_Location+"&key="+api_key); //Populate the response in the "Distance field". response.then(res => res.json()).then(data => { distance.setValue(data.rows[0].elements[0].distance.text); }); } }El script podrá obtener la respuesta correctamente solo si las llamadas API al dominio utilizado están en la lista blanca en Dominios de confianza. Haga clic aquí para saber cómo incluir las llamadas de API de terceros en la lista blanca.
8. Utilice la opción Reordenar para cambiar el orden de los scripts
Siempre que desee cambiar el orden de ejecución de los scripts de cliente para una página en particular y un evento en particular, utilice el botón Reordenar disponible en la pantalla del script de cliente.

Recuerde que el cambio de orden se aplica solo dentro de un evento en particular para una página en particular de un módulo.
9. Utilice el tipo de evento adecuado para su requisito
- Para realizar validaciones antes de guardar el registro, utilice el evento de página onSave. De esta manera, después de ingresar datos para todos los campos, cuando el usuario presiona el botón Guardar, se ejecutará el script.
- Para realizar la validación tan pronto como se ingresen datos en un campo en particular, utilice el evento de campo onChange.
- Para realizar la validación tan pronto como se ingresen los datos para varios campos, utilice el evento de página onChange.
- Si desea mostrar un cuadro de mensaje/información personalizado cada vez que se abra una página, utilice el evento de página onLoad.
10. Utilice Cargadores para administrar los límites de tiempo de espera
En el script de cliente, las ejecuciones están limitadas por un tiempo de espera de 10 segundos. Algunas llamadas de API pueden tardar más de 10 segundos en proporcionar respuesta. Por tanto, cuando se utilizan en el script de cliente, la ejecución se detendrá. En tales casos, puede mostrar un cargador que pausará la ejecución hasta que reciba la respuesta de la llamada de la API.
Considere la siguiente situación.
Cada vez que el usuario cambia el estado a “Entregado” en el módulo Cotizaciones, se activa un script de cliente. Este script, a su vez, ejecuta una función, y esta función tarda más de 10 segundos en completarse.
En este caso, puede mostrar un cargador antes de la ejecución de la función, después de lo cual debe ocultarlo.
Script:
if (value == 'Delivered') {
ZDK.Client.showLoader({type:'page', template:'spinner', message:'Sending Quotation...' });
ZDK.Apps.CRM.Functions.execute("Send_Quote");
ZDK.Client.hideLoader();
ZDK.Client.showMessage('Quotation sent successfully', { type: 'success' });
}
Así es como funciona el script de cliente.

La presencia del cargador en la pantalla informará al usuario sobre los procesos en curso en segundo plano.