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のリクエストパラメーターです。 | ||
| headers | JSONObject | APIのヘッダーです。 | ||
| body | JSONObject |
APIの本文です。
|
||
| files | JSONArray |
ファイルをアップロードするためのパラメーターです。 値:実際のファイル。 *実際のファイルをアップロードした場合、本文は無視されます *typeにbinaryを指定すると、ファイルはバイナリー形式で送信されます。ファイルの本文も処理対象になります |
||
| replace_secure_config | Boolean |
plugin-manifest.jsonファイルのis_secureパラメーターがtrueの場合、このパラメーターの値をtrueに設定します。
URLおよびオブジェクトパラメーターでは、設定の値を{{name}} //nameの形式で渡すことができます。
Zoho Projectsによって設定値が置き換えられます。 |
||
| connection_link_name | string | zappsのWebサイトで生成された接続リンク名です。接続リンク名はplugin-manifestから取得できます。 | ||
let customData = {'name':'Create a new checklist'};
zohoprojects.function.execute('c8a9e660-95e2-11ef-9d3c-2d653cc724d7', '1.0', customData).then(function(response){
/* output
{ '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変数を使用したテーマベースのスタイル設定
アクセシビリティと複数の状態をサポート
テキスト
メール
パスワード
検索
数値
<select>(ネイティブおよびカスタム)
<textarea>
Select2ドロップダウン
カスタムチェックボックス(.c-checkbox)
カスタムラジオボタン(.cradio)
状態と動作
ホバー:枠線の色が明るいプライマリカラーに変わります
フォーカス:枠線がより強調され、アウトラインが適用されます
使用例:<input type='text' mandatory='yes'>
動作:枠線が強調され(--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>
<div class='select-style'>
<select disabled>
<option>無効な選択リスト</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='Name' mandatory='yes'>
<div class='select-style'>
<select>
<option>Select Country</option>
</select>
</div>
<textarea placeholder='Message'></textarea>
<div class='c-checkbox'>
<input type='checkbox' id='agree'>
<label for='agree'>Agree</label>
</div>
<div class='cradio'>
<input type='radio' id='r1' name='g'>
<label for='r1'>Option 1</label>
</div>
</form>