1. Contexto

QRS es una empresa de fabricación que utiliza Zoho CRM. Fabrican interruptores y sensores eléctricos. Los vendedores adquieren los productos de las unidades de fabricación ubicadas en diferentes ciudades. La empresa QRS maneja las solicitudes diarias enviadas por los vendedores y también mantiene los detalles de los vendedores, como nombre, dirección, número de productos, etc., mediante Zoho CRM. Los detalles de las unidades de fabricación y los vendedores se guardan en el módulo Cuentas y los detalles de los productos fabricados se guardan en el módulo Productos. Los productos fabricados por la empresa se agrupan en dos categorías: Sensores e Interruptores eléctricos. Los detalles están disponibles en el módulo personalizado Categoría.

2. Requisito

Cuando un vendedor quiere productos, el vendedor envía la solicitud en Zoho CRM al fabricante junto con la cantidad de productos necesarios, la cual queda guardada en el módulo Solicitud. El módulo Solicitud es un módulo personalizado. Distancia, Ubicación del vendedor, Ubicación del fabricante, Cantidad de productos, Producto, y Categoría son campos personalizados en este módulo. Aquí Productos y Categorías son campos de búsqueda.

• Distancia deberá ser un campo de solo lectura. Según la ubicación del fabricante y la ubicación del vendedor, complete el campo distancia con API de terceros.
• Complete el campo Nombre de la solicitud como REQ-Date (Fecha de solicitud) y deberá ser un campo de solo lectura. Por ejemplo, REQ-22-07-2022.
• La cantidad de productos deberá ser un campo numérico. Si la cantidad ingresada es inferior a 100, muestre el mensaje “La cantidad mínima de productos debe ser 100”.
• Al hacer clic en el botón Guardar, debe aparecer una ventana emergente de confirmación en la pantalla con el mensaje: Hemos recibido su solicitud y se enviará en un plazo de 4 días.
• El campo de búsqueda Categoría se debe completar en función del Producto seleccionado.
  Batería, Termostato e Interruptor de encendido pertenecen a la categoría de Interruptores eléctricos.
  Los productos Sensor de nivel de combustible, Sensor de luz y Sensor del airbag pertenecen a la categoría Sensores.

3. Solución

A continuación, se muestran los factores que definen las configuraciones para un script de cliente.

• El módulo para el que se debe ejecutar el script de cliente.
• La página donde se debe ejecutar el script de cliente.
• Los eventos que activan el script de cliente.
• Las acciones que debería realizar el script de cliente.

En este caso, el módulo es Solicitudes. El primer, cuarto y quinto requisito son eventos de página y los otros son eventos de campo. Las acciones son autocompletar mediante una API de terceros, configurar el campo de solo lectura, mostrar el mensaje de error personalizado, mostrar el cuadro de confirmación con el mensaje personalizado y completar un campo de búsqueda basado en otro campo de búsqueda.

A. Autocompletar mediante una API de terceros

Este script debe completar la distancia en función de los campos de ubicación utilizando una API de terceros. Cree un nuevo script especificando los siguientes valores para nombre, descripción, evento, página y módulo. Consulte Creación de un script de cliente para obtener más información.

​

Script:

Copy
 //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);
    });
  }
}
 

Sugerencia:

Las llamadas de API a cualquier dominio de un script de cliente se deben incluir en la lista blanca en dominios de confianza.

Así es como funciona el script de cliente.

2. Configurar un campo como solo lectura y completar datos automáticamente

Este script se utiliza para completar el campo Nombre de solicitud cuando se carga la página de creación del módulo Solicitud. Cree un nuevo script especificando los siguientes valores para nombre, descripción, evento, página y módulo. Consulte Creación de un script de cliente para obtener más información.

​

Script:

Copy
 
var todaysDate = new  Date();
//Append the date with REQ as per requirement

var requestName = "REQ-" + todaysDate.getDate().toString() + "-" + todaysDate.getMonth().toString() + "-" + todaysDate.getFullYear().toString();
//Assign the field "Request Name" to a variable

