FMK2018 Kalender in FileMaker eigenes HTML5-Framework mit Drag und Drop by Otmar Kramis

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. 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. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Kurze Demo fmp://fmslocal.gibi.loc/ResourceCalendarFMK 

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. 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. 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. 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. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Beziehungsgraph

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. 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. 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. 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. 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. 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. 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. 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 ( [ /******************************************** ****** conﬁguration 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. 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. 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. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis FM-Datei fmp://fmslocal.gibi.loc/ResourceCalendarFMK ResourceCalendarFMK - WebDirect 

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. 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. 9. FileMaker Konferenz | Liechtenstein | 17.-20. Oktober 2018 Kalender in FileMaker – Otmar Kramis Vielen Dank unseren Sponsoren Danke für das Bewerten dieses Vortrages

FMK2018 Kalender in FileMaker eigenes HTML5-Framework mit Drag und Drop by Otmar Kramis

Esté a ler uma amostra.

Confira estes a seguir

FMK2018 Kalender in FileMaker eigenes HTML5-Framework mit Drag und Drop by Otmar Kramis

Mais Conteúdo rRelacionado

Semelhante a FMK2018 Kalender in FileMaker eigenes HTML5-Framework mit Drag und Drop by Otmar Kramis (19)

Mais de Verein FM Konferenz (20)

Mais recentes (20)