diff --git a/README.md b/README.md index d9d47565..b335655d 100644 --- a/README.md +++ b/README.md @@ -1117,4 +1117,166 @@ Um Entitäten für Portalnutzer (Contact-Entität) freizugeben, wurde ein konsis - `selectPrimaryFilterName: "portalUsers"` filtert automatisch auf Portal-User - Tab "Freigabe für" sollte immer der erste Tab im Bottom-Panel sein (index: 0) - Style "warning" hebt das Panel visuell hervor -- Nach Änderungen immer Rebuild durchführen und beide Seiten der Relationship definieren \ No newline at end of file +- Nach Änderungen immer Rebuild durchführen und beide Seiten der Relationship definieren + +--- + +## Custom JavaScript & CSS Integration + +### JavaScript-Module einbinden + +EspoCRM verwendet AMD/RequireJS für JavaScript-Module. Custom JavaScript-Dateien werden in `client/custom/src/` abgelegt. + +**Beispiel: RVG-Gebührenrechner für CVmhErstgespraech** + +**1. Modul erstellen** (`client/custom/src/modules/rvg-calculator.js`): +```javascript +define('custom:modules/rvg-calculator', [], function () { + return { + kalkuliereKosten: function(streitwert, anzahlKlaeger, anzahlBeklagte, ustProzent) { + // Berechnungslogik + return { /* Ergebnisobjekt */ }; + } + }; +}); +``` + +**2. Custom Field View erstellen** (`client/custom/src/views/{entity}/fields/{fieldname}.js`): +```javascript +define('custom:views/c-vmh-erstgespraech/fields/rvg-calculated', [ + 'views/fields/currency', + 'custom:modules/rvg-calculator' +], function (Dep, RvgCalculator) { + return Dep.extend({ + setup: function () { + Dep.prototype.setup.call(this); + this.listenTo(this.model, 'change:streitwert change:anzahlVermieter', this.calculate); + this.listenTo(this.model, 'sync', this.calculate); // Initial load + }, + calculate: function () { + var result = RvgCalculator.kalkuliereKosten(/*...*/); + this.model.set('kostenRaeumungsantrag', result.kostenRaeumungsantrag); + } + }); +}); +``` + +**3. In entityDefs registrieren**: +```json +{ + "fields": { + "vergleich1InstanzGk": { + "type": "currency", + "readOnly": true, + "view": "custom:views/c-vmh-erstgespraech/fields/rvg-calculated" + } + } +} +``` + +**Wichtige Patterns:** +- `listenTo(model, 'sync', callback)` - Für initiale Berechnung beim Laden +- `listenTo(model, 'change:field1 change:field2', callback)` - Für Reaktivität +- `calculating` Flag verhindert Rekursion bei `model.set()` +- Browser-Cache: Hard Refresh (Ctrl+Shift+R) nach JS-Änderungen erforderlich + +### CSS-Manipulation & Feld-Hervorhebung + +EspoCRM erlaubt Custom CSS über Metadata-Registrierung. + +**1. CSS-Datei erstellen** (`client/custom/css/erstgespraech-highlight.css`): +```css +/* Feld-Selektor über data-name Attribut */ +.detail .cell[data-name="vorzusch1Instanz"] { + background-color: #d4edda; + padding: 10px; + border-bottom: 4px solid #28a745; + border-radius: 4px; +} + +.detail .cell[data-name="vorzusch1Instanz"] .numeric-text { + font-weight: bold; + color: #155724; + font-size: 1.1em; +} +``` + +**2. CSS in Metadata registrieren** (`custom/Espo/Custom/Resources/metadata/app/client.json`): +```json +{ + "cssList": [ + "__APPEND__", + "client/custom/css/erstgespraech-highlight.css" + ] +} +``` + +**3. Rebuild durchführen** - CSS wird in gecachtes Bundle integriert + +**CSS-Targeting-Strategien:** +- **Feld-spezifisch:** `.cell[data-name="fieldName"]` +- **Entity-spezifisch:** `body[data-controller="CVmhErstgespraech"]` +- **View-spezifisch:** `.detail` (Detail-View), `.edit` (Edit-View), `.list` (List-View) +- **Label vs. Value:** + - `.label-text` - Feldlabel + - `.numeric-text` / `.text-default` - Feldwert + - `.field[data-name="..."]` - Field-Container + +**HTML-Struktur (Referenz):** +```html +