Dateien per Drag & Drop in APEX Applikationen ablegen.

|

Dateien per Drag & Drop in Apex Applikationen ablegenDOAG Konferenz 2014 (Nürnberg)

Franziska Höcker

Nürnberg, 20.11.20141

||

Agenda

DOAG Konferenz 20142

1. Vorstellung MT AG

2. Das Ergebnis – Live Demo

3. Die Umsetzung

4. Individualisierungsmöglichkeiten

5. Fazit

6. MT AG Fachvorträge

||

1. Vorstellung der MT AG


|

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


|

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)



|

UNSER PORTFOLIO


BUSINESS

INTELLIGENCE SOLUTIONSSOCIAL BUSINESS

SOLUTIONSMOBILE

SOLUTIONS

APPLICATION

DEVELOPMENTINTEGRATION

SERVICESIT 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


||

2. Das Ergebnis – Live Demo

Doag 20147

|

Ziel & Zweck einer Dropzone

Ziel:

Erstellen einer Dropzone

Dropzone.js

Zweck:

Schneller & Effizienter

Gleichzeitiger Upload mehrerer Dateien

klicken & hereinziehen

Ergonomisch

Information über Upload

Doag 20148

||

3. Die Umsetzung

Doag 20149

|

Die Umsetzung

http://www.dropzonejs.com/

Static File Apex Workspace

Einbinden der Bibliothek:

Doag 201410

<script type="text/javascript" src="#APP_IMAGES#dropzone.js"></script>

Einbinden der Bibliothek Dropzone.js

http://www.dropzonejs.com/

|

Die Umsetzung

Doag 201411

Erstellen eines DIV für die Dropzone

|

Die Umsetzung

Doag 201412

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()}

});

|

Die Umsetzung

Doag 201413

Post Prozess File Browse Item

|

Die Umsetzung

Doag 201414

Weitere Parameter für Post Prozess

Programmatisches Erstellen der Dropzone

fDZS.options.paramName = vArgName;

var vArgName = $('#P4_FILEUPLOAD').attr('name');

var vArgNameEnc =

$('#P4_FILEUPLOAD').prev('input[type="hidden"][name="p_arg_names"]').val();

fDZS.on('sending',function(file, xhr, formData) {formData.append("p_arg_names",vArgNameEnc);

});

||

Livedemo

Doag 201415

|

Die Umsetzung

Doag 201416

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());});

|

Die Umsetzung

Doag 201417

Layout Anpassungen

Dropzone.css & Spritemap.png & [email protected]

Dropzone Klasse direkt für DIV setzen

Fehler „Dropzone schon vorhanden“

Dropzone.options.dropzone = false;

mailto:[email protected]

||

Livedemo

Doag 201418

||

4. Individualisierungsmöglichkeiten


|

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

Doag 201420

||

Livedemo

Doag 201421

||

5. Fazit

Doag 201422

|

Fazit

Hilfreich

Sinnvoll

Individualisierbar

Effizient

Kenntnisse mit Apex, JavaScript vorraussgesetzt

Doag 201423

| DOAG Konferenz 201424

6. ALLE VORTRÄGE

| DOAG Konferenz 201425

15:00 - 15:45

Sydney

Datenmodellierung ist langweilig,

lassen Sie Datamodeler das machen

Oleg

Kiriltsev18.11.14

12:00 - 12:45

Sydney

Das nächste Duet(t):

APEX und SAP.

Niels de

Bruijn19.11.14

16:00 - 16:45

Singapur

Speichersparende XML Verarbeitung

mit StAX und JAXB

Wolfgang

Nast19.11.14

16:00 - 16:45

Istanbul

"Echtes" Single Sign On

mit APEX realisieren.

Niels de

Bruijn19.11.14

09:00 - 09:45

Sydney Five Fingers Death Punch

Oliver

Lemm20.11.14

10:00 - 10:45

Helsinki

12c Oracle Warehousing voll Groovy.

Ein Projektbericht.Rosenberger

Ketteltasche20.11.14

12:00 - 12:45

Istanbul

Dateien per Drag & Drop in APEX

Applikationen ablegen

Franziska

Höcker20.11.14

15:00 - 15:45

Oslo Ist Gradle auch für die APEX-Projekte?

Oleg

Kiriltsev20.11.14

15:00 - 15:45

Istanbul Tune Up Your APEX

Oliver

Lemm20.11.14

|

Telefon:

Telefax:

E-Mail:

www.mt-ag.com

Vielen Dank…

Beraterin Oracle Application Express

+49 2102 30961 -0

+49 2102 30961 -101

[email protected]

Franziska Höcker

Dateien per Drag & Drop in APEX Applikationen ablegen.

Technology