var reqName_field = ZDK.Page.getField("Request_Name");
//Populate requestName in the field "Name"
reqName_field.setValue(requestName);
//Make the field "Request_Name" read-only
reqName_field.setReadOnly(true);
 

Así es como funciona el script de cliente.

3. Scripts de cliente con evento de campo para el campo Cantidad de productos y evento de página onSave

Para este requisito, no se deberá guardar la Solicitud si la cantidad es inferior a 100 y el error deberá aparecer cuando se le asigna un valor al campo. Por tanto, el script de cliente deberá crearse no solo para el evento onChange, sino también para el evento onSave. Como se debe realizar la misma verificación de cantidad en más de un script, podemos agregar la función quantiyCheck() como un recurso estático y utilizarla en los scripts. De esta manera, podemos lograr la capacidad de reutilización del código mediante el uso de recursos estáticos.

Archivo js:

Copy
 function  quantityCheck(quantity)
{
if(quantity < 100)
{
    quantity_field.showError("Minimum Quantity is 100");
}
}
 

Cargue y agregue el archivo estático anterior al script de cliente en la página de creación del módulo Solicitudes. Consulte Recursos estáticos para obtener más información. Cree dos scripts especificando los valores de nombre, descripción, evento, página y módulo según la imagen. Consulte Creación de un script de cliente para obtener más información.

​

Script para el evento de campo onChange:

Copy
 //Invoke the static method by passing the value of Quantity of Products 

quantityCheck(value);

​

Script para el evento de página onSave:

Copy
 //Get the value of the field Quantity of Products 

var qty_field = ZDK.Page.getField("Quantity_of_Products");
//Invoke the static method by passing the value of Quantity of Products
quantityCheck(qty_field);

Así es como funciona el script de cliente.

D. Mostrar cuadro de confirmación

Este script es para mostrar el cuadro de confirmación con el mensaje: “Hemos recibido su solicitud y se enviará en un plazo de 4 días”, cuando se haga clic en el botón Guardar en la página de creación del módulo Solicitud. Cree un nuevo script especificando los siguientes valores para nombre, descripción, evento, página y módulo. Consulte Creación de un script de cliente para obtener más información.

​

Script:

Copy


 ZDK.Client.showConfirmation('Your Request is submitted and will be shipped within 4 days.');

Así es como funciona el script de cliente.

Sugerencia:

El cuadro de confirmación que se utiliza en el script de cliente anterior puede manejar casos verdaderos y falsos según el botón que hace clic el usuario.

Copy

 var isProceed = ZDK.Client.showConfirmation('Your Request will be submitted and be shipped within 4 days.','Proceed','Cancel');
//If user clicks Proceed button

if (isProceed) {
  return  true;
}
//If user clicks Cancel button

else {
return  false;
}
 

E. Completar automáticamente un campo de búsqueda

Este script es para completar el campo de búsqueda Categoría según el Producto seleccionado en la página de creación del módulo Solicitud. Cree un nuevo script especificando los siguientes valores para nombre, descripción, evento, página y módulo. Consulte Creación de un script de cliente para obtener más información.

​

Script:

Copy


 //Check the value of Product field
if (value.name == 'Airbag sensor' || value.name == 'Light sensor' || value.name == 'Fuel level sensor') {
//Populate value for lookup field Category based on the condition
ZDK.Page.getField('Category').setValue({ "id": "4967860000001049208", "name": "Sensors" });   
    }
else if (value.name == 'Ignition Switch' || value.name == 'Thermostat' || value.name == 'Battery') {
//Populate value for lookup field Category  based on the condition
ZDK.Page.getField('Category').setValue({ "id": "4967860000001049217", "name": "Electrical Switches" });
    }
 

Así es como funciona el script de cliente.

Sugerencia:

1. El script de cliente anterior también se puede configurar con un evento de página, en lugar de un evento de campo. Si se trata de un evento onChange de página, el script se ejecutará para cada cambio que ocurra en esta página. Si se trata de un evento onChange de campo, el script se ejecutará solo cuando se actualice ese campo específico.

2. El script de cliente se ejecutará solo para el diseño especificado mientras se configura 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 de cliente separado para cada diseño.