APEX Interactive Grids: Standardize for Sanity
0 likes276 views
The document discusses the importance of standardizing interactive grids in Oracle APEX applications to enhance user experience and developer efficiency. It covers best practices, customizations using JavaScript APIs, and suggestions for maintaining consistency across multiple applications. Key recommendations include establishing common settings, utilizing shared configurations, and implementing a standardization approach to alleviate developer confusion and improve user satisfaction.
APEX Interactive Grids: Standardize for Sanity
- 1. TH Technology APEX Interactive Grids: Standardize for Sanity Karen Cannell kcannell@thtechnology.com TH Technology @thtechnology
- 2. TH Technology About Me … • TH Technology – Oracle Consulting Services, APEX Focus • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & Oracle database applications for 30+ Years • Web/APEX applications for Government, Medical, Engineering industries since HTMLDB • ODTUG Vice President, Editor Emeritus, Technical Journal • APress Author • Oracle Ace Director APEX Grids: Standardize 5/14/2020 2
- 3. TH Technology APEX Validations: Both Sides Now 35/14/2020
- 4. TH Technology 5/14/2020 4APEX Validations: Both Sides Now
- 5. TH Technology STAY SAFE #FlattenTheCurve 5/14/2020 5APEX Interactive Grids: Standardize
- 7. TH Technology About You … • APEX Experience? • APEX Versions? • Grid Experience? • JavaScript Experts? • <1 to Many • 5.1 and Higher • Fair to Middlin’ • Not Exactly 5/14/2020 7APEX Grids: Standardize
- 8. TH Technology Agenda • Interactive Grid Declarative Options • Use of JS APIs for Customizations • Standardize Grids: Why • Standardize Grids: How • Best Practices / Recommendations 5/14/2020APEX Grids: Standardize 8
- 9. TH Technology Interactive Grid == Better Sandbox 5/14/2020APEX Grids: Standardize 9
- 10. TH Technology Out of the Sandbox 5/14/2020APEX Grids: Standardize 10
- 11. TH Technology 5/14/2020APEX Grids: Standardize 11
- 12. TH Technology Interactive Grid Customization Leaves LOW CODE Behind … So … Standardize 5/14/2020APEX Grids: Standardize 12
- 13. TH Technology Interactive Grid (Interactive Report or Tabular Form) + <All the Features You Ever Wanted> (Thank You APEX Team!) ----------------------------------------- Interactive Grid 5/14/2020APEX Grids: Standardize 13
- 14. TH Technology Direction Interactive Report Tabular Form Interactive Grid 5/14/2020APEX Grids: Standardize Now Future 14
- 15. TH Technology IGrid Architecture Interactive Grid – Under the Hood J Snyders http://hardlikesoftware.com/weblog/2016/06/ 08/interactive-grid-under-the-hood/ 5/14/2020APEX Grids: Standardize 15
- 16. TH Technology Settings and Configurations • Do It Declaratively First 5/14/2020APEX Grids: Standardize LOW CODE 16
- 17. TH Technology Lots of Declarative Settings 5/14/2020 17APEX Grids: Standardize
- 18. TH Technology Not All is Declarative … • Turn Column Header Off • Add/Remove Toolbar Buttons /Actions • Add/Remove Action Menu Options 5/14/2020 18APEX Grids: Standardize
- 19. TH Technology Not All is Declarative … • Turn Column Header Off • Code in Column Advanced → JavaScript • Add/Remove Toolbar Buttons /Actions • Code in Grid Advanced → JavaScript • Add/Remove Action Menu Options • Code in Page Advanced → JavaScript 5/18/2020 19APEX Grids: Standardize
- 20. TH Technology Most Grids are a Combination • Declarative • Customizations 5/14/2020 20APEX Grids: Standardize
- 21. TH Technology Grid Configuration Examples • We can customize Grids to look like these … 5/14/2020 21APEX Grids: Standardize
- 22. TH Technology Grid Customization Examples • We can customize Grid columns to behave like these … 5/14/2020 22APEX Grids: Standardize
- 23. TH Technology Consider … • 5 Developers ➔ 5 Different Grids • 5 Developers, Same App ➔ 5 Different Grids COMMUNICATE SHARE 5/14/2020 23APEX Grids: Standardize
- 24. TH Technology Consider … • 1 Developer, 5 Days ➔ 5 Different Grids • 1 Developer, 5 Apps ➔ 5 Different Grids STANDARDS … SLEEP or COFFEE or SANITY 5/14/2020 24APEX Grids: Standardize
- 25. TH Technology Mixed Up Application Examples • Different Grid Appearance • Different Grid Functions • Different Column Names, Order, Size • Different Pagination, • Different Edit Modes, Validations, Messages 5/14/2020 25APEX Grids: Standardize
- 26. TH Technology 5/14/2020APEX Grids: Standardize 26
- 27. TH Technology Why Standardize Your Grids? • User Experience • User Sanity (Your Reputation) • Developer Development and Maintenance • Developer Sanity 5/14/2020 27APEX Grids: Standardize
- 28. TH Technology Standardize: User Experience • Column Names, Types, Order, Size • Toolbar Configuration • Button Names, Placement, Actions • “Add Row” vs “Add Employee” • Text vs Icons vs Both • Pagination, # Rows Displayed, Shading 5/14/2020 28APEX Grids: Standardize
- 29. TH Technology Standardize: Developer Experience • No Guessing • No Reinventing the Wheel • Directions • Common Code Base, Settings • Use Your JavaScript Experts 5/14/2020 29APEX Grids: Standardize
- 30. TH Technology Standardize 1. Have Standards 2. Use Your Standards 3. Share Configuration Settings, Code 4. Really Use Your Standards 5/14/2020 30APEX Grids: Standardize
- 31. TH Technology Grid Standards • Features • Buttons, Pagination, Actions, Shortcuts • Views: Chart, GB, Icon, Detail • Template • Column • Name, Format, Alignment, Order 5/18/2020 31APEX Grids: Standardize
- 32. TH Technology How to Standardize Grids • Cheat Sheet of Grid Settings, Config • Build One and Copy/Duplicate • Build a Plugin • Use a Plugin* • Use a Common Configuration File 5/14/2020 32APEX Grids: Standardize
- 33. TH TechnologyTH Technology Let’s Take A Look … 5/19/2020 33APEX Grids: Standardize
- 34. TH Technology Do It Declaratively First … but Be Careful w Declarative in Combo w Customizations (Don’t Hang Yourself) 5/14/2020APEX Grids: Standardize 34
- 35. TH Technology • Example of Declaratively Turning Off Edit, Save button • Custom Code to Limit Buttons 5/14/2020APEX Grids: Standardize 35
- 36. TH Technology • Example of Column Heading Settings • Custom Code for 3 types of settings, mix of declarative and code • Freeze vs noHeaderActivate and Sort • noReorder 5/18/2020APEX Grids: Standardize 36
- 37. TH Technology APEX Interactive Grid: Standardize JavaScript APIs 5/14/2020 APEX Grids: Standardize 37
- 38. TH Technology Documented APIs • APEX 18.1+ • Documented == Supported https://apex.oracle.com/api #39 JavaScript APIs 5/14/2020APEX Grids: Standardize 38
- 39. TH Technology interactiveGrid - Customizations 5/14/2020APEX Grids: Standardize 39
- 40. TH Technology interactiveGrid -- Save 5/14/2020APEX Grids: Standardize 40
- 41. TH Technology model When Accessing Data 5/14/2020APEX Grids: Standardize 41
- 42. TH Technology Access the Model … 5/19/2020APEX Grids: Standardize 42
- 43. TH Technology apex.item in Dyn Action Validations 5/14/2020APEX Grids: Standardize 43
- 44. TH Technology APEX Interactive Grid: Standardize Customizations for Menus, Toolbars and More 5/14/2020 APEX Grids: Standardize 44
- 45. TH Technology Customizations • Advanced → JavaScript Code • Grid → Grid Menus • Column → Column Menu (Most of the Time…) • Read Documented APIs to Learn What is Possible • Read Hardlikesoftware.com • Study IG Cookbook App No Longer PL/SQL Collections ~ Now JavaScript 5/14/2020APEX Grids: Standardize 45
- 46. TH Technology 5/14/2020APEX Grids: Standardize 46
- 47. TH Technology Customization Examples • Change Toolbar • Change Column Heading Menu • Change RowAction Menu • Change Toolbar Actions Menu • Standardize w “Global” Settings 5/14/2020APEX Grids: Standardize 47
- 48. TH Technology There’s A Plugin for That … • Extend IG Toolbar M. Goricki https://apex.oracle.com/pls/apex/f?p=apex byg:extendigtoolbar https://github.com/mgoricki/apex- plugin-extend-ig-toolbar 5/14/2020APEX Grids: Standardize 48
- 49. TH Technology • Using This Plugin Does NOT Standardize ! • Just Makes It Easier (Less Code) to Customize … 5/14/2020 49APEX Grids: Standardize
- 50. TH Technology Change Toolbar 5/14/2020APEX Grids: Standardize 50
- 51. TH Technology Change Toolbar 5/14/2020APEX Grids: Standardize Goes in Grid Advanced → JavaScript 51
- 52. TH Technology Combine Stuff 5/14/2020APEX Grids: Standardize 52
- 53. TH Technology Change Toolbar 5/14/2020APEX Grids: Standardize 53
- 54. TH Technology Replace Toolbar Code 5/14/2020APEX Grids: Standardize 54
- 55. TH Technology Change Column Heading Menu 5/14/2020APEX Grids: Standardize 55
- 56. TH Technology Change Column Heading Menu 5/14/2020APEX Grids: Standardize Goes in Column Advanced → JavaScript OLD WAY …! 56
- 57. TH Technology Change Column Heading Menu • Wait! Now Declarative … Mostly 5/14/2020APEX Grids: Standardize 57
- 58. TH Technology Change Column Heading Menu 5/14/2020APEX Grids: Standardize 58
- 59. TH Technology Change Column Heading Menu 5/14/2020APEX Grids: Standardize Goes in Column Advanced → JavaScript 59
- 60. TH Technology Change RowAction Menu 5/14/2020APEX Grids: Standardize 60
- 61. TH Technology Change RowAction Menu 5/14/2020APEX Grids: Standardize Goes in Page JavaScript 61
- 62. TH Technology Change Toolbar Actions Menu 5/14/2020APEX Grids: Standardize 62
- 63. TH Technology Change Toolbar Actions Menu 5/14/2020APEX Grids: Standardize Goes in Grid Advanced → JavaScript 63
- 64. TH Technology APEX Interactive Grid: Standardize Customizations Across Applications 5/14/2020 APEX Grids: Standardize 64
- 65. TH Technology Standardize via “Global” Settings • JS Function in JS File • Include File • Reference JS Function in Advanced → JavaScript Code • Add Classes on Grids 5/14/2020APEX Grids: Standardize 65
- 66. TH Technology APEX Grids: Standardize 5/14/2020 66
- 67. TH Technology 5/14/2020APEX Grids: Standardize 67
- 68. TH Technology 5/14/2020APEX Grids: Standardize 68
- 69. TH Technology Global Settings • Add JS Function in Advanced→ JavaScript Initialization Code of the Grid • Add classes to the CSS Classes of the Grid APEX Grids: Standardize 5/14/2020 69
- 70. TH Technology 5/14/2020APEX Grids: Standardize 70
- 71. TH Technology If There Is A Mistake …. APEX Grids: Standardize 5/14/2020 71
- 72. TH Technology Best Practices Recommendations for Adding JavaScript to APEX Applications 5/14/2020 APEX Grids: Standardize 72 APEX Interactive Grids: Standardize
- 73. TH Technology Adding JS to APEX Follow the Usual Best Practices: • Put Bulk of Code in JS Files • Minify • Read More in the Introduction to the JS API doc: Adding JavaScript to an Application Express application https://docs.oracle.com/en/database/oracle/application- express/19.1/aexjs/index.html 5/14/2020APEX Grids: Standardize 73
- 74. TH Technology 5/14/2020APEX Grids: Standardize 74
- 76. TH Technology Standardize Your Grids • Have Standards • Apply Common Settings, Configurations • Use Copy/Duplicate and/or Plugins • Use a Standard Global Configuration File, Function and Classes 5/14/2020 76APEX Grids: Standardize
- 77. TH Technology Stay Sane, Keep Your Users Happy … 5/14/2020 77APEX Grids: Standardize
- 78. TH Technology 5/14/2020APEX Grids: Standardize 78
- 79. TH Technology 5/14/2020APEX Grids: Standardize 79
- 80. TH Technology Challenge • Sample Interactive Grid App • IG Cookbook http://www.hardlikesoftware.com • Read the APIs (coffee!!) • Read the JS Widget Code <apex_install_dir>/images/libraries/apex PLAY 5/14/2020APEX Grids: Standardize Homework 80
- 81. TH Technology Low Code Lowdown: APEX vs VBCS kcannell@thtechnology.com @thtechnology Questions? Email for slides, demo app
- 82. TH Technology Resources • APEX JavaScript Reference https://docs.oracle.com/en/database/oracle/application-express/19.1/aexjs/index.html • Sample Interactive Grids APEX 19.1+ Sample Application, Editing section • Interactive Grid Cookbook, 19.1 http://hardlikesoftware.com/weblog/2019/03/30/apex-ig-cookbook-update-for-19-1/ • Architecture: Interactive Grids Under the Hood http://hardlikesoftware.com/weblog/2016/06/08/interactive-grid-under-the-hood/ • More on Grids: How to Hack Interactive Grids, Parts I thru IV http://hardlikesoftware.com/weblog/2017/01/18/how-to-hack-apex-interactive-grid-part-1/ 5/14/2020APEX Grids: Standardize 82
- 83. TH Technology Resources, cont’d • APEX Client-Side Validation http://hardlikesoftware.com/weblog/2017/05/10/apex-client-side- validation/#more-615 • Interactive Grid Extend Toolbar Plugin https://github.com/mgoricki/apex-plugin-extend-ig-toolbar Shortcut to APEX JavaScript APIs: apex.oracle.com/api #39 JavaScript APIs follow the link 5/14/2020APEX Grids: Standardize 83
- 84. TH Technology Where to Put JS Files • https://www.talkapex.com/2017/01 /how-to-reference-javsscript-and-css- files-for-entire-application/js- storage.gif 5/14/2020APEX Grids: Standardize 84