1. The Context

Zylker is a healthcare company that makes medical instruments. Their service agents use Zoho CRM's Orders module to handle customer orders. The company has come up with a list of new requirements.

2. Requirement

The Orders module is used by the Service Agent and Sales Manager of Zylker. The company wants the following requirements to be accomplished. 1. The lookup field "Instrument Name" should be filtered based on the type of Instrument that a service agent selects in the field "Type". For example, if the service agent selects the Type as "Surgical Instruments", the user should be allowed to choose only Instruments of such type in the subform.
2. The company has multiple warehouses located in different locations. Each warehouse uses different shipment carriers with different charges and timelines for delivery based on shipment location. The company wants to guide service agents by providing an Intuitive User Interface with information about the Warehouse, Shipment Speed, and Shipment Charge Details during order creation based on the shipping address and populate the fields based on user selection. Based on the user selection, the values of the fields Shipment Charge, Shipping Speed and Warehouse should be populated.
3. If the selected Warehouse does not have the requested products, then show a pop-up asking the user to select some other Warehouse.
4. The field Phone in the Orders List View should be masked and the columns should be frozen. 
5. The company wants to highlight the status of the orders based on the following criteria.

• If the status is "Approved", then show the text in blue.
• If the status is "Canceled", then show the text in red.
• If the status is "Delivered", then show the text in green. Also, the background color for the rows with "Delivered" status should be green.

6. When the Orders List Page loads, an alert should be displayed to approve the orders that are overdue.
7. In the Deals module, display a pop-up whenever a service agent changes the "Stage" of the deal. The service agent should be able to add comments in that pop-up. This comment should be populated to the field "Description" along with the name of the "Stage" and it should keep appending the comments whenever there is a change in Stage.

3. Solution

Below are the factors that define the configurations for a Client Script.

• The module for which the Client Script should run. 
• The page where the Client Script should get executed.
• Events that trigger the Client Script.
• Actions that the Client Script should perform.

In this case, the module is Orders.

A. Dynamic lookup filter

Based on the value the user selects in the "Type", the Instrument Name should be displayed by picking the Instruments from the Instruments module where the category is equal to the user selection. To accomplish this, create a new script by specifying the below values for Name, Description, Module, Page, and Event. Refer to Creating a Client Script for more details.

Script:

Copy

 var Category = ZDK.Page.getField('Type').getValue();

var Product = ZDK.Page.getSubform("Instruments_List").getField("Instrument_Name");

Product.setCriteria("(Instrument_Category:equals:"+Category+")", { filterOnSearch: true });

Here is how the Client Script works.

The requirement here is to create a flyout. Flyouts are floating User Interface that can be moved and controlled using Client Script. Presently, Widgets can be used to render a flyout. The flyout can run independently and any Client Script can communicate with it. 
When the user selects a Warehouse, the flyout will appear with the Shipping Charge, Shipping Speed, and Warehouse details. Based on the user selection, the values of the fields Shipment Charge, Shipping Speed, and Warehouse should be populated. To accomplish this, create a new script by specifying the below values for Name, Description, Module, Page, and Event. Refer to Creating a Client Script for more details.

To call a widget from Client Script you should create a widget and add the widget API name in the Client Script.

Script:

Copy
 
ZDK.Client.createFlyout('myFlyout', { header: 'Shipment Charges', animation_type: 2, height: '400px', width: '420px', top: 'center', right: '0' });
ZDK.Client.getFlyout('myFlyout').open({ api_name: 'flyout_for_warehouse',type: 'widget' });
var response = ZDK.Client.getFlyout('myFlyout').notify({ data: value }, { wait: true });
ZDK.Client.getFlyout('myFlyout').close();
ZDK.Page.getField('Shipment_Charge').setValue(response.price);
ZDK.Page.getField('Shipping_Speed').setValue(response.speed);
ZDK.Page.getField('Warehouse').setValue(response.wh);

Here is how the Client Script works.

C.Pop-up Screen

The requirement here is to show alternate Warehouses. You can show a Widget as pop-up on screen using Client Script. To accomplish this, create a new script by specifying the below values for Name, Description, Module, Page, and Event. Refer to Creating a Client Script for more details.

Script:

Copy
 
var field_obj = ZDK.Page.getField('Warehouse');
log(field_obj.getValue());
var Warehouse_data = field_obj.getValue();
var resp = ZDK.Client.openPopup({ id: '1982484000000482011', type: 'widget', header: 'Delivery Error Alert', animation_type: 1, close_icon :false, height: '350px', width: '650px', left: 'center' }, { data: ZDK.Page.getForm().getValues() });
log(resp);
ZDK.Page.getField('Warehouse').setValue(resp);
ZDK.Client.showMessage('Warehouse changed successfully.', { type: 'success' });

Here is how the Client Script works.

D. List View Customization

For the requirements 4, 5 and 6, the List Page needs to be customized. The requirements are to Display alert message on load of the List Page, mask the field Contact Number and freeze the columns and Add text color based on criteria. So you need to create a script for List Page (Standard) with onCustomViewLoad event. To accomplish this, create a new script by specifying the below values for Name, Description, Module, Page, and Event. Refer to Creating a Client Script for more details.

Script:

Copy
 
ZDK.Page.getList().freezeColumns(true);
ZDK.Page.getList().style(
  {
        record:  { backgroundColor: '#e9fbf4' },
        field: { Status: { backgroundColor: '#e9fbf4', foregroundColor: '#00cc44' , fontWeight: 'bold' } }
  },
  "((Status:equals:Delivered))"
);
ZDK.Page.getList().style(
  {
        field: { Status: { foregroundColor: '#ff6666' , fontWeight: 'bold' } }
  },
  "((Status:equals:Cancelled))"
);
ZDK.Page.getList().style(
{
        field: { Status: { foregroundColor: '#2d72d9' , fontWeight: 'bold' } }
  },
  "((Status:equals:Approved))"
); 
ZDK.Page.getList().maskField('Phone', { length: 10, character: '*', reverse: false });
var count = 0;
var rec = ZDK.Page.getList().getRecords();
rec.forEach(x => {
  if (x.Status == "Created")) {
    count++;
  }
});
if (count != 0) {
  ZDK.Client.showConfirmation("Hi " + $Crm.user.full_name + ", " + "[" + count + " orders](http://ordersite.com) are _not approved yet_. \n\nWould you like to approve them now?", 'Yes. Approve!', "No, Not now");
}

Here is how the Client Script works.

E. Get Input using Pseudo fields

The script should be executed whenever the service agent changes the field "Stage". So create a Client Script on the Create Page of the Deals module. The getInput() ZDK enables you to show a pop-up on the screen. You can add fields with labels in this pop-up. The field that appears in this pop-up is a pseudo field and is not a real field in the Deals module. It will appear only when Client Script executes and you can use it in the script. Such pseudo fields are highly beneficial when you want to manipulate/calculate data based on user input as it does not affect the module's field limits of Zoho CRM. Create a new script by specifying the below values for name, description, event, page, and module. Refer to Creating a Client Script for more details.

Script:

Copy
 
var notes_pop_up = ZDK.Client.getInput([{ type: 'text', label: 'Comments' }], 'Deal', 'OK', 'Cancel');
var notes_field = ZDK.Page.getField("Description");
if (notes_field != null) {
var desc = notes_field.getValue() + " " + value + "- " + notes_pop_up +",";
    notes_field.setValue(desc);
}

Here is how the Client Script works.