Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Let your clients do the work - Client side validations in APEX 5.1

APEX connect 2017

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

Let your clients do the work - Client side validations in APEX 5.1

  1. 1. Let Your Clients do the Work Steven Grzbielok: 11.05.2017 | APEX connect 2017
  2. 2. Facts & Figures Mittelständischer IT-Dienstleister Technologie-orientiert Branchen-unabhängig Hauptsitz Ratingen 240 Beschäftigte Gründung 1994 Niederlassung Frankfurt am Main Ausbildungs- betrieb Inhabergeführt Zertifizierter Partner von Oracle, Microsoft und SAP 28 Mio. Euro Umsatz 2 Managing Technology
  3. 3.  Steven Grzbielok  Seit 08.2014 Berater bei der MT AG in Ratingen  B.Sc. in Wirtschaftsinformatik, M.Sc. in Arbeit  Beschäftigt sich seit 2014 mit Oracle Application Express und Oracle Datenbanken  APEX Showcase https://apex.mt-ag.com/  Twitter https://twitter.com/sgrzbielok 3 Über mich
  4. 4. Agenda 1. Clientseitige Validierungen 2. HTML5 3. APEX out of the box 4. Plugins & Frameworks 4
  5. 5. Der Standard: Serverseitige Validierungen 5 Email = info_at_mail.com No valid email! Korrektur Submit Erro r
  6. 6. Problematik Belastung des Servers bei jeder fehlerhaften Eingabe Nutzer erkennt nur Fehler beim Submit Nutzer muss ggf. Eingaben wiederholen 6
  7. 7. Lösung: Client-seitige Validierungen Validierungen auf dem Clientsystem Entlastung des Servers Client-State erhalten Zeitnah nach der Eingabe, ohne Submit Kürzere Korrekturschleifen durch den Nutzer 7
  8. 8. HTML5 Constraints Attribute: Disabled Min/Max Pattern Required Type Design via CSS möglich Validierung beim Verlassen d. Items, Meldung vor dem Submit Fehlermeldung anpassbar data-valid-message=”Employee Name is required” 8
  9. 9. HTML5 Constraints 9
  10. 10. HTML5 Constraints 10 Validierungsergebnisse gestalten: Pseudo-Klassen Selector Description :disabled Selects input elements with the "disabled" attribute specified :invalid Selects input elements with invalid values :optional Selects input elements with no "required" attribute specified :required Selects input elements with the "required" attribute specified :valid Selects input elements with valid values
  11. 11. HTML5 Constraints  Teilweise unterstützt ab IE9 11 Browser Support
  12. 12. 12 Demo Time!
  13. 13.  Neue APIs apex.page.validate apex.item  getValidity und getValidationMessage 13 Neu in APEX 5.1 http://hardlikesoftware.com/weblog/2017/05/10/apex-client-side-validation/
  14. 14.  Mögliche Implementierung der Validierung als Dynamic Action 14 JavaScript APIs Neu in APEX 5.1 http://hardlikesoftware.com/weblog/2017/05/10/apex-client-side-validation/
  15. 15. APEX out of the box  Required  Zeichenbegrenzungen  Subtype  Email  Phone Number  URL 15
  16. 16. APEX out of the box Neuladen der Seite verhindern Warnung bei ungespeicherten Änderungen 16
  17. 17. HTML5 Validierungen einfach einfügen 17 Keine Lust auf reguläre Ausdrücke?  http://regexr.com/
  18. 18. 18 Demo Time!
  19. 19. Clientseitige Validierungen mit Plugins 19 Live Validations von Nick Buytaert
  20. 20. 20 PRETIUS Client Side Validation Plugin Clientseitige Validierungen mit Plugins Demo Time!
  21. 21. Clientseitige Validierungen mit Plugins 21  Pretius Client Side Validation Plugin  Schnelles Setup  nur eine Dynamic Action (auf Seite 0) nötig  Ausführen von beliebigen Validierungen möglich  Jedoch serverseitig: JavaScript ruft Validierung in der Datenbank auf  Kein Submit nötig  Validierung findet jedoch auf der Server-Seite statt  Live Validation Plugin  Echte clientseitige Validierungen  Jedoch „nur“ auf Basis der HTML5 Validierungen
  22. 22. JavaScript Frameworks 22 Unter anderem  Parsley.js  validate.js  Verify.js  gvalidator  formance.js  accounting.js  example-user.js  jquery.payment  …
  23. 23. Parsley 23
  24. 24. Parsley  Kann Submit unterdrücken  Einfache Validierungen über HTML-Attribute möglich  Komplexe Validierungen mit JavaScript  Kombination mit Serverseitigen Validierungen durch Abfrage von Seitenprozessen im JavaScript möglich 24
  25. 25. Json Form Validator 25 https://github.com/amitava82/json-form-validator
  26. 26. Json Form Validator  Guter Überblick über alle Validierungen  Features noch stark eingeschränkt  Lediglich HTML5 Features 26
  27. 27. Ausblick: JavaScript Validierungen in APEX  Item Plugin oder Dynamic Action Plugin  Zuordnung durch CSS-Klassen  Auf Global Page – 0 einbinden 27
  28. 28. Exkurs: Was kann der Client noch für Sie tun?  Automatische Datumsformatierung mit JavaScript 28
  29. 29. 29 Clientseitige Validierungen sind kein Ersatz für serverseitige Validierungen!
  30. 30. 30
  31. 31. Fazit  Einfache Validierung: HTML5 oder APEX-Boardmittel  Komplexere Validierungen: JavaScript und DB im Zusammenspiel  Für bessere UX: Pretius Plugin  Client nicht zu stark belasten, Server aber auch nicht 31
  32. 32. Vielen Dank! Noch Fragen? Vortragsbewertung: http://bit.ly/2oUfQR1 @sgrzbielok xing.com/profile/Steven_Grzbielok

×