סקילים — דפים וממשק

חמישה סקילים על מה שהמשתמש רואה: דפים, רשתות והאלמנטים שעליהם. שכבת הנתונים כבר קיימת (ישויות ושדות).

דפי כרטיס — מבנה ואסתטיקה: הטופס של רשומה בודדת — לקוח, מכירה, פנייה, או ישות מותאמת. החליף ב‑1.5.0 את myb-p-page-builder, ומוסיף ספר כללי אסתטיקה: שדה אחד לכל עמודה, שורות שמתמלאות מימין, כותרת סקשן אחידה, הפרדה עדינה בין סקשנים, ושדות שחוק טופס מסתיר בלי להשאיר חור בפריסה. כלים נייטיב בלבד — קוד רק כשאין דרך נייטיב.

┌─────────────────────────────────────────────┐
│  _MPID1: סרגל עליון (חזרה + כותרת)          │
├─────────────────────────────────────────────┤
│  _MPID0: תוכן ראשי — הטופס                  │
│  ┌─────────────────────────────────────┐    │
│  │ כותרת סקשן: "פרטי לקוח"             │    │
│  │ ┌──────────┬──────────┬──────────┐  │    │
│  │ │ שדה 1    │ שדה 2    │ שדה 3    │  │    │
│  │ │ col-4    │ col-4    │ col-4    │  │    │
│  │ └──────────┴──────────┴──────────┘  │    │
│  │ כותרת סקשן: "פרטי התקשרות"          │    │
│  │ ...                                 │    │
│  │ הערות (col-12, רוחב מלא)            │    │
│  │                                     │    │
│  │ טבלאות קשורות: [משימות][פעילויות]   │    │
│  └─────────────────────────────────────┘    │
├─────────────────────────────────────────────┤
│  _MPID2: סרגל תחתון (שמירה/מחיקה)           │
└─────────────────────────────────────────────┘

כל סקשן: שורת כותרת (col-12 עם אלמנט H2) ← שורות שדות (בדרך כלל [4,4,4]) ← הסקשן הבא.

מספור עמודות 0‑based: הראשונה היא toExistingColumn: 0.

// א. שורת כותרת
Edit-Page({ "pageId": "<id>", "actions": [
  { "actionType": "add-row", "columnSize": [12], "newRowAfterRow": "<lastRowId>" }
]})
// התשובה: info[0].newRowId → "P360"

// ב. טקסט הכותרת
Add-Edit-Text-Element({
  "pageId": "<id>", "elemType": "H2",
  "html": "<font color=\"#3249b3\" style=\"font-size: 24px;\">פרטי לקוח</font>",
  "rowId": "P360", "columnNumber": 0
})

// ג. שורת שדות
Edit-Page({ "pageId": "<id>", "actions": [
  { "actionType": "add-row", "columnSize": [4, 4, 4], "newRowAfterRow": "P360" }
]})

// ד. השדות — כאן אפשר לאגד כמה בקריאה אחת
Edit-Page({ "pageId": "<id>", "actions": [
  { "actionType": "add-new-field", "fieldName": "Name", "label": "שם",
    "fieldType": "String", "toExistingRow": "P364", "toExistingColumn": 0 },
  { "actionType": "add-new-field", "fieldName": "AccountId", "label": "לקוח",
    "fieldType": "Pointer", "targetClass": "Accounts",
    "toExistingRow": "P364", "toExistingColumn": 1 }
]})

א–ג רצים ברצף (כל אחד תלוי במזהה מהקודם); ד מאגד כמה שדות.

פרמטרים נוספים לשדות: targetClass (חובה ל‑Pointer), subclassDepend (רשימות נגזרות), autocomplete, isRequired, defaultValue, intoExistingElemId.

