Dateien per Drag & Drop in Apex Applikationen ablegen

Transkript

1 Dateien per Drag & Drop in Apex Applikationen ablegen DOAG Konferenz 2014 (Nürnberg) 1 Franziska Höcker Nürnberg,

2 Agenda 1. Vorstellung MT AG 2. Das Ergebnis Live Demo 3. Die Umsetzung 4. Individualisierungsmöglichkeiten 5. Fazit 6. MT AG Fachvorträge 2 DOAG Konferenz 2014

3 1. Vorstellung der MT AG 3 DOAG Konferenz 2014

4 Maßgeschneiderte & zukunftssichere IT-Lösungen W IR STEIGERN DIE LEISTUNGS- SOW IE W ETTBEWERBSFÄHIGKEIT UNSERER KUNDEN. DURCH SERVICE, BERATUNG UND UMSET ZUNG. W IR VERBINDEN DIE AGILITÄT EINES MITTEL- ST ÄNDISCHEN UNT ER- NEHMENS MIT DER LÖSUNGSKOMPETENZ GROSSER BERAT UNGS- HÄUSER. business by integration 4 DOAG Konferenz 2014

5 FACTS & FIGURES GESCHÄFT SFORM HAUPT SIT Z INHABERGEFÜHRT E AG RAT INGEN GRÜNDUNGSJAHR 1994 BESCHÄFT IGT E BET EILIGUNGEN 180 FESTANGEST ELLTE MITARBEIT ER MT-IFS GMBH (RAT INGEN), MT-IFS SARL (LUXEMBURG) business by integration 5 DOAG Konferenz 2014

6 UNSER PORTFOLIO BUSINESS INT ELLIGENCE SOLUT IONS AGILE BI SELF SERVICE BI MOBILE BI SOCIAL BUSINESS SOLUT IONS COLLABORATION SEARCH SOCIAL MOBILE SOLUT IONS APPS ABLÄUFE LOKALISIERUNG APPLICAT ION DEVELOPMENT APEX / ADF JAVA.NET INTEGRATION SERVICES STRATEGIE ARCHITEKTUR SAP HANA IT SYSTEM SERVICES BETRIEB BACKUP RECOVERY MIGRATION business by integration 6 DOAG Konferenz 2014

7 2. Das Ergebnis Live Demo 7 Doag 2014

8 Ziel & Zweck einer Dropzone Ziel: Erstellen einer Dropzone Dropzone.js Zweck: Schneller & Effizienter Gleichzeitiger Upload mehrerer Dateien klicken & hereinziehen Ergonomisch Information über Upload 8 Doag 2014

9 3. Die Umsetzung 9 Doag 2014

10 Die Umsetzung Einbinden der Bibliothek Dropzone.js Static File Apex Workspace Einbinden der Bibliothek: <script type="text/javascript" src="#app_images#dropzone.js"></script> 10 Doag 2014

11 Die Umsetzung Erstellen eines DIV für die Dropzone 11 Doag 2014

12 Die Umsetzung Programmatisches Erstellen der Dropzone fdzs = new Dropzone('div#dropzone',{ "url": "wwv_flow.accept", "params": { "p_instance":$('#pinstance').val(), "p_flow_id":$('#pflowid').val(), "p_flow_step_id":$('#pflowstepid').val(), "p_page_checksum":$('#ppagechecksum').val(), "p_page_submission_id":$('#ppagesubmissionid').val() } }); 12 Doag 2014

13 Die Umsetzung Post Prozess File Browse Item 13 Doag 2014

14 Die Umsetzung Weitere Parameter für Post Prozess var vargname = $('#P4_FILEUPLOAD').attr('name'); var vargnameenc = $('#P4_FILEUPLOAD').prev('input[type="hidden"][name="p_arg_names"]').val(); Programmatisches Erstellen der Dropzone fdzs.options.paramname = vargname; fdzs.on('sending',function(file, xhr, formdata) { formdata.append("p_arg_names",vargnameenc); }); 14 Doag 2014

15 Livedemo 15 Doag 2014

16 Die Umsetzung Individuelle Speicherung der Daten Hidden Item (P4_FILENAMES) Funktion getfilenames (JavaScript) Ajax Call (PL/SQL) fdzs.on('success',function(a,response){ getfilenames(); var ajaxcall = new htmldb_get(null, &APP_ID., 'APPLICATION_PROCESS=PROCESS_UPLOADED_FILES', &APP_PAGE_ID.); ajaxcall.add('p4_filenames', $(P4_FILENAMES).val()); }); 16 Doag 2014

17 Die Umsetzung Layout Anpassungen Dropzone.css & Spritemap.png & Dropzone Klasse direkt für DIV setzen Fehler Dropzone schon vorhanden Dropzone.options.dropzone = false; 17 Doag 2014

18 Livedemo 18 Doag 2014

19 4. Individualisierungsmöglichkeiten 19 DOAG Konferenz 2014

20 Weitere Möglichkeiten der Individualisierung Beispiele: Löschen der Dateien aus Dropzone nach direktem Upload Löschen der Datei aus Dropzone bei Klick auf die Datei maximale Größe für Dateien maximale Anzahl an Dateien gleichzeitiger Upload von Dateien oder nacheinander Remove Link anzeigen zum entfernen der Datei aus Dropzone Thumbnail Anzeige für verschiedene Dateitypen 20 Doag 2014

21 Livedemo 21 Doag 2014

22 5. Fazit 22 Doag 2014

23 Fazit Hilfreich Sinnvoll Individualisierbar Effizient Kenntnisse mit Apex, JavaScript vorraussgesetzt 23 Doag 2014

24 6. ALLE VORTRÄGE 24 DOAG Konferenz 2014

25 DOAG Konferenz :00-15:45 Sydney 12:00-12:45 Sydney 16:00-16:45 Singapur 16:00-16:45 Istanbul 09:00-09:45 Sydney 10:00-10:45 Helsinki 12:00-12:45 Istanbul 15:00-15:45 Oslo 15:00-15:45 Istanbul Datenmodellierung ist langweilig, lassen Sie Datamodeler das machen Das nächste Duet(t): APEX und SAP. Speichersparende XML Verarbeitung mit StAX und JAXB "Echtes" Single Sign On mit APEX realisieren. Five Fingers Death Punch 12c Oracle Warehousing voll Groovy. Ein Projektbericht. Dateien per Drag & Drop in APEX Applikationen ablegen Ist Gradle auch für die APEX-Projekte? Tune Up Your APEX Oleg Kiriltsev Niels de Bruijn Wolfgang Nast Niels de Bruijn Oliver Lemm Rosenberger Ketteltasche Franziska Höcker Oleg Kiriltsev Oliver Lemm

26 Vielen Dank Franziska Höcker Beraterin Oracle Application Express Telefon: Telefax: