APEX Interactive Grid API Essentials: The Stuff You Will Really Use
2 likes2,138 views
The document discusses the JavaScript APIs available for customizing and interacting with interactive grids in Oracle Application Express (APEX). It provides an overview of the key APIs, such as interactiveGrid, grid, and apex.model, and examples of how to use them for validations, customizations, and standardizing changes across applications. It emphasizes best practices for adding JavaScript to APEX applications and leveraging the full capabilities of interactive grids.
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to APEX Interactive Grid API Essentials: The Stuff You Will Really Use (20)
Ad
More from Karen Cannell (20)
Ad
Recently uploaded (20)
APEX Interactive Grid API Essentials: The Stuff You Will Really Use
- 1. TH Technology APEX Interactive Grid API Essentials The Stuff You Will Really Use Karen Cannell [email protected] TH Technology @thtechnology
- 2. TH TechnologyTH Technology About Me … APEX Grid APIs • TH Technology – Oracle Consulting Services, APEX Focus • Mechanical/SW Engineer - Analyzed, designed, developed, converted, upgraded, enhanced legacy & database applications for 30+ years • Building Web/APEX applications for government, medical, engineering industries since HTMLDB beginnings • Leveraging Oracle10g,11g,12c,18c suite of tools • ODTUG Director, Editor Emeritus, ODTUG Technical Journal • Oracle Ace • APress Author 4/12/2019
- 5. TH TechnologyTH Technology About You … • Oracle Technology ? • Years w APEX ? • APEX Versions ? • Interactive Grid Experience? • Customizations ? Biggest Gripes? 4/12/2019APEX Grid APIs
- 6. TH TechnologyTH Technology Goal • Interactive Grid JavaScript APIs • Understand Using JS APIs for • Validations • Customizations • You Actually Use These APIs APEX Grid APIs 4/12/2019
- 7. TH TechnologyTH Technology Agenda • Quick Grid Review • Documented Grid APIs • Examples • Validations – Always Edit - Customizations • Standardizing • Best Practices / Recommendations APEX Grid APIs 4/12/2019
- 8. TH TechnologyTH Technology In the Sandbox … APEX Grid APIs 4/12/2019
- 9. TH TechnologyTH Technology Out of the Sandbox APEX Grid APIs 4/12/2019
- 10. TH TechnologyTH Technology Interactive Grid == Better Sandbox APEX Grid APIs 4/12/2019
- 11. TH Technology APEX Interactive Grid APIs: to BuildQuick Grid Review APEX Grid APIs 4/12/2019
- 12. TH TechnologyTH Technology Interactive Grid (Interactive Report or Tabular Form) + <All the Features You Ever Wanted> (Thank You APEX Team!) ----------------------------------------- Interactive Grid APEX Grid APIs 4/12/2019
- 13. TH TechnologyTH Technology Direction Interactive Report Tabular Form Interactive Grid APEX Grid APIs Now Future 4/12/2019
- 14. TH TechnologyTH Technology IGrid Architecture Interactive Grid – Under the Hood J Snyders http://hardlikesoftware.com/weblog/201 6/06/08/interactive-grid-under-the-hood/ APEX Grid APIs 4/12/2019
- 15. TH Technology APEX Interactive Grid APIs: to Build JavaScript APIs APEX Grid APIs 4/12/2019
- 16. TH TechnologyTH Technology Documented APIs • APEX 18.1+ • Documented == Supported APEX Grid APIs 4/12/2019
- 17. TH TechnologyTH Technology interactiveGrid APEX Grid APIs 4/12/2019
- 18. TH TechnologyTH Technology interactiveGrid - Customizations 4/12/2019APEX Grid APIs
- 19. TH TechnologyTH Technology interactiveGrid -- Save 4/12/2019APEX Grid APIs
- 20. TH TechnologyTH Technology grid APEX Grid APIs 4/12/2019
- 21. TH TechnologyTH Technology grid – Checking/Manipulating Grid • Edit Mode On/Off in BG • Refresh, Save via Dyn Actions • Selections Behind the Scenes 4/12/2019APEX Grid APIs
- 22. TH TechnologyTH Technology grid Edit Mode Check, On/Off 4/12/2019APEX Grid APIs
- 23. TH TechnologyTH Technology apex.model APEX Grid APIs 4/12/2019
- 24. TH TechnologyTH Technology model APEX Grid APIs 4/12/2019
- 25. TH TechnologyTH Technology model When Accessing Model 4/12/2019APEX Grid APIs
- 26. TH TechnologyTH Technology apex.item APEX Grid APIs 4/12/2019
- 27. TH TechnologyTH Technology apex.item in Dyn Action Validations 4/12/2019APEX Grid APIs
- 28. TH TechnologyTH Technology apex.item in Dyn Action Validations 4/12/2019APEX Grid APIs
- 29. TH TechnologyTH Technology Dynamic Action Events APEX Grid APIs 4/12/2019
- 30. TH TechnologyTH Technology Examples … • Mode Change – Edit/No Edit • Page Change – Pagination • Report Change – Public to Private, etc • Row initialization • Selection Change • View Change – Grid to Chart to Group By APEX Grid APIs 4/12/2019
- 31. TH Technology APEX Interactive Grid APIs: to Build Validations, Processing APEX Grid APIs 4/12/2019
- 32. TH TechnologyTH Technology APEX$ROW_SELECTOR – PL/SQL • Same as Tab Form: BEGIN IF :APEX$ROW_SELECTOR = ‘X’ THEN -- your processing goes here DELETE FROM EMP WHERE EMPNO = :ID; END IF; END; APEX Grid APIs 4/12/2019
- 33. TH TechnologyTH Technology Working w the Row Selector • JavaScript APEX Grid APIs 4/12/2019
- 34. TH TechnologyTH Technology Validations (Review!) • :COLUMN_NAME References • Similar to 4.2 Tab Form • On Submit • Dynamic Actions • Column Option • HTML5 Form Validation • Required • Pattern – Min, Max (Numbers) • In Custom Attributes APEX Grid APIs 4/12/2019
- 35. TH TechnologyTH Technology Dynamic Action • Just Like On a Page Item • Conditions/Action Reference Any Column In Row • Cannot Reference Element in Other Rows APEX Grid APIs 4/12/2019
- 36. TH TechnologyTH Technology Validation - PL/SQL (On Submit) APEX Grid APIs 4/12/2019
- 37. TH TechnologyTH Technology Validation – Dyn Action JS APEX Grid APIs 4/12/2019
- 39. TH TechnologyTH Technology APEX Grid APIs ids validity attribute 4/12/2019
- 40. TH TechnologyTH Technology JS: Access Grid, Model, Record… APEX Grid APIs 4/12/2019
- 41. TH TechnologyTH Technology //get value of a select list element var riff = model.getValue( record, “RIFF”).v //get display value of a select list element var riff = model.getValue( record, “RIFF”).d 4/12/2019APEX Grid APIs
- 42. TH Technology APEX Interactive Grid APIs: to BuildAlways Edit, Default Config, Disable Columns APEX Grid APIs 4/12/2019
- 43. TH TechnologyTH Technology Always Edit 4/12/2019APEX Grid APIs
- 44. TH TechnologyTH Technology Always Edit • Grid Always in Edit Mode • Saves a Double-Click to Activate Edit Mode 4/12/2019APEX Grid APIs
- 45. TH TechnologyTH Technology Default Grid Options • Advanced →JavaScript 4/12/2019APEX Grid APIs
- 46. TH TechnologyTH Technology Disable a Row 4/12/2019APEX Grid APIs
- 47. TH Technology APEX Interactive Grid APIs: to BuildCustomizations for Menus, Toolbars and More APEX Grid APIs 4/12/2019
- 48. TH TechnologyTH Technology Customizations • Advanced → JavaScript Code • Grid → Grid Menus • Column → Column Menu (Most of the Time…) • Read Widget JS Files to Learn What is Possible • Read Hardlikesoftware.com • Study IG Cookbook App No Longer PL/SQL Collections ~ Now JavaScript APEX Grid APIs 4/12/2019
- 49. TH TechnologyTH Technology Customization Examples • Change Toolbar • Change Column Heading Menu • Change RowAction Menu • Change Toolbar Actions Menu • “Global” Settings APEX Grid APIs 4/12/2019
- 50. TH TechnologyTH Technology There’s A Plugin for That … • Extend IG Toolbar https://apex.oracle.com/pls/apex/f?p= apexbyg:extendigtoolbar APEX Grid APIs 4/12/2019
- 51. TH Technology APEX Grid APIs 4/12/2019
- 52. TH TechnologyTH Technology Customized Row Actions, Action Menu APEX Grid APIs 4/12/2019
- 53. TH TechnologyTH Technology Change Toolbar APEX Grid APIs 4/12/2019
- 54. TH TechnologyTH Technology Change Toolbar APEX Grid APIs Goes in Grid Advanced → JavaScript 4/12/2019
- 55. TH TechnologyTH Technology Combine Stuff APEX Grid APIs 4/12/2019
- 56. TH TechnologyTH Technology Change Toolbar APEX Grid APIs 4/12/2019
- 57. TH TechnologyTH Technology Change Column Heading Menu APEX Grid APIs 4/12/2019
- 58. TH TechnologyTH Technology Change Column Heading Menu APEX Grid APIs Goes in Column Advanced → JavaScript 4/12/2019
- 59. TH TechnologyTH Technology Change Column Heading Menu APEX Grid APIs 4/12/2019
- 60. TH TechnologyTH Technology Change RowAction Menu APEX Grid APIs 4/12/2019
- 61. TH TechnologyTH Technology Change RowAction Menu APEX Grid APIs Goes in Page JavaScript 4/12/2019
- 62. TH TechnologyTH Technology Access the Model … APEX Grid APIs 4/12/2019
- 63. TH TechnologyTH Technology Change Toolbar Actions Menu APEX Grid APIs 4/12/2019
- 64. TH TechnologyTH Technology Change Toolbar Actions Menu APEX Grid APIs Goes in Grid Advanced → JavaScript 4/12/2019
- 65. TH Technology APEX Interactive Grid APIS: to BuildStandardize Customizations Across Applications APEX Grid APIs 4/12/2019
- 66. TH TechnologyTH Technology “Global” Settings • JS Function in JS File • Include File • Reference JS Function in Advanced → JavaScript Code • Add Classes on Grids APEX Grid APIs 4/12/2019
- 67. TH TechnologyTH Technology 4/12/2019APEX Grid APIs
- 68. TH TechnologyTH Technology • << code example>> • << Demo app w common settings >> APEX Grid APIs 4/12/2019
- 69. TH Technology APEX Grid APIs 4/12/2019
- 70. TH TechnologyTH Technology APEX Grid APIs 4/12/2019
- 71. TH TechnologyTH Technology gReport.search Equivalent APEX Grid APIs 4/12/2019
- 72. TH TechnologyTH Technology Custom: Edit via Dialog • IG Cookbook Application • Edits in Dialog • Changed Row Actions • Advanced, Possibilities! APEX Grid APIs 4/12/2019
- 73. TH TechnologyTH Technology APEX Grid APIs 4/12/2019
- 74. TH TechnologyTH Technology So What (Else) Can I Do ? APEX Grid APIs From the JavaScript console type: apex.region(“igrid_id").widget().interactiveGrid("option","config") 4/12/2019
- 75. TH TechnologyTH Technology … APEX Grid APIs 4/12/2019
- 76. TH TechnologyTH Technology Out of the Sandbox APEX Grid APIs 4/12/2019
- 77. TH Technology APEX Interactive Grid APIS: to BuildBest Practices Recommendations for Adding JavaScript to APEX Applications APEX Grid APIs 4/12/2019
- 78. TH TechnologyTH Technology Adding JS to APEX • Follow the Usual Best Practicies: • Put Bulk of Code in JS Files • Minify • Read More in the Introduction ot the JS API doc: Adding JavaScript to an Application Express application https://docs.oracle.com/en/database/oracle/applicationh ere!-express/18.2/aexjs/toc.html APEX Grid APIs 4/12/2019
- 79. TH TechnologyTH Technology 4/12/2019APEX Grid APIs
- 80. TH Technology APEX Interactive Grid APIS: to BuildWrapup APEX Grid APIs 4/12/2019
- 81. TH TechnologyTH Technology Interactive Grid APIs - Recap • Essential Grid JavaScript APIs InteractiveGrid grid apex.model apex.item • Dynamic Actions, Validations grid apex.model apex.item • Customizations All of the above APEX Grid APIs 4/12/2019
- 82. TH TechnologyTH Technology APEX Grid APIs 4/12/2019
- 83. TH TechnologyTH Technology Challenge • Sample Interactive Grid App • IG Cookbook http://www.hardlikesoftware.com • Read the JS Widget Code <apex_install_dir>/images/libraries/apex PLAY APEX Grid APIs Homework 4/12/2019
- 84. TH Technology Comments? Questions? Thank You! Karen Cannell [email protected] @thtechnology
- 85. TH TechnologyTH Technology Resources • APEX JavaScript Reference https://docs.oracle.com/en/database/oracle/application-express/18.2/aexjs/toc.html • Sample Interactive Grids APEX 18.2+ Sample Application, Editing section • Interactive Grid Cookbook, 18.2 http://hardlikesoftware.com/weblog/2018/10/10/apex-ig-cookbook-update-for-18-2/ • 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/ 4/12/2019APEX Grid APIs
- 86. TH TechnologyTH 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 4/12/2019APEX Grid APIs
- 87. TH TechnologyTH Technology Dyn Action on the Grid 4/12/2019APEX Grid APIs
- 88. TH TechnologyTH Technology • Text Field model.getValue( record, ,‘COLUMN_NAME’); • Select List model.getValue( record, ,‘COLUMN_NAME’).d; model.getValue( record, ,‘COLUMN_NAME’).v; 4/12/2019APEX Grid APIs https://community.oracle.com/thread/41 86485?start=0&tstart=0