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

340 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
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE Format, ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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

×