Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

FMK2018- Kalender in FileMaker Otmar Kramis

104 views

Published on

Eigenes HTML5-Framework mit Drag und Drop
Daten aus einer FileMaker-Event-Datenbank grafisch-interaktiv im WebViewer darstellen.
Die Daten werden mit FileMaker-Funktionen (Custom Functions, Scripts) in eine Webseite mit HTML, SVC, CSS und JavaScript aufbereitet und im WebViewer dargestellt. Die Events lassen sich mit der Maus/Touch verschieben, in Dauer ändern, per Doppelklick/Long-Touch neue erstellen.
Ich führe durch die Konstruktionselemente, erläutere die rekursiven Eigenen Funktionen und die JavaScript-Funktionen für die Interaktion mit dem WebViewer.
Falls die Zeit erlaubt, werfen wir noch einen Blick auf eine alternative Einbindung der JavaScript-Library jQuery mit dem Kalender-Plugin FullCalendar-Scheduler.

Als Vorabinformation:
https://community.filemaker.com/docs/DOC-8518
https://community.filemaker.com/docs/DOC-8554

Published in: Education
  • Be the first to comment

  • Be the first to like this

FMK2018- Kalender in FileMaker Otmar Kramis

  1. 1. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 www.filemaker-konferenz.com eigenes HTML5-Framework mit Drag (und Drop) Otmar Kramis Kalender in FileMaker
  2. 2. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Über den Sprecher • *1959 Hildisrieden, Luzern • 80er-Jahre, Jazz-Saxofon Studium an der Hochschule für Musik und darstellende Kunst Graz • ab 91 Dozent an der Jazzschule Luzern, heute Hochschule Luzern - Musik • ab ~97 fliessender Übergang vom Dozenten zum Informatiker, durch Fusion der Fachhochschulen Zentralschweiz seit 2006 Applikationsentwickler an der Hochschule Luzern - IT Services • Erstkontakt mit FileMaker, durch Übernahme einer Mediathek-Selbstausleihe-Lösung unter FM3 • erste eigene Lösung? Raum-Reservation für die Jazzschule Luzern mit FM6;-)
  3. 3. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Kurze Demo fmp://fmslocal.gibi.loc/ResourceCalendarFMK
  4. 4. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Tabellen • Resources UUID, fkResourceGroup, ResName, ResnameShort, State, Info • Groups UUID, GroupName, active, Info • Colors ColorID, Background, Border, Name • Events Details nächste Folien • GUI Details nächste Folien
  5. 5. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Events - Daten • UUID Text Indexed, Auto-Enter = Get ( UUID ) • fkResource Text Indexed • fkGroup Text Indexed, Auto-Enter = Events_Resources::fkGroup • datefrom Date Indexed • dateto Date (Indexed) • overlapGrid Calc Unstored = 5 • timefrom Time Indexed, Auto-Enter = Let ( _step = overlapGrid * 60 ; Div ( Self ; _step ) * _step ) • timeto Time (Indexed), Auto-Enter = Let ( _step = overlapGrid * 60 ; Div ( Self ; _step ) * _step ) • Event Text Indexed • color Text Indexed
  6. 6. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Events - berechnete Felder • dateList Text Indexed, Auto-Enter = ListOfDate ( datefrom ; dateto - ( timeto = Time ( 0 ; 0 ; 0 ) ) ) • FieldList Text Indexed, Auto-Enter = Substitute ( List ( datefrom; dateto; timefrom; timeto; Event; color; fkResource; tooltip ) ; "¶" ; "t" ) • timestampfrom Timestamp Indexed, Auto-Enter = Let ( _timefrom = If ( IsEmpty ( timefrom ) ; GetAsTime ( "00:00" ) ; timefrom ) ; Timestamp ( datefrom ; _timefrom ) ) • timestampto Timestamp Indexed, Auto-Enter = Let ( _timeto = If ( IsEmpty ( timeto ) ; GetAsTime ( "24:00" ) ; timeto ) ; Timestamp ( dateto ; _timeto ) ) • timestampList Text Indexed, Auto-Enter = TimestampList ( timestampfrom ; timestampto ; overlapGrid ) • noverlap Calculation Unstored = Count ( Events@start::UUID )
  7. 7. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis GUI - Felder • UUID Text Indexed, Auto-Enter = Get ( UUID ) • gDate Date Global (Startdatum des Anzeigebereichs) • gNumberOfDays Number Global (Anzahl anzuzeigende Tage) • HTMLCalendar Text Global (der berechnete html-Code) • gDateList Calc Let ( [ _date = GUI::gDate ; _ndays = GUI::gNumberOfDays ] ; ListOfDate ( _date ; _date + _ndays - 1 ) ) (Ankerfeld für Beziehung GUI <—> Events::dateList ) • gResourceList Text Global (Ankerfeld für Beziehung GUI <—> Events::fkResource ) • gEventId Text Global (Ankerfeld für GUI_Events@gEventId) • gResourceId Text Global (Ankerfeld für GUI_Resources@gResourceID) • gGroupID Text Global (Ankerfeld für GUI_Groups@gGroupID) • gLanguage Text Global • g1 Calc Unstored, = 1 (für Statusfilter) • GFilterGroupID Text Global (Filterfeld für Gruppenauswahl)
  8. 8. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Beziehungsgraph
  9. 9. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis html <html> <head> <meta charset="utf-8"> <script> unser JavaScript-Code hier </script> <style> unser CSS-Code hier </style> </head> <body> <svg> (Scalable Vector Graphics) das Kalender-Grid hier, Kopf, Gruppen- und Ressourcenlabel u.s.w. </svg> <div class="calendar"> unsere Termine hier </div> <a> hier noch die aktuelle Zeitlinie </a> </body> </html>
  10. 10. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis JavaScript <script> var xdown = null; var ydown = null; u.s.w document.addEventListener('mousedown', function(event) { wenn Terminobjekt geklickt, Variablen mit Eigenschaften füllen, Klick-Koordinaten sichern }); document.addEventListener('mouseup', function(event) { wenn vorheriger Mousdown-Event in Terminobjekt war, falls Koordinaten ungleich Koordinaten gesichert, FM-Update-Script ausführen sonst FM-Zeigedetail-Script ausführen }); document.addEventListener('mousemove', function(event) { wenn Mousdown-Event in Terminobjekt und Koordinaten ungleich Startkoordinaten Terminobjekt an neuer Position / mit neuer Länge zeichnen }); helper Funktionen </script>
  11. 11. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis CSS <style> //Elemente body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; color: #202020; width: 100%; } svg { width: 100%; stroke: rgba(200,200,200,0.5); stroke-width: 1px; } text { font-size: 1.2em; fill: #505050; width: 100%; stroke: none; cursor: default; } a { padding-left: 2px; padding-right: 2px; display: block; text-decoration: none; color: #404040; } figure { display: table; position: absolute; font-size: 1em; border-left: solid; border-top: 1px solid; border-bottom: 1px solid; border-right: 0px solid; height: 29px; max-height: 29px; cursor: pointer; } //Klassen .button { cursor: pointer; } .calendar { position: absolute; left: 0px; right: 1%; top:0px; } .label { padding-top: 2px; padding-left: 2px; padding-right: 2px; height: 26px; max-height: 26px; color: #404040; overflow: hidden; overflow-y: hidden; white-space: nowrap; } .hand { display: table-cell; vertical-align: middle; } ……. .row45C9AC81-6E97-44A4-A7CD-1CC110698BCC11 { top: 40px; height: 27px; } .row302666EE-90C1-4058-AEC0-BB74CD1E587A31 { top: 70px; height: 27px; } ……. .BLUE { background-color: rgba(24,108,227,0.45); border-color: #0074D9; display: table; } .BLUEhand { width:7px; background: none; border-right: 1px solid #0074D9; cursor: ew-resize; } ….. </style>
  12. 12. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis CFs für CSS-Zeilen setCSSrows ( _list ; _nrows ; _n ; _offsettop ; _height ) Let ( [ _value = Substitute ( GetValue ( _list ; _n ) ; "|" ; "¶" ) ; _id = GetValue ( _value ; 1 ) ; _nslots = GetAsNumber ( GetValue ( _value ; 5 ) ) ; _slotstart = GetValue ( _value ; 6 ) ; _top = _height * ( _slotstart - 1 ) + _offsettop ; _row = setCSSslots ( _id ; _nslots ; 1 ; _top ; _height ) //generate slots for concurrent events ] ; _row & If ( _n < _nrows ; setCSSrows ( _list ; _nrows ; _n + 1 ; _offsettop ; _height ) ; "" ) ) ___________________________________________________________________________________ setCSSslots ( _id ; _count ; _n ; _top ; _height ) ".row" & _id & _count & _n & " { top: " & _top & "px; height: " & _height - 3 & "px;}¶" & If ( _n < _count ; setCSSslots ( _id ; _count ; _n + 1 ; _top + _height ; _height ) )
  13. 13. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis CF für CSS-Farben setCSScolors ( _list ; _handwidth ) Let ( [ _params = Substitute ( GetValue ( _list ; 1 ) ; "|" ; "¶" ) ; _col = GetValue ( _params ; 1 ) ; _bgr = GetValue ( _params ; 2 ) ; _brd = GetValue ( _params ; 3 ) ; _width = _handwidth - 1 ; _tag = Substitute ( " ._col { background-color: rgba(_bgr); border-color: _brd; display: table; }¶ ._colhand { width:_widthpx; background:none; border-right: 1px solid _brd; cursor: ew-resize; }¶ ¶" ; ["_col" ; _col] ; ["_brd" ; _brd] ; ["_bgr" ; _bgr] ; ["_width" ; _width] ) ; _list = RightValues ( _list ; ValueCount ( _list ) - 1 ) ] ; _tag & If ( ValueCount ( _list ) ; setCSScolors ( _list ) ) )
  14. 14. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis CFs für Kalenderraster und Daten • setCalendarGrid zeichnet Kopfbereich und vertikale Linien, Monat, Woche, Datum, Stunden, je nach anzahl anzuzeigender Tage und Breite des Kalenders. • setCalendarHourGrid Wird durch setCalendarGrid aufgerufen, Parameter abhängig von der Breite eines Tages in Pixel. • setCalendarGridRows zeichnet Gruppen- und Ressourcen-Label, horzontale Linien und Hintergrundrechtecke. Label und Hintergrundrechtecke werden für Klickaktionen registriert. • setCalendar rendert schlussendlich die Termin-Elemente: <figure class='row45C9AC81-6E97-44A4-A7CD-1CC110698BCC21 BLUE' evt='CFFC101D-89B6-4BEF-9B6B-94FDC71E7391' start='28800' end='79200' dstart='1538956800000' dend='1539302400000' info='Math' rowpos='1' style='left:308.44px; width:310.92px'> <div class='block' style='width:304.92px; max-width:304.92px'>08:00 - 22:00<br>Math</div> <div class='hand BLUEhand' evt='CFFC101D-89B6-4BEF-9B6B-94FDC71E7391' style='left:304.92px;'></div> </figure>
  15. 15. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Skripte • refresh Hauptskript, berechnet das HTML-Feld und aktualisiert Tasten, installiert Timer-Skript für WebDirect. • ShowEvent öffnet das entsprechnede Detailfenster (Karte) an der Klickposition • ShowGroup • ShowResource • UpdateEvent speichert Änderungen per Ziehen im WebViewer in der Events Tabelle, triggert wenn nötig das refresh Skript • NewEvent wird durch Doppelklick in einen leeren Bereich im Kalender aufgerufen, erstellt einen neuen Termin an der Klickposition mit der voreigestellten Dauer für neue Termine • DeleteEvent Aufgerufen durch Taste im Termin Detail-Fenster
  16. 16. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Skript refresh # parameter 1: (text) refresh-object 2: (bool) clear gGroupID If [ GetValue ( Get ( ScriptParameter ) ; 2 ) ] Set Field [ GUI::gFilterGroupID ; "" ] End If Set Variable [ $grouplist ; Value: If ( IsEmpty ( GUI::gFilterGroupID ) ; List ( GUI_Groups@g1::UUID ) ; GUI::gFilterGroupID ) ] Set Field [ GUI::gResourceList ; Let ( [ $$reslist = ExecuteSQL ( "SELECT UUID FROM Resources WHERE fkResourceGroup IN('" & Substitute ( $grouplist ; "¶" ; "', '" ) & "')" & If ( $$hideon ; " AND State IS NULL " ) & "ORDER BY GroupName ASC, ResnameShort ASC" ; "" ; "" ) ] ; $$reslist ) ] Set Field [ Resources::gDateList ; GUI::gDateList ] Set Variable [ $calendar ; Value: Let ( [ /******************************************** ****** configuration variables ************** ********************************************/ _offset = 80 //start of 1. column ; _offsettop = 40 //start of 1. row ; _linespace = -5 //event-rect size… ] Set Field [ GUI::HTMLCalendar ; $calendar ] Set Field [ GUI::gEventId ; "" ] Refresh Object [ Object Name: GetValue ( Get ( ScriptParameter ) ; 1 ) ; Repetition: 1 ] Go to Object [ Object Name: "Calendar" ]
  17. 17. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Berechnung $calendar 1 Let ( [ Konfigurationsvariablen hier ; _offsetleft = 80 ; _offsettop = 40 ; .... ; _script_drag ; _script_show ... u.s.w. berechnete Variablen ; _scroll = ... ; _copy = ... ; _filname ...... ; _dwidth = Round ( _width / _days ; 2 ) ; _list = ExecuteSQL ( " SELECT UUID, ResnameShort, fkResourceGroup, GroupName, State, " & If ( _slots ; "noverlap " ; "1 " ) & "FROM Resources WHERE UUID IN('" & Substitute ( $$reslist ; "¶" ; "', '" ) & "') ORDER BY GroupName ASC, ResnameShort ASC " ; "|" ; "" ) ; _list = resourcesAddSlotIndex ( _list ; 0 ; 1 ) ; $$residx = _list ; _nrows = ValueCount ( $$reslist ) ; _nslots = getResourceValue ( GetValue ( $$reslist ; _nrows ) ; 8 ) ; _height = _rowheight * _nslots ; _timegrid = "<svg style='height:" & _height + _offsettop & "px;'>¶" & setCalendarGrid ( _offsetleft ; _days ; 0 ; _dstart ; _dwidth ; _offsettop ; _height ; _ampm ; _language ; _bhstart ; _bhend ; _centerdate ) ; _resgrid = setCalendarGridRows ( _list ; _rowheight ; 1 ; _linespace ; _filename ; _offsettop ; _dwidth ; _calwidth ; _script_new ; _offsetleft ; _script_info ; _script_group ; _bhstart ; _bhend ; _newlength ; _dragstep ; "" )
  18. 18. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Berechnung $calendar 2 ; _rows = setCSSrows ( _list ; _rowheight ; _nrows ; 1 ; _offsettop ) ; _colors = setCSScolors ( ExecuteSQL ( "SELECT Name, Background, Border FROM Colors" ; "|" ; "" ) ; _handwidth ) ; _css = setCSS ( _rows ; _colors ) ; _caldates = eventsSetSlot ( List ( GUI_Events::FieldList ) ; "" ; 1 ; ""; "" ) ; _calendar = setCalendar ( _caldates ; _delimiter ; _calspace ; _offsetleft ; _dstart ; _dwidth ; _calend ; _rowheight ; _ampm ; _showtime ; _showdate ; _minwidth ; _bhstart ; _bhend ; _showtooltip ; _handwidth ) ; _script = jsDragAndDrop ( _rowheight ; _dwidth ; _filename ; _script_drag ; _script_show ; _ampm ; _dragstep ; _nslots ; _showdate ; _dstart ; _offsetleft ; _offsettop ; _bhstart ; _bhend ; _copy ) ] ; "<!DOCTYPE html>¶<html>¶<head>¶<meta charset='utf-8'>¶ ¶<script>¶" & _script & "¶</script>¶" & _css & "¶</head>¶¶<body>¶¶" & _timegrid & _resgrid & "¶<div class='calendar'>¶¶" & _calendar & <timeline div hier> & "¶¶</body>¶</html>" )
  19. 19. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis FM-Datei fmp://fmslocal.gibi.loc/ResourceCalendarFMK ResourceCalendarFMK - WebDirect
  20. 20. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Tipps • WebViewer Debug-Funktion einschalten (nur macOS): FM17: defaults write com.filemaker.client.pro12 WebKitDebugDeveloperExtrasEnabled -bool YES FM16: defaults write com.filemaker.client.advanced12 WebKitDebugDeveloperExtrasEnabled -bool YES FM14/15: defaults write com.filemaker.client.advanced12 WebKitDeveloperExtras -bool true https://blog.beezwax.net/2015/07/20/enable-debugger-for-a-filemaker-web-viewer/ • Prefs Editor von Thomas Tempelmann (macOS): Preferenzfiles ansehen/editieren, auch von Sandbox-Anwendungen http://apps.tempel.org/PrefsEditor/index.php • SwiftDefaultApps von Gregorio Litenstein (macOS): Protokoll-Handler zwischen Versionen umschalten, Standartanwendung für Filetyp setzen https://github.com/Lord-Kamina/SwiftDefaultApps • Protokoll-Handler Windows (letzte Zeile Pfad anpassen, Achtung Doppel-Backslash): Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOTFMP] @="URL:FMP Protocol" "URL Protocol"="" [HKEY_CLASSES_ROOTFMPshell] [HKEY_CLASSES_ROOTFMPshellopen] [HKEY_CLASSES_ROOTFMPshellopencommand] @="c:Program FilesFileMakerFileMaker Pro 16 AdvancedFileMaker Pro Advanced.exe %1"
  21. 21. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Quellen / Dank • Longin Ziegler: FMK 2016 - Schritt für Schritt zum eigenen Kalender https://www.filemaker-konferenz.com/downloads.php • Stefan Rexroth: php-Musterdatei für den Aufruf von Skripten aus dem WebViewer in WebDirect https://filemaker-magazin.de/forum/beitrag/178738 • Alle die meinen Kalender in ihren Lösungen einsetzen und durch ihre Anforderungen und Wünsche die Funktionalität vorwärtstreiben. • Alle aktiven Forumsteilnehmer auf Filemaker-Magazin.de und community.filemaker.com, die beitragen das FM-Fachwissen zu verbreiten. • Meine Kalender-Musterdateien liegen hier: https://community.filemaker.com/docs/DOC-8518
  22. 22. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Vielen Dank unseren Sponsoren Danke für das Bewerten dieses Vortrages

×