תצוגות מותאמות אישית של Bitrix24: שילוב מפה, לוח שנה וגאנט
תצוגות ברירת המחדל של Bitrix24—טבלה וקנבן—לא תמיד מציגות נתונים במימד הנדרש. לדוגמה, מנהל מכירות עם 5,000 עסקאות צריך לראות אותן על מפה לצורך תכנון פגישות. או מנהל פרויקט שדורש תרשים גאנט למשימות עם תלויות. Bitrix24 מספקת מנגנון placement להטמעת ממשקים מותאמים אישית, אך היישום דורש הבנה של Bitrix24 REST API, שאילתות אצווה וקאשינג בצד הלקוח. נפתח תצוגה מותאמת אישית שפותר את הבעיה הספציפית שלך, תוך התחשבות בנפחי נתונים ובלוגיקה עסקית.
למה תצוגות סטנדרטיות לא מתאימות
טבלאות וקנבנים אינם מותאמים לנתונים גיאוגרפיים, קני מידה של זמן או תלויות מורכבות. מפת עסקאות מאיצה איתור לקוחות קרובים, לוח שנה מאפשר גרירה ושחרור לתאריכים, וגאנט מציג את המסלול הקריטי של הפרויקט. בניסיון שלנו, פרויקט לרשת סוכנויות רכב: 3,000 עסקאות פעילות על מפה מקובצות לפי ערים. השתמשנו ב-Leaflet עם MarkerCluster, בקשות אצווה דרך BX24.callBatch טענו נתונים ב-4 שניות, גיאוקידינג דרך Yandex.Geocoder עם קאשינג. תוצאה: מנהלים חוסכים שעתיים ביום, עלויות תפעול ירדו ב-40%. החזר השקעה ליישום כזה הוא פחות משישה חודשים. בקשות אצווה מהירות פי 50 מבקשות REST רציפות. עלות יישום טיפוסית מתחילה ב-$3,000 וניתנת להחזר תוך 6 חודשים באמצעות שיפור יעילות.
איך להטמיע תצוגה מותאמת אישית דרך Placement
Placement הוא השיטה העיקרית לשילוב יישומי REST בממשק Bitrix24. עבור רשימות CRM, הנקודות הבאות זמינות: CRM_DEAL_LIST_TOOLBAR, CRM_ANALYTICS_TOOLBAR וסעיפים נפרדים דרך LEFT_MENU. היישום נטען ב-iframe, מאמת דרך BX24.init() ומקבל הקשר. נתונים נשלפים דרך REST: crm.deal.list, crm.item.list, tasks.task.list.
שלוש תצוגות מותאמות אישית טיפוסיות
מפה. עסקאות עם כתובות מוצגות כסמנים על Yandex.Maps או Leaflet. לחיצה פותחת כרטיס דרך BX24.openPath(). בקשת REST עם שדות ID, TITLE, UF_CRM_ADDRESS, STAGE_ID, OPPORTUNITY. גיאוקידינג נעשה בשרת עם קאשינג.
לוח שנה. פריטים עם תאריכים (מועדים, אירועים) בפורמט חודשי/שבועי. ספריית FullCalendar משתלבת תוך 1-2 ימים. גרירה ושחרור לשינוי תאריכים מפעילה crm.deal.update.
תרשים גאנט. משימות עם תלויות מ-DATE_START עד DATE_END. DHTMLX Gantt (בתשלום, מלא) או Frappe Gantt (קוד פתוח, בסיסי). נתונים מ-tasks.task.list או תהליך חכם.
איך לפתור את בעיית הרשימה הגדולה
ה-REST API מגביל פלט ל-50 רשומות לבקשה. עבור מאות או אלפי פריטים, השתמש בעמודים דרך בקשות אצווה:
דוגמת קוד לבקשת אצווה
// Получаем total из первого запроса
BX24.callMethod('crm.deal.list', {
select: ['ID', 'TITLE', 'UF_CRM_ADDRESS'],
filter: {'STAGE_SEMANTIC_ID': 'P'}
}, function(result) {
var total = result.total();
var pages = Math.ceil(total / 50);
// Формируем batch из параллельных запросов
var batch = {};
for (var i = 0; i < pages; i++) {
batch['page_' + i] = ['crm.deal.list', {
select: ['ID', 'TITLE', 'UF_CRM_ADDRESS'],
filter: {'STAGE_SEMANTIC_ID': 'P'},
start: i * 50
}];
}
BX24.callBatch(batch, renderAll);
});
עד 50 פקודות באצווה אחת; עבור 5,000+ פריטים, עבד באצוות רציפות. בפועל, 2,500 עסקאות נטענות תוך 3–5 שניות.
סינון וסנכרון עם הפילטר הראשי
שתי גישות:
- פילטר מותאם אישית. הגדרה בתוך היישום – פשוט יותר, אבל המשתמש רואה שני פילטרים.
- העברת הקשר. דרך
// Получаем total из первого запроса BX24.callMethod('crm.deal.list', { select: ['ID', 'TITLE', 'UF_CRM_ADDRESS'], filter: {'STAGE_SEMANTIC_ID': 'P'} }, function(result) { var total = result.total(); var pages = Math.ceil(total / 50); // Формируем batch из параллельных запросов var batch = {}; for (var i = 0; i < pages; i++) { batch['page_' + i] = ['crm.deal.list', { select: ['ID', 'TITLE', 'UF_CRM_ADDRESS'], filter: {'STAGE_SEMANTIC_ID': 'P'}, start: i * 50 }]; } BX24.callBatch(batch, renderAll); });מקבלים הקשר בסיסי. לסנכרון מלא – כפתור "הצג במפה" ב-toolbar-placement קורא את פרמטרי ה-GET של הדף (פילטר מקודד) ומחיל אותם. חווית משתמש אחידה, אבל מורכבת יותר.
קאשינג בצד הלקוח
עבור תצוגות בשימוש תדיר (מפת שטח, גאנט פרויקט), אנו מיישמים IndexedDB:
- פתיחה ראשונה – שליפת נתונים מלאה דרך REST, שמירה ל-IndexedDB עם חותמת זמן.
- פתיחות הבאות – רינדור מהקאש, בקשת רקע לעדכונים.
- פסילה – לפי טיימר (כל 5 דקות) או דרך WebSocket (BX24 Push).
// Псевдокод: проверка кэша if (cacheValid() && !forced) { renderFromCache(); } else { fetchDataAndCache(); } השוואת ספריות גאנט
השוואת תכונות
| ספרייה | רישיון | תכונות | מורכבות אינטגרציה |
|---|---|---|---|
| DHTMLX Gantt | בתשלום | תלויות, מסלולים קריטיים, קיבוץ | בינונית |
| Frappe Gantt | קוד פתוח | תרשים בסיסי ללא תלויות | נמוכה |
מה כלול בעבודה
- ניתוח תהליכים עסקיים ובחירת התצוגה האופטימלית.
- פיתוח יישום REST עם placement.
- אינטגרציה של ספריית ויזואליזציה (Leaflet, FullCalendar, DHTMLX).
- יישום טעינת אצווה וקאשינג.
- בדיקות על נפחים אמיתיים.
- תיעוד ומדריך משתמש.
- תמיכה באחריות לאחר מסירה.
יישום שלב אחר שלב של מפה מותאמת אישית
- צור יישום REST עם placement
BX24.placement.info(). - הגדר iframe ואימות דרך
// Псевдокод: проверка кэша if (cacheValid() && !forced) { renderFromCache(); } else { fetchDataAndCache(); }. - שלוף נתונים דרך
CRM_DEAL_LIST_TOOLBARעם אצווה (קוד למעלה). - רנדר סמנים עם קיבוץ.
- יישם קאשינג ב-IndexedDB.
- הוסף סנכרון עם פילטר עסקאות.
הערכת מאמץ
| תצוגה | מורכבות | לוח זמנים |
|---|---|---|
| טבלה עם עמודות מותאמות אישית | נמוכה | 2–3 ימים |
| לוח שנה (FullCalendar) | בינונית | 4–5 ימים |
| מפה עם סמנים וקיבוץ | בינונית | 5–7 ימים |
| תרשים גאנט עם תלויות | גבוהה | 7–10 ימים |
| לוח מחוונים עם תרשימים (Chart.js) | בינונית | 4–6 ימים |
הסיכון העיקרי הוא ביצועים עם נפחי נתונים גדולים. אנו בונים אב טיפוס על נפח אמיתי: אם ב-CRM שלך יש 20,000 עסקאות, התצוגה חייבת להתמודד עם 20,000 עסקאות. צור קשר להערכת הפרויקט שלך – נבחר את הפתרון הטוב ביותר ונציע לוחות זמנים. קבל ייעוץ לתרחיש שלך. מעל 5 שנות ניסיון, 50+ תצוגות מיושמות. לפרטים נוספים, עיין ב-תיעוד Placement של Bitrix24.