• טאבים (simbla-nav) — מיכל טאבים חדש נוצר ב‑Add-Edit-Tabs-Element (rowId + columnNumber + newTabs; נוצר <div class="simblaEL simbla-nav">). מה שאין: הזרקת שדות/טבלאות לתוך טאב ב‑Edit-Page. טבלאות קשורות מתווספות כסקשנים נפרדים.
• קווי הפרדה (separatorElm) — בעורך בלבד. במקומם כותרות סקשן.
• עריכת מאסטר — דפי טופס בלבד, לא TicketMaster / CRMmaster.
• גרירה ושחרור — MCP מציב לפי מזהי שורה ועמודה.

שורות

• מזהי שורה חוזרים ב‑info[] של התשובה; אין צורך לפרסר HTML.
• Get-Page-Content(minimal: true) מחזיר YAML קריא לניתוח מבנה קיים.
• move-existing-object על שורה עם שדות מייתם אותם. הזיזו שדות אחד‑אחד ב‑move-existing-field, מחקו את השורה הריקה, בנו חדשה.
• delete-row רק על שורה ריקה; אחרת השדות אובדים מהדף.
• edit-row לפני הזזת שדות: מעבר מ‑[6,6] ל‑[4,4,4] קודם, אחרת העמודה השלישית לא קיימת.
• Edit-Page-CSS-JS דורס את כל הבלוק: Get-Page-Content ← מיזוג ← כתיבה.

שגיאות

• “Field already exists” — שדה שכבר על הדף מקבל move-existing-field, לא add-new-field. הצליבו מול ה‑YAML.
• Edit-Page לא בודק שהשדה בסכימה: שדה שאינו בסכימה נוסף בהצלחה (success: true) ומרונדר כקלט שלא נשמר לשום מקום. Get-Schema הוא צעד שלכם.
• שם שדה חייב להתאים ל‑/^[A-Za-z][A-Za-z0-9_]*$/.

טבלאות קשורות

• Add-Table-View-to-Form-Page מייצר לבד שורת כותרת עם ה‑tableTitle.
• כמה טבלאות לאותו insertAfterRow מוערמות בסדר הפוך. למשימות ← פעילויות ← הערות, הזריקו בסדר הפוך.
• אין Pointer בטיפוסי השדות של הכלי: רק String, Number, Boolean, Date, PrivateFile, File. להצגת Pointer: fieldName: "PointerField.TargetField" עם type: "String".

שדה String שמוצב ב‑Edit-Page נרנדר תמיד כ‑<input type="text"> בשורה אחת, גם Comment, Description ו‑Notes; הם הופכים ל‑textarea רק בווידג’ט ה‑Comment של דפי התבנית המובנים. התיקון לטקסט ארוך הוא JS על הדף:

$(document).ready(function () {
  ['Resolution', 'RootCause', 'TechnicianNotes', 'Summary'].forEach(function (fieldName) {
    var $input = $('input[name="' + fieldName + '"]');
    if ($input.length && $input.attr('type') === 'text') {
      $input.replaceWith(
        $('<textarea>')
          .attr('name', fieldName)
          .attr('id', $input.attr('id'))
          .addClass($input.attr('class'))
          .val($input.val())
          .attr('rows', 3)
      );
    }
  });
});

Duplicate-Element(pageId, elemId) משכפל לעומק כל אלמנט עם המחלקה simblaEL; העותק נוחת מיד אחרי המקור עם מזהים חדשים, וכל המחלקות, הסגנונות והקישורים נשמרים.

מתי כן: טבלת רשומות קשורות מוגדרת (משכפלים, ואז Edit-Table-View מפנה אותה לטבלה אחרת), כותרת סקשן מעוצבת, בלוק טקסט.

“טבלת דף” היא <div class="simbla-table">. היא הבעלים של העמודות, קריטריוני החיפוש, המיון, העימוד, מצב העריכה, העיצוב המותנה, שורות הסיכום, העריכה מרובת‑השורות והייצוא לאקסל.

Edit-Table-View עובד על שניהם לפי tableId, בלי לשאול מאיזה סוג.

דף רשימה חדש (טופס חיפוש + טבלה)
  → Create-Table-View-Page
    ואז Edit-Table-View — לניקוי השאריות של Cases
    ואז Set-Page-Settings — לתיקון ה-SEO title המורש

