תצוגות מותאמות אישית של 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.