zohoprojects.init().then(function(){});
zohoprojects.init().then(function () {
zohoprojects.get("portal.name").then(function (response)
});
zohoprojects.metadata().then(function(response)
{
/* output
{
"data": {
"configs": [
{
"name": "Name",
"type": "text",
"is_mandatory": true,
"is_secure": false,
"description": "Enter your name",
"value": "Helen Collins"
},
{
"name": "Employee ID",
"type": "text",
"is_mandatory": true,
"is_secure": false,
"description": "Enter your Emp. ID",
"value": "EMP08"
}
],
"payments_info": {
"edition": "trial"
},
"status": "success"
}
}
*/
});
zohoprojects.context().then(function(response)
{
/* output
{
"module_name": "tasks",
"entity_id": "27092000000031079"
}
*/
});
हम विजेट स्थान 'app_settings', 'attachment_picker', 'blueprint_during' और 'top_band' स्थानों के लिए इकाई ID नहीं देते हैं।
zohoprojects.get("task.id
").then(function(response)
{
/* output
{
"data": 27092000000031080,
"status": "success"
}
*/
});
zohoprojects.get("deployment_type").then(function() {
/* output
com
*/
});
zohoprojects.get("current_theme").then(function() {
/* output
{mode: "default", zpPrimary: "255, 100, 0", zpPrimaryHover: "255, 247, 243"}
*/
});
zohoprojects.get("blueprint_during").then(function(res) {
/* output
[ {field_id: "UDF_CHAR1", is_visible: true, is_pii: false, is_encrypted: false}
{field_id: "UDF_CHAR2", is_visible: true, is_pii: false, is_encrypted: false}]
*/
});
var nameObj={name:"Create a new checklist"};
zohoprojects.set("task",nameObj).then(function(response)
{
/* output
{
"data": {
"tasks": [
{
"milestone_id": "2*******************2",
"link": {
"timesheet": {
"url": "https://p*************e.********.com/restapi/portal/5******7/projects/2****************9/tasks/2****************9/logs/"
},
"self": {
"url": "https://p*************e.********.com/restapi/portal/5******7/projects/2****************9/tasks/2****************9/"
}
},
"description": "",
"duration": "0",
"last_updated_time_long": 1542193097398,
"details": {
"owners": [
{
"name": "JOHN MARSH",
"id": "5************3"
}
]
},
"id": 2************0,
"key": "WEUT-T1",
"created_person": "Steve Banks",
"created_time_long": 1525668983347,
"created_time": "05-07-2018",
"is_reminder_set": false,
"is_recurrence_set": false,
"created_time_format": "05-07-2018 10:26:23 AM",
"subtasks": false,
"work": "0:00",
"custom_fields": [
{
"column_name": "UDF_LONG1",
"label_name": "Expense Amount",
"value": "24573"
},
{
"column_name": "UDF_LONG3",
"label_name": "sample",
"value": "0"
},
{
"column_name": "UDF_LONG2",
"label_name": "test",
"value": "200"
}
],
"isparent": false,
"work_type": "work_hrs_per_day",
"completed": false,
"priority": "None",
"created_by": "5******3",
"percent_complete": "0",
"last_updated_time": "11-14-2018",
"name": "Create a new checklist",
"id_string": "2************9",
="last_updated_time_format": "11-14-2018 04:28:17 PM",
"tasklist": {
"name": "General",
"id": "2************7"
},
"order_sequence": 1,
"status": {
"name": "Open",
"id": "2************1",
"type": "open",
"color_code": ""
}
}
]
},
"status": "success"
}
*/
});
linkfiles=[{
"created_time": 1561028014712,
"id": "1LavBS5sauJ-AAFJZWp8Ch9Cp2ehydahk",
"type": "image/jpeg",
"created_by": "Patricia Boyle",
"permanent_url": "https://***************",
"size": 7409,
"preview_url": "https://******************",
"name": "sample-image.jpeg",
"download_url": "https://drive.google.com/a/web-mailhosting.com/uc?id=1LavBS5sauJ-AAFJZWp8Ch9Cp2ehydahk&export=download",
}]
zohoprojects.set('linkfiles', linkFiles).then(function (response) {
zohoprojects.invoke('attachment_picker.close');
});
var sample = [ {field_id: "UDF_CHAR1", is_visible: true, is_pii: false, is_encrypted: false}
{field_id: "UDF_CHAR2", is_visible: true, is_pii: false, is_encrypted: false}];
zohoprojects.set("blueprint_during", sample).then(function(res) {
/* output
[ {field_id: "UDF_CHAR1", is_visible: true, is_pii: false, is_encrypted: false}
{field_id: "UDF_CHAR2", is_visible: true, is_pii: false, is_encrypted: false}]
*/
});
let paramObj = {
"custom_data": {
"path": "G/pics",
"portal_id": "89031033",
"project_id": "185977000000199005"
},
"display_data" : [
{
"name": "Path",
"value": "G's Drive",
"link": "https://drive.google.com/drive/folders/1e1xWqREV"
}, {
"name": "App Name",
"value": "G- Drive"
}
]
zohoprojects.set('execute', paramObj);
var file = document.getElementById("inputbox").files[0];
var file_detail = {
type: "GET",
files: [{
uploaddoc : file
type : "binary" //If the file is uploaded as binary
}],
parameters: {
fields: "id,name, thumbnailLink, webViewLink, webContentLink"
}
};
var url = "https://www.googleapis.com/drive/v3/files/1-QabBt69U8myXYRDVU-1YiCo2k-JWRfu";
zohoprojects.request(url, file_detail, "google_drive").then(function (response)
/* Output
{
"result": {
"webContentLink": "https://drive.google.com/uc?id=1-QabBt69U8myXYRDVU-1YiCo2k-JWRfu&export=download",
"name": "Eiffel_Tower_01.jpg",
"webViewLink": "https://drive.google.com/file/d/1-QabBt69U8myXYRDVU-1YiCo2k-JWRfu/view?usp=drivesdk",
"id": "1-QabBt69U8myXYRDVU-1YiCo2k-JWRfu",
"thumbnailLink": "https://lh3.googleusercontent.com/nhyq9mHrGDOZfNdQUHRj_xVlOoNAP5PEYkW4X2svGXKjVt53MvMGfjhQ2PlTv4cmv5-PgbjrR-c=s220"
},
"status": "success"
}
*/});| तर्क नाम | डेटा प्रकार | विवरण | ||
| URL | string | तृतीय-पक्ष URL जिसे आपके एक्सटेंशन से आमंत्रित किया जाना चाहिए। | ||
| object | JSONObject | कुंजी | डेटा प्रकार | मान |
| type | string | "GET" / "POST" / "PUT" / "DELETE" / "PATCH" | ||
| parameters | JSONObject | API के request पैरामीटर। | ||
| headers | JSONObject | API के headers। | ||
| body | JSONObject |
API का body।
|
||
| files | JSONArray |
फ़ाइल अपलोड करने के लिए पैरामीटर। मान: वास्तविक फ़ाइल। *यदि वास्तविक फ़ाइल अपलोड की जाती है तो body को अनदेखा किया जाएगा *यदि आप type को binary के रूप में निर्दिष्ट करते हैं, तो फ़ाइल को binary के रूप में भेजा जाएगा। फ़ाइल के body को भी माना जाएगा |
||
| replace_secure_config | Boolean |
यदि plugin-manifest.json फ़ाइल में is_secure पैरामीटर true है, तो इस पैरामीटर का मान true पर सेट करें। आप URL और object पैरामीटर में इस प्रारूप में मान पास कर सकते हैं - {{name}} //कॉन्फ़िगरेशन का नाम
Zoho Projects कॉन्फ़िगरेशन मान को प्रतिस्थापित करेगा |
||
| connection_link_name | string | The connection link name zapps वेबसाइट से जेनरेट किया गया। आप connection link name को plugin-manifestसे प्राप्त कर सकते हैं। | ||
let customData = {"name":"Create a new checklist"};
zohoprojects.function.execute("c8a9e660-95e2-11ef-9d3c-2d653cc724d7", "1.0", customData).then(function(response){
/* आउटपुट
{ "result":{"output":"{}","Tasks":[],"outputType":"void","message":{}},
"unique_id":"c8a9e660-95e2-11ef-9d3c-2d653cc724d7",
"code":3009,
"function_id":1234567890,
"message":"Function Executed Successfully",
"status":"Success"
}
*/
});

यह अनुभाग परिभाषित करता है थीम रंग वेरिएबल जो पूरे एप्लिकेशन में उपयोग किए जाते हैं।
सभी रंग हैं:
CSS वेरिएबल (--zp*) का उपयोग करके परिभाषित
rgb(var(--variable)) के माध्यम से उपभोग किए जाते हैं
समर्थन करने के लिए डिज़ाइन किए गए दिन मोड और गहरा मोड
color: rgb(var(--zpOnData));
background-color: rgb(var(--zpSurface));
border-color: rgb(var(--zpFormElementBdr));
दिन मोड: गहरे पाठ के साथ हल्का UI
गहरा मोड: हल्के पाठ के साथ गहरा UI
रंग टोकन नीचे सूचीबद्ध हैं
|
|
CSS वेरिएबल नाम |
दिन मोड |
गहरा मोड |
|
1 |
--zpPrimary |
255, 100, 0 |
|
|
2 |
--zpPrimaryHover |
255, 247, 243 |
40, 40, 40 !important |
|
3 |
--zpOnPrimary |
255, 255, 255 |
|
|
4 |
--zpBackground |
255, 255, 255 |
0, 0, 0 |
|
5 |
--zpOnBackground |
0, 0, 0 |
97, 97, 97 |
|
6 |
--zpSurface |
255, 255, 255 |
0, 0, 0 |
|
7 |
--zpOnSurface |
0, 0, 0 |
185, 185, 185 |
|
8 |
--zpSurfaceBdr |
230, 230, 230 |
18, 18, 18 |
|
9 |
--zpSecondary |
250, 250, 250 |
13, 13, 13 |
|
10 |
--zpOnSecondary |
70, 70, 70 |
158, 158, 158 |
|
11 |
--zpSecondaryBdr |
235, 235, 235 |
46, 46, 46 |
|
12 |
--zpData |
255, 255, 255 |
18, 18, 18 |
|
13 |
--zpOnData |
32, 33, 35 |
187, 187, 187 |
|
14 |
--zpOnDataLight |
85, 85, 85 |
102, 102, 102 |
|
15 |
--zpPopupBase |
255, 255, 255 |
30, 30, 30 |
|
16 |
--zpShadow |
0, 0, 0 |
0, 0, 0 |
|
17 |
--zpBorderGrey |
0, 0, 0 |
225, 225, 225 |
|
18 |
--zpMLTGroup |
248, 248, 248 |
25, 25, 25 |
|
19 |
--zpOnMLTHeader |
167, 169, 172 |
102, 102, 102 |
|
20 |
--zpOnMLTHeaderBdr |
242, 242, 242 |
40, 40, 40 |
|
21 |
--zpFormElement |
255, 255, 255 |
8, 8, 8 |
|
22 |
--zpFormElementBdr |
232, 238, 244 |
|
|
23 |
--zpMandatory |
255, 247, 247 |
39, 7, 7 |
|
24 |
--zpMandatoryBdr |
119, 28, 33 |
|
|
25 |
--zpFreeze |
50, 50, 50, .82 |
50, 50, 50, .82 |
|
26 |
--zpDisabled |
241, 241, 241 |
62, 62, 62 |
|
27 |
--zpOnDisabled |
142, 142, 142 |
152, 152, 152 |
|
28 |
--zpTooltip |
0, 0, 0 |
222, 222, 222 |
|
29 |
--zpOnTooltip |
242, 242, 242 |
0, 0, 0 |
|
30 |
--zpProgressGreen |
135, 211, 124 |
108, 156, 101 |
|
31 |
--zpBlackOpac |
0,0,0 |
255, 255, 255 |
|
32 |
--zpBulkUpdate |
40, 40, 40 |
|
|
33 |
--zpDropDownShadow |
-2px 0 15px rgba(0, 0, 0, .41) |
|
रंग टोकन श्रेणियाँ
प्राथमिक रंग (उपयोग: बटन, सक्रिय स्थितियाँ, हाइलाइट्स )
--zpPrimary
--zpPrimaryHover
--zpOnPrimary
सतह और पृष्ठभूमि(उपयोग: पृष्ठ पृष्ठभूमि, कार्ड, कंटेनर्स)
--zpBackground
--zpSurface
--zpSecondary
पाठ रंग (उपयोग: लेबल, इनपुट पाठ, माध्यमिक पाठ)
--zpOnData
--zpOnSurface
--zpOnSecondary
--zpOnDataLight
फॉर्म तत्व (उपयोग: इनपुट, सिलेक्ट, सत्यापन स्थितियाँ)
--zpFormElement
--zpFormElementBdr
--zpMandatory
--zpMandatoryBdr
स्थिति रंग
--zpDisabled
--zpOnDisabled
--zpMandatory
--zpProgressGreen
ओवरलेज़ और प्रभाव
--zpPopupBase
--zpShadow
--zpDropDownShadow
--zpFreeze
सभी फॉर्म घटकों में सुसंगत UI/UX
CSS चर का उपयोग करके थीम-आधारित स्टाइलिंग
पहुँचयोग्यता और कई स्थितियों के लिए समर्थन
पाठ (text)
ईमेल (email)
पासवर्ड (password)
खोज (search)
संख्या (number)
<select> (मूल और कस्टम)
<textarea>
Select2 ड्रॉपडाउन
कस्टम चेकबॉक्स (.c-checkbox)
कस्टम रेडियो (.cradio)
स्थितियाँ और व्यवहार
होवर: बॉर्डर का रंग हल्के प्राथमिक में बदल जाता है
फ़ोकस: मजबूत बॉर्डर हाइलाइट, रूपरेखा लागू की गई
उपयोग: <input type="text" mandatory="yes">
व्यवहार our: हाइलाइट की गई सीमा (--zpMandatoryBdr), हल्का पृष्ठभूमि रंग
<div class="select-style">
<select>
<option>विकल्प 1</option>
</select>
</div>
कस्टम ड्रॉपडाउन तीर
मूल ब्राउज़र स्टाइलिंग को हटाता है
पूरी तरह प्रतिक्रियाशील
<div class="c-checkbox">
<input type="checkbox" id="chk1">
<label for="chk1">विकल्प</label>
</div>
कस्टम UI प्रदर्शन
समर्थन करता है:
जांचा गया / अनचेक किया गया
अनिश्चित
अक्षम
त्रुटि अवस्था
<div class="c-checkbox">
<input type="checkbox" id="indChk">
<label for="indChk">आंशिक रूप से चयनित</label>
</div>
<script>
document.getElementById("indChk").indeterminate = true;
</script>
<div class="cradio">
<input type="radio" id="r1" name="group">
<label for="r1">विकल्प</label>
</div>
कस्टम गोलाकार UI
सुचारु चयन एनिमेशन
अक्षम अवस्था समर्थन
अक्षम अवस्था उदाहरण
<input type="text" value="Disabled Input" disabled>
<div class="select-style">
<select disabled>
<option>अक्षम Select</option>
</select>
</div>
<textarea disabled>अक्षम टेक्स्टएरिया</textarea>
<div class="c-checkbox">
<input type="checkbox" id="chk-disabled" disabled>
<label for="chk-disabled">अक्षम चेकबॉक्स</label>
</div>
<div class="cradio">
<input type="radio" id="r-disabled" name="group" disabled>
<label for="r-disabled">अक्षम रेडियो</label>
</div>
<div class="c-checkbox">
<input type="checkbox" id="chk2" checked disabled>
<label for="chk2">चुना गया और अक्षम</label>
</div>
|
कक्षा |
उद्देश्य |
|
.formfield-style |
सुसंगत फ़ील्ड ऊंचाई के लिए रैपर |
|
.disabled-element |
अक्षम शैली को मैन्युअली लागू करें |
दाएँ से बाएँ लेआउट को समर्थन करता है:
<body dir="rtl">
समर्थित कक्षाएँ:
.select2-container
.select2-choice
.select2-choices
<form>
<input type="text" placeholder="नाम" mandatory="yes">
<div class="select-style">
<select>
<option>देश चुनें</option>
</select>
</div>
<textarea placeholder="संदेश"></textarea>
<div class="c-checkbox">
<input type="checkbox" id="agree">
<label for="agree">सहमति दें</label>
</div>
<div class="cradio">
<input type="radio" id="r1" name="g">
<label for="r1">विकल्प 1</label>
</div>
</form>