שינוי עמודות/סינון/מיון/מצב עריכה בטבלה קיימת
  → Edit-Table-View

ווידג'ט של רשומות קשורות על כרטיס
  → Add-Table-View-to-Form-Page
    ואז Edit-Table-View — הכלי המשבץ משאיר aggrField כ-"undefined"

אילו שדות זמינים למחלקה
  → Get-Optional-Fields

כל קריאה מחליפה את המערך או האובייקט כולו; מה שלא כללתם נמחק. זה נכון ל‑columns, optionalFields, classPointers, criteria (בתוך filterAndSort) ו‑conditionalFormattingRules.

מה Edit-Table-View לא נוגע בו: טופס החיפוש <form class="dbFormQuery">, ה‑jsCode/cssCode המוטבעים, ה‑HTML של המודאל, וה‑SEO title. כשמשהו נראה שבור — הבעיה על אלמנט הטבלה, או על הדף סביבו?

field שולט במה שמוצג; aggrField שולט במה שצינור האגרגציה מאחורי המיון, הסינון והסיכום באמת שואל. לשדות ישירים הם זהים; ל‑Pointers ה‑aggrField משלב את שם מחלקת היעד:

אל תבנו aggrField מהאינטואיציה; העתיקו מ‑Get-Optional-Fields(className).

לטבלת הבן חייב להיות שדה Pointer שה‑targetClass שלו הוא מחלקת הכרטיס. ווידג’ט שממוקם ברמת הטופס מסונן אוטומטית לרשומות של הרשומה הפתוחה, בלי criteria.

Add-Table-View-to-Form-Page מחליט על העטיפה לפי מה שנמצא מיד אחרי שורת היעד ב‑HTML: שכן “מורכב” (מיכל טאבים, ווידג’ט אחר) גורם לכלי לקנן את הווידג’ט בתוכו במקום כאח.

התסמין: 0 רשומות על כרטיס שיש לו ילדים, או כל הרשומות במקום רק של ההורה. אחרי ההוספה, טפסו על ההורים ב‑Get-Page-Content וּודאו שאף אחד אינו simbla-nav או simbla-table.

• showSummary עם גרש כפול נשבר. ב‑Add-Table-View-to-Form-Page העבירו placeholder בלי מרכאות ("סהכ"), ואת התווית קבעו אחר כך: Edit-Table-View(summaryOptions: { showSum: true, sumTitle: "סה\"כ" }).
• מיון לפי כותרת נעלם בשקט בטבלאות שנבנו בכלי. המיון הילידי נקשר רק כש‑<th> מכיל <i class="fa fa-sort">, ו‑Edit-Table-View כותב כותרות בלי האייקון. הוסיפו אותו בטעינה:

$t.find('thead th[data-field]').not('[data-field="action"]').each(function () {
  if (!$(this).find('[class*="fa-sort"]').length) {
    $(this).append('<i class="fa fa-sort"></i>');
  }
});

דשבורד הוא דף רגיל עם masterPageId = CRMmaster, אותו מאסטר של דפי הרשימה. מה שהופך אותו לדשבורד: טופס סינון תאריכים, אלמנטי מונה וגרף, וטבלה משובצת.

apps/mybusiness/DashboardX  (masterPageId = CRMmaster)
├── שורת כותרת: אייקון + H2 + <form name="genericform"> עם FromDate/ToDate
└── שורה ראשית (col-md-7 + col-md-5)
    ├── col-md-7:  טופס מונים → 2 כרטיסי KPI → טופס גרפים → 4 גרפים
    └── col-md-5:  טופס מפה → גרף + spacer + simbla-table

