Dateien per Drag & Drop in APEX Applikationen ablegen.

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

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

3. |
1. Vorstellung der MT AG
3 DOAG Konferenz 2014

4. |
Maßgeschneiderte & zukunftssichere IT-Lösungen
WIR STEIGERN DIE LEISTUNGS-SOWIE WETTBEWERBSFÄHIGKEIT UNSERER KUNDEN.
DURCH SERVICE, BERATUNG UND UMSETZUNG.
WIR VERBINDEN DIE AGILITÄT EINES MITTEL- STÄNDISCHEN UNTER- NEHMENS MIT DER LÖSUNGSKOMPETENZ GROSSER BERATUNGS- HÄUSER.
business by integration
4 DOAG Konferenz 2014

5. |
FACTS & FIGURES
GESCHÄFTSFORM
INHABERGEFÜHRTE AG
HAUPTSITZ
RATINGEN
GRÜNDUNGSJAHR
1994
BESCHÄFTIGTE
180 FESTANGESTELLTE MITARBEITER
BETEILIGUNGEN
MT-IFS GMBH (RATINGEN), MT-IFS SARL (LUXEMBURG)
business by integration
5 DOAG Konferenz 2014

6. |
UNSER PORTFOLIO
business by integration
BUSINESSINTELLIGENCESOLUTIONS
SOCIAL BUSINESS SOLUTIONS
MOBILE
SOLUTIONS
APPLICATIONDEVELOPMENT
INTEGRATION SERVICES
IT SYSTEM SERVICES
AGILE BI
SELF SERVICE BI
MOBILE BI
COLLABORATION
SEARCH
SOCIAL
APPS
ABLÄUFE
LOKALISIERUNG
APEX / ADF
JAVA
.NET
STRATEGIE
ARCHITEKTUR
SAP HANA
BETRIEB
BACKUP RECOVERY
MIGRATION
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
http://www.dropzonejs.com/
StaticFile Apex Workspace
Einbinden der Bibliothek:
10 Doag 2014
<scripttype="text/javascript" src="#APP_IMAGES#dropzone.js"></script>
Einbinden der Bibliothek Dropzone.js

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

12. |
Die Umsetzung
12 Doag 2014
Programmatisches Erstellen der Dropzone
fDZS= newDropzone('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()
}
});

13. |
Die Umsetzung
13 Doag 2014
Post Prozess File Browse Item

14. |
Die Umsetzung
14 Doag 2014
Weitere Parameter für Post Prozess
Programmatisches Erstellen der Dropzone
fDZS.options.paramName= vArgName;
varvArgName= $('#P4_FILEUPLOAD').attr('name');
varvArgNameEnc=
$('#P4_FILEUPLOAD').prev('input[type="hidden"][name="p_arg_names"]').val();
fDZS.on('sending',function(file, xhr, formData) { formData.append("p_arg_names",vArgNameEnc);
});

15. |
Livedemo
15 Doag 2014

16. |
Die Umsetzung
16 Doag 2014
Individuelle Speicherung der Daten
Hidden Item (P4_FILENAMES)
Funktion getFileNames(JavaScript)
Ajax Call (PL/SQL)
fDZS.on('success',function(a,response){
getFilenames();
varajaxCall= newhtmldb_Get(null, &APP_ID.,
'APPLICATION_PROCESS=PROCESS_UPLOADED_FILES', &APP_PAGE_ID.);
ajaxCall.add('P4_FILENAMES', $(P4_FILENAMES).val());
});

17. |
Die Umsetzung
17 Doag 2014
Layout Anpassungen
Dropzone.css & Spritemap.png & Spritemap@2x.png
DropzoneKlasse direkt für DIV setzen
Fehler „Dropzoneschon vorhanden“
Dropzone.options.dropzone= false;

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 Dropzonenach direktem Upload
Löschen der Datei aus Dropzonebei 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
ThumbnailAnzeige 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. | DOAG Konferenz 2014 24
6. ALLE VORTRÄGE

25. | DOAG Konferenz 2014 25
15:00 -15:45 Sydney
Datenmodellierung ist langweilig, lassen Sie Datamodelerdas machen
Oleg
Kiriltsev
18.11.14
12:00 -12:45
Sydney
Das nächste Duet(t): APEX und SAP.
Niels de
Bruijn
19.11.14
16:00 -16:45
Singapur
Speichersparende XML Verarbeitungmit StAXund JAXB
WolfgangNast
19.11.14
16:00 -16:45
Istanbul
"Echtes" Single Sign On
mit APEX realisieren.
Niels de
Bruijn
19.11.14
09:00 -09:45
Sydney
FiveFingers Death Punch
Oliver Lemm
20.11.14
10:00 -10:45
Helsinki
12c Oracle Warehousing voll Groovy. Ein Projektbericht.
Rosenberger Ketteltasche
20.11.14
12:00 -12:45
Istanbul
Dateien per Drag & Drop in APEX Applikationen ablegen
FranziskaHöcker
20.11.14
15:00 -15:45
Oslo
Ist Gradleauch für die APEX-Projekte?
Oleg
Kiriltsev
20.11.14
15:00 -15:45
Istanbul
Tune Up YourAPEX
Oliver Lemm
20.11.14

26. |
Telefon: Telefax:
E-Mail:
www.mt-ag.com
Vielen Dank…
Beraterin Oracle ApplicationExpress
+49 2102 30961 -0
+49 2102 30961 -101
Franziska.hoecker@mt-ag.com
Franziska Höcker