APEX Grids: Standardize for Productivity and Sanity
0 likes117 views
The document discusses the standardization of interactive grids in Apex technology, emphasizing the importance of consistency in user and developer experiences. It outlines best practices for grid configurations, customizations, and the use of JavaScript API, while encouraging the adoption of uniform standards across applications. Recommendations include using global settings, common configurations, and leveraging plugins for customization to enhance usability and maintenance efficiency.
APEX Grids: Standardize for Productivity and 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 Govt, Medical, Engineering, Fisheries since HTMLDB • ODTUG Vice President, Editor Emeritus, Technical Journal • APress Author • Oracle ACE Director APEX Grids: Standardize 6/17/2020 2
- 3. TH Technology #StaySafe #FlattenTheCurve #StayVigilant 6/17/2020 3APEX Interactive Grids: Standardize
- 4. TH Technology About You … • APEX Experience? • APEX Versions? • Grid Experience? • JavaScript Experts? • <1 to Many Yrs • 5.1 and Higher • Fair to Middlin’ • Not Exactly 6/17/2020 4APEX Grids: Standardize
- 5. TH Technology STANDARDIZE Your Interactive Grids Why ~ How ~ Best Practices 6/17/2020APEX Grids: Standardize 5
- 6. TH Technology Interactive Grid == Better Sandbox 6/17/2020APEX Grids: Standardize 6
- 7. TH Technology Out of the Sandbox 6/17/2020APEX Grids: Standardize 7
- 8. TH Technology 6/17/2020APEX Grids: Standardize 8
- 9. TH Technology Direction Interactive Report Tabular Form Interactive Grid 6/17/2020APEX Grids: Standardize Now Future 9
- 10. TH Technology Interactive Grid (Interactive Report or Tabular Form) + <All the Features You Ever Wanted> (Thank You APEX Team!) ----------------------------------------- Interactive Grid 6/17/2020APEX Grids: Standardize 10
- 11. TH Technology IGrid Architecture Interactive Grid – Under the Hood J Snyders http://hardlikesoftware.com/weblog/2016/06/ 08/interactive-grid-under-the-hood/ 6/17/2020APEX Grids: Standardize 11
- 12. TH Technology Interactive Grid Customization Leaves LOW CODE Behind … So … Standardize 6/17/2020APEX Grids: Standardize 12
- 13. TH Technology Settings and Configurations • Do It Declaratively First 6/17/2020APEX Grids: Standardize LOW CODE 13
- 14. TH Technology Lots of Declarative Settings 6/17/2020 14APEX Grids: Standardize
- 15. TH Technology Not All is Declarative … • Turn Column Header Off • Add/Remove Toolbar Buttons /Actions • Add/Remove Action Menu Options 6/17/2020 15APEX Grids: Standardize
- 16. 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 6/17/2020 16APEX Grids: Standardize
- 17. TH Technology Most Grids are a Combination • Declarative • Customizations 6/17/2020 17APEX Grids: Standardize
- 18. TH Technology Grid Configuration Examples • We can customize Grids to look like these … 6/17/2020 18APEX Grids: Standardize
- 19. TH Technology Grid Customization Examples • We can customize Grid columns to behave like these … 6/17/2020 19APEX Grids: Standardize
- 20. TH Technology Consider … • 5 Developers ➔ 5 Different Grids • 5 Developers, Same App ➔ 5 Different Grids COMMUNICATE SHARE 6/17/2020 20APEX Grids: Standardize
- 21. TH Technology Consider … • 1 Developer, 5 Days ➔ 5 Different Grids • 1 Developer, 5 Apps ➔ 5 Different Grids STANDARDS … SLEEP or COFFEE or SANITY 6/17/2020 21APEX Grids: Standardize
- 22. TH Technology Mixed Up Application Examples • Different Grid Appearance • Different Grid Functions • Different Column Names, Order, Size • Different Pagination, • Different Edit Modes, Validations, Messages 6/17/2020 22APEX Grids: Standardize
- 23. TH Technology 6/17/2020APEX Grids: Standardize 23
- 24. TH Technology Why Standardize Your Grids? • User Experience • User Sanity (Your Reputation) • Developer Development and Maintenance • Developer Sanity 6/17/2020 24APEX Grids: Standardize @thtechnology
- 25. 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 6/17/2020 25APEX Grids: Standardize @thtechnology
- 26. TH Technology Standardize: Developer Experience • No Guessing • No Reinventing the Wheel • Directions • Common Code Base, Settings • Use Your JavaScript Experts 6/17/2020 26APEX Grids: Standardize
- 27. TH Technology Standardize 1. Have Standards 2. Use Your Standards 3. Share Configuration Settings, Code 4. Really Use Your Standards 6/17/2020 27APEX Grids: Standardize
- 28. TH Technology Grid Standards • Features • Buttons, Pagination, Actions, Shortcuts • Views: Chart, GB, Icon, Detail • Template • Column • Name, Format, Alignment, Order 6/17/2020 28APEX Grids: Standardize
- 29. 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 6/17/2020 29APEX Grids: Standardize
- 30. TH TechnologyTH Technology Let’s Take A Look … 6/17/2020 30APEX Grids: Standardize @thtechnology
- 31. TH Technology Do It Declaratively First … but Be Careful w Declarative in Combo w Customizations (Don’t Hang Yourself) 6/17/2020APEX Grids: Standardize @thtechnology 31
- 32. TH Technology • Example of Declaratively Turning Off Edit, Save button • Custom Code to Limit Buttons 6/17/2020APEX Grids: Standardize 32
- 33. 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 6/17/2020APEX Grids: Standardize 33
- 34. TH Technology APEX Interactive Grid: Standardize JavaScript APIs 6/17/2020 APEX Grids: Standardize 34
- 35. TH Technology Documented APIs • APEX 18.1+ • Documented == Supported https://apex.oracle.com/api #39 JavaScript APIs 6/17/2020APEX Grids: Standardize 35
- 36. TH Technology interactiveGrid - Customizations 6/17/2020APEX Grids: Standardize 36
- 37. TH Technology interactiveGrid -- Save 6/17/2020APEX Grids: Standardize 37
- 38. TH Technology model When Accessing Data 6/17/2020APEX Grids: Standardize 38
- 39. TH Technology Access the Model … 6/17/2020APEX Grids: Standardize 39
- 40. TH Technology apex.item in Dyn Action Validations 6/17/2020APEX Grids: Standardize 40
- 41. TH Technology APEX Interactive Grid: Standardize Customizations for Menus, Toolbars and More 6/17/2020 APEX Grids: Standardize 41
- 42. 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 6/17/2020APEX Grids: Standardize 42
- 43. TH Technology 6/17/2020APEX Grids: Standardize 43
- 44. TH Technology Customization Examples • Change Toolbar • Change Column Heading Menu • Change RowAction Menu • Change Toolbar Actions Menu • Standardize w “Global” Settings 6/17/2020APEX Grids: Standardize 44
- 45. 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 6/17/2020APEX Grids: Standardize 45
- 46. TH Technology • Using This Plugin Does NOT Standardize ! • Just Makes It Easier (Less Code) to Customize … 6/17/2020 46APEX Grids: Standardize
- 47. TH Technology Change Toolbar 6/17/2020APEX Grids: Standardize 47
- 48. TH Technology Change Toolbar 6/17/2020APEX Grids: Standardize Goes in Grid Advanced → JavaScript 48
- 49. TH Technology Combine Stuff 6/17/2020APEX Grids: Standardize 49
- 50. TH Technology Change Toolbar 6/17/2020APEX Grids: Standardize 50
- 51. TH Technology Replace Toolbar Code 6/17/2020APEX Grids: Standardize 51
- 52. TH Technology Change Column Heading Menu 6/17/2020APEX Grids: Standardize 52
- 53. TH Technology Change Column Heading Menu 6/17/2020APEX Grids: Standardize Goes in Column Advanced → JavaScript OLD WAY …! 53
- 54. TH Technology Change Column Heading Menu • Wait! Now Declarative … Mostly 6/17/2020APEX Grids: Standardize 54
- 55. TH Technology Change Column Heading Menu 6/17/2020APEX Grids: Standardize 55
- 56. TH Technology Change Column Heading Menu 6/17/2020APEX Grids: Standardize Goes in Column Advanced → JavaScript 56
- 57. TH Technology Change RowAction Menu 6/17/2020APEX Grids: Standardize 57
- 58. TH Technology Change RowAction Menu 6/17/2020APEX Grids: Standardize Goes in Page JavaScript 58
- 59. TH Technology Change Toolbar Actions Menu 6/17/2020APEX Grids: Standardize 59
- 60. TH Technology Change Toolbar Actions Menu 6/17/2020APEX Grids: Standardize Goes in Grid Advanced → JavaScript 60
- 61. TH Technology APEX Interactive Grid: Standardize Customizations Across Applications 6/17/2020 APEX Grids: Standardize @thtechnology 61
- 62. TH Technology Standardize via “Global” Settings • JS Function in JS File • Include File • Reference JS Function in Advanced → JavaScript Code • Add Classes on Grids 6/17/2020APEX Grids: Standardize 62
- 63. TH Technology APEX Grids: Standardize 6/17/2020 63
- 64. TH Technology 6/17/2020APEX Grids: Standardize 64
- 65. TH Technology 6/17/2020APEX Grids: Standardize 65
- 66. 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 6/17/2020 66
- 67. TH Technology 6/17/2020APEX Grids: Standardize 67
- 68. TH Technology If There Is A Mistake …. APEX Grids: Standardize 6/17/2020 68
- 69. TH Technology Best Practices Recommendations for Adding JavaScript to APEX Applications 6/17/2020 APEX Grids: Standardize 69 APEX Interactive Grids: Standardize
- 70. 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 6/17/2020APEX Grids: Standardize 70
- 71. TH Technology 6/17/2020APEX Grids: Standardize 71
- 73. 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 6/17/2020 73APEX Grids: Standardize
- 74. TH Technology Stay Sane, Keep Your Users Happy … 6/17/2020 74APEX Grids: Standardize
- 75. TH Technology 6/17/2020APEX Grids: Standardize 75
- 76. TH Technology 6/17/2020APEX Grids: Standardize 76
- 77. 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 6/17/2020APEX Grids: Standardize Homework 77
- 78. TH Technology Questions? Thank You Email for Demo App, Slides Karen Cannell kcannell@thtechnology.com @thtechnology
- 79. 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/ 6/17/2020APEX Grids: Standardize 79
- 80. 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 6/17/2020APEX Grids: Standardize 80
- 81. 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 6/17/2020APEX Grids: Standardize 81