DashboardSales, DashboardLeads, DashboardCaseManager ו‑DashboardGenManager חולקים את אותו שלד ונבדלים רק במה שה‑data-simbla-class של המונים והגרפים מצביע אליו. בניית דשבורד חדש היא שכפול והפניה מחדש.

 1. Get-Site-Pages                        → מזהה דשבורד המקור
 2. Get-Schema(targetTable)                → שדות ויחסי Pointer
 3. Get-Data(targetTable, limit: 5)        → יש בכלל נתונים?
 4. Create-Table-View-Page(copyFromPageId) → השכפול
 5. Set-Page-Settings(title)                → תיקון ה-SEO title
 6. Get-Page-Content(minimal: false)        → מיפוי כל ה-elemId
 7. Add-Edit-Counter-Element(elemId) × N    → מונים
 8. Add-Edit-Chart-Element(elemId) × M      → גרפים
 9. Add-Edit-Text-Element(elemId) × K       → כותרות וכיתובים
10. Edit-Table-View(tableId)                → הטבלה המשובצת
11. Edit-Page-CSS-JS(jsCode)                → שחזור טופס התאריכים
12. Get-Menus + Set-Menu-Items              → שילוב בתפריט הדשבורדים
13. רענון קשה (Ctrl+F5)                     → dashboardSales.js עלול להיות במטמון

Add-Edit-Counter-Element({
  "pageId": "<id>", "elemId": "P33",
  "tableName": "Suppliers",
  "counterFunction": "sum",
  "counterField": "TotalPurchases",
  "format": "0,0",
  "criteria": []
})

counterFunction ∈ sum-count · sum · avg · min · max. counterField נדרש בכל ערך מלבד sum-count, אבל הכלי לא אוכף: sum בלי counterField מתקבל ומייצר מונה ריק. tableName נדרש גם בעריכה לפי elemId, אחרת Table name not found in schema. format הוא פורמט Numeral.js ("0,0.00").

ה‑enum של criteria באלמנטים האלה: contains, startsWith, equalTo, greaterThan, lessThan, greaterThanOrEqualTo, lessThanOrEqualTo, notEqualTo, containedIn, notContainedIn. exists איננו ברשימה; לסינון ערכי null מגרף עוגה השתמשו ב‑containedIn עם הערכים המוכרים.

Add-Edit-Chart-Element({
  "pageId": "<id>", "elemId": "P52",
  "tableName": "Suppliers",
  "chartType": "Doughnut", "chartTheme": "icecream",
  "chartLabel": "StatusId.SupplierStatuses.Name",
  "chartFunc": "sum-count",
  "criteria": []
})

לגרפי Bar/Line מוסיפים chartValue (שדה מספרי), ולציר תאריכים chartLabelFormat (mm/yy, dd/mm/yy, q/yy, yy).

ערכות הצבע: icecream, rainyday, bluesky, grasshopper, partytime, simbla, romantic, heatwave, blooming, sunnysummer, underthesea, coldmountain, oldtown, daydream.

הכלל היחיד שמשנה: כל כרטיס יושב במיכל אמיתי.

שורת כותרת [12]
└── Add-Edit-Text-Element(rowId, columnNumber: 0, elemType: "H2")   ← כותרת לא צריכה מיכל

שורת כרטיסים [6,6]
├── עמודה 0: Add-Container-to-Page(toExistingRow, toExistingColumn: 0) → innerContainerId
│            Add-Edit-Text-Element(intoExistingElemId: innerContainerId)  ← כותרת קודם
│            Add-Edit-Chart-Element(intoExistingElemId: innerContainerId) ← ואז הגרף
└── עמודה 1: אותו דבר

רווח לפני השורה הבאה
└── Add-Container-to-Page(afterElement: <rowId>)   ← מיכל ריק = הרווח הילידי

גרף או מונה ישירות לעמודה (rowId + columnNumber) נשאר חשוף, בלי containerHolder/container, כלומר בלי אלמנט “Container” בעורך של Simbla, ונראה ומתנהג אחרת מהכרטיסים המשוכפלים.

רווחים נבנים ממיכלים ריקים, לא מ‑margins. בדשבורדים הילידיים המיכלים הריקים P159, P210, P116 הם הרווח האנכי. אל תזייפו כרטיסים או רווחים עם Edit-Page-CSS-JS.

