Functions
#
showMessage(message, options)
Show a toast message in Page with following markdown support.
Note: The presence of an active loader restricts the availability of other pop-ups. Image Markdown not supported for showMessage.
Italics - _text_
Bold - *text*
Underline - __text__
Strikeout - ~text~
Code - `text`
Heading1 - # text
Heading3 - ### text
Blockquote - !text
Hyperlink - [click here](https://www.zoho.com)
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
message |
String | text to be displayed |
||
options |
Object |
<optional> |
message options |
|
type |
'info' | 'error' | 'warning' | 'success' |
<optional> |
info | type of message |
Example
ZDK.Client.showMessage('This is an *important* warning.', { type: 'warning' });
#
showAlert(message, heading, accept_message)
Show Alert message with markdown support.
Note: The presence of an active loader restricts the availability of other pop-ups.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
message |
String | primary text to be displayed |
||
heading |
String |
<optional> |
heading to be displayed |
|
accept_message |
String |
<optional> |
Okay | accept button message |
Examples
ZDK.Client.showAlert('First Name will be mandatory from next week');
ZDK.Client.showAlert('You can [click here](https://www.zylker.com) to visit the page.', 'Notice', 'Got it!');
ZDK.Client.showAlert('This is an __important__ message\n This is an *important* message');
ZDK.Client.showAlert('![alt text](https://link-to/sample.png)');
#
showConfirmation(message, accept_message, reject_message) → {Boolean}
Show confirmation box with markdown support and accept/reject message.
Note: The presence of an active loader restricts the availability of other pop-ups.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
message |
String | text to be displayed |
||
accept_message |
String |
<optional> |
Yes, Proceed | accept button message |
reject_message |
String |
<optional> |
Cancel | reject button message |
confirmation response
Examples
ZDK.Client.showConfirmation('Are you sure?');
ZDK.Client.showConfirmation('Are you *sure*?', 'Yes. Got it!', 'Nope');
true | false
#
getInput(options, heading, accept_message, reject_message) → {Object}
Get one or more input.
Note: The presence of an active loader restricts the availability of other pop-ups.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
options |
Object | |||
type |
Array.<{type: ('text'|'number'|'textarea'|'picklist')}> |
<optional> |
'text' | Max Value Limit
Input options - 7
|
label |
String |
<optional> |
label for input field |
|
default_value |
String |
<optional> |
||
list_options |
Array.<{actual_value: string, display_value: string}> |
<optional> |
list of options for picklist |
|
heading |
String |
<optional> |
Heading |
|
accept_message |
String |
<optional> |
Okay | accept button message |
reject_message |
String |
<optional> |
Cancel | reject button message |
Get input response
Examples
ZDK.Client.getInput([{ type: 'number', label: 'Enter No. of employees' }, { type: 'text', label: 'Enter batch name' }], 'Employees', 'OK', 'Cancel');
['120', 'Batch A']
ZDK.Client.getInput([{ type: 'textarea', label: 'Enter batch name', default_value:'sample' }], 'Employees', 'OK', 'Cancel');
['sample']
ZDK.Client.getInput([{ type: 'picklist', label: 'Enter branch', list_options: [{ actual_value: "Sales", display_value: "Sales Department" }, { actual_value: "HR", display_value: "HR Department" }], default_value:"HR" }], 'Employees', 'OK', 'Cancel');
['HR']
# Detail Page (Canvas) Detail Page (Standard)
openMailer(mail_config)
Open Mailer component.
Note: The presence of an active loader restricts the availability of other pop-ups.
Parameters:
Name | Type | Description |
---|---|---|
mail_config |
Object | Configuration for send mail form |
from |
string | from address |
to |
Array.<{email: string, label: string}> | to address |
cc |
Array.<{email: string, label: string}> | cc address |
subject |
string | email subject |
body |
string | email body |
templateId |
string | email template id |
Example
ZDK.Client.openMailer({from: 'example@zoho.com', to: [{email: 'zylker@zyldomain.com', label: 'Zylker'}], cc: [{email: 'info@zyldomain.com', label: 'Zylker Info'}], subject: 'Welcome to Client Script', body: 'Hi Zylker!!', templateId:"1776121000000732265"});
#
navigateTo(page, params, data, target)
Navigate to record's detail page, create page, list view etc.,
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
page |
'tab' | 'record_detail' | 'record_create' | 'record_clone' | 'record_edit' | 'record_list' |
|
||
params |
object | |||
module |
string | api name of the module |
||
record_id |
string |
<optional> |
id of the record |
|
layout_id |
string |
<optional> |
id of the layout |
|
custom_view_id |
string |
<optional> |
${default} | custom view id of the page |
data |
object |
|
||
target |
'_blank' | '_self' |
<optional> |
_self |
|
Examples
ZDK.Client.navigateTo('tab', { module: 'WebTab1' }, '_blank', { data: 'sample' })
ZDK.Client.navigateTo('tab', { module: 'Leads' }, '_blank');
ZDK.Client.navigateTo('record_list', { module: 'Leads', custom_view_id: '111111000000046317' });
ZDK.Client.navigateTo('record_detail', { module: 'Leads', record_id: '11111023162335' });
ZDK.Client.navigateTo('record_list', { module: 'Leads', custom_view_id: '111111000000046541', custom_data: [{ key: "value"}] },'_self',);
ZDK.Client.navigateTo('record_create', { module: 'Leads', layout_id: "111111000000069302"});
#
openPopup(config, data) → {object|string|number|boolean}
Open popup widget and await a response from the widget's $Client.close(). Moreover, custom data can be passed to widget's 'PageLoad' event. Supported Widget SDK version >= 1.2.
Note: The presence of an active loader restricts the availability of other pop-ups.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
config |
Object | |||
api_name |
String | api name of the widget (Custom Button type) |
||
type |
String | widget |
||
header |
String |
<optional> |
${widget name} | header for the popup
|
close_icon |
Boolean |
<optional> |
true | toggle close icon |
close_on_escape |
Boolean |
<optional> |
false | toggle close on Esc key |
animation_type |
1 | 2 | 3 | 4 | 5 | 6 |
<optional> |
1 | define the animation style of the popup
|
height |
'200px' | '20vh' |
<optional> |
'70vh' | popup height |
width |
'500px' | '50vw' |
<optional> |
'60vw' | popup width |
top |
'0' | '20px' | 'center' |
<optional> |
'0' | popup offset > top |
left |
'0' | '20px' | 'center' |
<optional> |
'center' | popup offset > left |
bottom |
'0' | '20px' | 'center' |
<optional> |
popup offset > bottom (overrides top property) |
|
right |
'0' | '20px' | 'center' |
<optional> |
popup offset > right (overrides left property) |
|
data |
any |
<optional> |
data to be passed as 'PageLoad' event data in Widget |
Response from widget's $Client.close()
Example
ZDK.Client.openPopup({ api_name: 'sample_widget', type: 'widget', header: 'Sample Widget', animation_type: 4, height: '450px', width: '450px', left: '10px' }, { data: 'sample data to be passed to "PageLoad" event of widget' });
#
openCallout(config, target, data) → {object|string|number|boolean}
Open callout widget and await a response from the widget's $Client.close(). Moreover, custom data can be passed to widget's 'PageLoad' event. Similar to [ZDK.Client.openPopup](ZDK.Client.html#.openPopup) but, opens as a callout to the target component(Eg., Field in form) and by default, widget closes when out of focus. Supported Widget SDK version >= 1.2.
Note: The presence of an active loader restricts the availability of other pop-ups.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
config |
Object | |||
api_name |
String | api name of the widget (Custom Button type) |
||
type |
String | Callout type |
||
header |
String |
<optional> |
${widget name} | header for the popup
|
close_icon |
Boolean |
<optional> |
true | toggle close icon |
close_on_body_click |
Boolean |
<optional> |
true | To keep/close callout on body click |
height |
'200px' | '20vh' |
<optional> |
'70vh' | popup height |
width |
'500px' | '50vw' |
<optional> |
'60vw' | popup width |
target |
Object | callout target (field) |
||
data |
String |
<optional> |
data to be passed as 'PageLoad' event data in Widget |
Response from widget's $Client.close()
Example
ZDK.Client.openCallout({ api_name: 'sample_widget', type: 'widget', header: "Sample Widget", height: '450px', width: '450px' }, { type: 'field', api_name: 'State' }, { data: 'sample' });
#
createFlyout(name, config) → {Flyout}
Flyout is a container to show Widgets with customizations like position, size, animation etc.,
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
name |
String | flyout name |
||
config |
Object |
<optional> |
||
header |
String |
<optional> |
${widget name} | header for the flyout |
close_icon |
Boolean |
<optional> |
true | toggle close icon |
close_on_exit |
Boolean |
<optional> |
true | To keep/close flyout on page navigation |
animation_type |
1 | 2 | 3 | 4 | 5 | 6 |
<optional> |
1 | define the animation style of the flyout
|
height |
'200px' | '20vh' |
<optional> |
'40vh' | flyout height |
width |
'500px' | '50vw' |
<optional> |
'20vw' | flyout width |
top |
'0' | '20px' | 'center' |
<optional> |
'20px' | flyout offset > top |
left |
'0' | '20px' | 'center' |
<optional> |
'center' | flyout offset > left |
bottom |
'0' | '20px' | 'center' |
<optional> |
flyout offset > bottom (overrides top property) |
|
right |
'0' | '20px' | 'center' |
<optional> |
flyout offset > right (overrides left property) |
Example
ZDK.Client.createFlyout('myFlyout', { header: 'Sample Flyout', animation_type: 4 });
#
getFlyout(name) → {Flyout}
Get a Flyout with name
Parameters:
Name | Type | Description |
---|---|---|
name |
String | flyout name |
Example
ZDK.Client.getFlyout('myFlyout');
#
showLoader(config)
Display the loader with message.
Note: The presence of an active loader restricts the availability of other pop-ups.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
config |
Object | |||
type |
'page' |
<optional> |
'page' | type of loader |
template |
'spinner' | 'vertical-bar' | 'standard' |
<optional> |
'standard' | templates of loader (Note: spinner and vertical bar can be used when invoking time consuming APIs) |
message |
'String' |
<optional> |
null | message to be displayed
|
Example
ZDK.Client.showLoader({type: 'page', template:'vertical-bar', message: 'Loading ...'});