A — אנכית (DashboardSales; מספר ~30px, אייקון פשוט):

container
  ├─ שורה [3,3,3,3]   ריק | מונה(עמ' 1) | אייקון(עמ' 2) | ריק
  └─ שורה [12]        כיתוב אפור ממורכז

B — אופקית (DashboardLeads; מספר ~36px, אייקון כעיגול צבעוני):

container
  └─ שורה [3,5,4]   עיגול-אייקון(0) | כיתוב 2 שורות(1) | מונה(2)

קינון שורה בתוך מיכל: Edit-Page(add-row, intoExistingElemId: "<innerContainerId>"). נדחה ב‑newRowAfterRow or toExistingRow is required (קורה על דשבורד מועתק)? הוסיפו toExistingRow של שורה קיימת כלשהי; ה‑intoExistingElemId גובר.

אין כלי MCP לאייקון: אלמנט טקסט עם <i class="fa fa-…">. גבול הכרטיס (data-border-type="All") הוא מתג בעורך, בלי פרמטר MCP.

Get-Menus()                                    // מאתרים את "CRM-Menu" (לא "Dashboard Menu")
Get-Menu-Items({ "menuId": "<crmMenuId>" })   // מוצאים את הפריט "מבט-על" ← ה-_id שלו הוא ה-parent
Set-Menu-Items({ "menuId": "<crmMenuId>", "items": [{
  "type": "page", "page": "<newPageId>", "title": "ספקים",
  "parent": "<_id של מבט-על>",
  "icon": "fa fa-handshake-o",
  "order": 7,
  "visibility": []
}]})

Create-Table-View-Page דורס את FromDate בטופס genericform בקלט String בשם Name ומסיר את ToDate לגמרי — רק כשמעבירים searchFields (העתקה בלי searchFields, גם עם tableColumns, משאירה את שניהם). בשכפול דשבורד אל תעבירו searchFields. אם כבר נדרס: אין כלי MCP לעריכת קלטים בטפסים שאינם הטופס הראשי, ומשחזרים ב‑JS דרך Edit-Page-CSS-JS. בלי זה גרפים שמפנים ל‑genericform:FromDate נופלים בשקט למצב ללא‑סינון: לחיצה על “הפעל” לא משנה כלום.

בונה דף הגדרות שנראה ומתנהג כמו דפי ה‑System-Tables‑* המובנים: כותרת עם גלגל שיניים, ניווט צד, כרטיס לבן, טבלה בעריכה‑בשורה עם “הוסף ערך”, וקישור “< חזרה להגדרות”. שם מנהלים ערכים של טבלת lookup קטנה — סטטוסים, סוגים, עדיפויות.

הסקיל רץ אחרי שהטבלה קיימת. ליצירתה: Create-Table או myb-p-create-entity.

אין כלי MCP שבונה את פריסת ה‑System-Tables מאפס. המסלול האמין הוא להעתיק דף System-Tables-* קיים ולהפנות אותו מחדש; ההעתקה מביאה את כל ה‑chrome.

תבניות טובות (כולן מנהלות ערכי lookup בעריכה‑בשורה): System-Tables-Task-Statuses · System-Tables-Sale-Statuses · System-Tables-Case-Statuses. מזהי הדפים שונים בין לקוחות: תמיד Get-Site-Pages, אף פעם לא ערך קשיח.

Edit-Table-View({
  "pageId": "<new page id>",
  "tableId": "<table id, e.g. P171>",
  "tableClassName": "SupplierStatuses",
  "classPointers": { "createdBy": "_User", "updatedBy": "_User" },
  "columns": [
    { "field": "Name",  "type": "String", "aggrField": "Name",  "label": "ערך לסטטוס",
      "inlineOptions": { "type": "text", "required": true,  "readonly": false } },
    { "field": "Color", "type": "String", "aggrField": "Color", "label": "צבע",
      "inlineOptions": { "type": "text", "required": false, "readonly": false } }
  ],
  "editView": { "openFrom": "inline" },
  "tablePermissions": { "allowCreate": true, "allowEdit": true, "allowDelete": true },
  "filterAndSort": { "queryType": "hard-code", "sortBy": "Name",
                     "sortOrder": "ascending", "sortLimit": 50 }
})

queryType: "hard-code" מציג את כל השורות בלי טופס חיפוש, כמו בדפים המובנים.

טבלת ה‑lookup חייבת CLP מבוסס‑תפקידים; ה‑front-end בודק חברות בתפקיד, ובלי זה העריכה בשורה זורקת “אין הרשאות”. ההיגיון הרגיל: קריאה לכל מי שמשתמש בערכים, כתיבה למנהלים בלבד:

Set-Table-Permissions({ "table": "SupplierStatuses", "classLevelPermissions": {
  "find":     { "role:CRM": true, "role:Admin": true, "role:Support": true },
  "get":      { "role:CRM": true, "role:Admin": true, "role:Support": true },
  "create":   { "role:Admin": true },
  "update":   { "role:Admin": true },
  "delete":   { "role:Admin": true },
  "addField": {}
}})

את הדף סוגרים ב‑Set-Page-Settings(allowedRoles: "loggedOnly, Admin", loginOnly: true).

ניווט ההגדרות הוא <nav class="menuHolder2" data-menu-id="…"> בתוך ה‑HTML של הדף שלכם, ונרנדר חי מהתפריט שה‑data-menu-id מצביע אליו — לא מתפריט ה‑Settings הגלובלי ולא מה‑HTML השמור.

1. Get-Page-Content(pageId, minimal: false)  → מוצאים את data-menu-id="XXXXXXXX"
2. Get-Menu-Items(menuId: "XXXXXXXX")        → הפריטים חייבים להתאים למה שרואים בניווט
3. Set-Menu-Items(menuId: "XXXXXXXX", items: [{ title, type: "page", page, order }])
4. רענון רגיל — הניווט קורא נתוני תפריט, לא את קובץ ה-JS

הכותרת הפנימית מציגה את טקסט התבנית (למשל “סטטוסי משימות”), ואין כלי MCP לעריכת אלמנט טקסט חופשי. התיקון בקובץ JS קטן שגם מוסיף את שאר הפינישים (loader, הדגשת “נוכחי” בניווט, דגימת צבע לכל שורה). ה‑HTML השמור נשאר עם הטקסט הישן וה‑JS מחליף אותו בטעינה, כפי שדפי ההגדרות המובנים עושים.

• סקילים — אוטומציה — חוקי טופס יושבים על אותם דפי כרטיס
• עריכת דפים ב‑MCP · אלמנטי דשבורד
• עבודה בטוחה עם סוכן על מערכת חיה — הכלים שדורסים ולא ממזגים

אב טיפוס מקומי ואינטראקטיבי של מסכי MyBusiness — לתצוגה מקדימה של פיצ’ר, לאישור מול לקוח או להדגמה, בלי לגעת במערכת.

• 12 דפוסי מסך אינטראקטיביים: חיפוש ועריכת רשומה, דשבורד, הגדרות, לוח, יומן, אשף, עורך מסמכים, תיבת שיחות, דוחות ו‑CSV, סקירת יבוא, פעילויות ומרכז ידע.
• 14 רפרנסים חזותיים מקוריים; נתונים סינתטיים בלבד ומצב שנשמר בדפדפן; רץ מקומית עם Node.js, בלי התקנת חבילות.
• במימוש ללקוח המוקאפ נגזר ממודל הנתונים המאושר ומסמן לכל רכיב את המנגנון הנייטיב שלו.

טריגרים: “מוקאפ”, “אב טיפוס”, “דמו אינטראקטיבי”, “איך זה ייראה במערכת”. לשינוי אמיתי במערכת — myb-p-card-design או myb-p-create-entity.