Going to the Grid: Tabular Form Edition (Oracle APEX Editable Interactive Grids)
1 like2,191 views
The document discusses the evolution and features of the Interactive Grid in Oracle APEX 5.1, highlighting its transition from traditional tabular forms and emphasizing its editing capabilities and advanced features. It provides insights into upgrading from tabular forms to interactive grids, customization options, and the underlying architecture. Additionally, it covers practical implementation details, validation methods, and references resources for further exploration.
Going to the Grid: Tabular Form Edition (Oracle APEX Editable Interactive Grids)
- 1. Going to the Grid: Tabular Form Edition (APEX 5.1 Editable Interactive Grids) Karen Cannell kcannell@thtechnology.com TH Technology
- 2. TH Technology About Me … • 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 Oracle 10g,11g,12c suite of tools • Oracle Ace Associate • APress Author – Expert Oracle APEX • ODTUG Director • Editor Emeritus, ODTUG Technical Journal
- 4. TH Technology About You … • Oracle Technology ? • Years w APEX ? • APEX Versions ? • Interactive Reports and Tabular Forms ? • Customizations ? Biggest Gripes?
- 5. TH Technology Agenda • Evolution • Essentials – Tabular Form / Editable Focus • Build/Upgrade ~Features ~ Oddities • Extras (Advanced) • JavaScript Customizations • Wrapup • Pros/Cons ~ Questions
- 6. TH Technology In the Sandbox …
- 7. TH Technology Out of the Sandbox
- 8. TH Technology Interactive Grid == Better Sandbox
- 10. TH Technology Evolution: Tabular Forms • APEX 3 – Bare Bones • APEX 4.0 • RadioGroup, PopUp LOV, Simple CB • Declarative Validations • APEX 4.1 • :COLUMN References • Improved Error Handling • APEX 4.2, 5.0 • No Major TF enhancements • Major IR Rewrite • APEX 5.1 • Editable Interactive Grid (a Plugin) Beginning of Shift All Widgets
- 11. TH Technology Interactive Grid (Interactive Report or Tabular Form) + <All the Features You Ever Wanted> (Thank You APEX Team!) ----------------------------------------- Interactive Grid
- 12. TH Technology Direction Interactive Report Tabular Form Interactive Grid Now Future
- 13. TH Technology IGrid Architecture Interactive Grid – Under the Hood J Snyders http://hardlikesoftware.com/weblog/201 6/06/08/interactive-grid-under-the-hood/
- 14. Interactive Report • Generates HTML on Server, part of Page • Data Returned w UI Markup • One Big JS Module Interactive Grid • HTML Renders on Client • Data/Edits from Server via JSON • Collection of Widgets
- 15. Interactive Report • Collections (pre 5.0) • Browser Decides Column Width table-layout: auto; Interactive Grid • Model • Each Column is an “Item” • Fixed Table Layout
- 17. TH Technology Tabular Forms == Legacy
- 18. TH Technology Interactive Grid • Add image here – looks pretty much the same
- 19. TH Technology Editable Interactive Grid
- 21. TH Technology What Is Editable Columns • Display Only Rows • Allowed Row Operations • Set Column to Control Which Rows Are Editable
- 22. TH Technology Lost Update Type • Row Values • Checksum of All Query-able Columns • Column Value • ex: DATE_UPDATED
- 23. TH Technology Lost Updates, Lock Row • Lock Row Adds FOR UPDATE NOWAIT See Reference ~ Matt Mulvaney http://www.explorer.uk.com/apex-interactive-grid- preventing-lost-updates-record-locking/
- 24. TH Technology Who Can Edit (Authorizations)
- 25. TH Technology If Editable • Set a PK • Set Reload on Submit Only On Success
- 26. TH Technology
- 27. TH Technology Edit: Set One Column as a Primary Key
- 28. TH Technology
- 29. TH Technology Edit: Page Reload on Submit
- 31. TH Technology Working w the Row Selector • JavaScript
- 32. TH 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;
- 33. TH Technology Row Action Menu
- 34. TH Technology Save Interactive Grid Data
- 35. TH Technology
- 36. More Editable Grid Details: to Build Master-Detail, Cascading LOV, Dyn Actions, 32K Limit
- 37. TH Technology Master-Detail • Create Master Grid • Create Detail Grid • Set PKs for Both • On Detail Grid, Link via Master Region • Disable Detail Grid Save Button
- 38. TH Technology Cascading LOV • Just Like Page Item to Page Item
- 39. SELECT apex_item.checkbox (30, seq_id, 'onclick="highlight_row(this,' || seq_id || ')"', NULL, ':', 'f30_' || LPAD (seq_id, 4, '0') ) delete_checkbox, apex_item.hidden (31, seq_id) || apex_item.select_list_from_query (32, c001, 'SELECT dname d, ' || 'deptno r FROM eba_demo_tf_dept', 'style="width:220px" ' || 'onchange="f_set_casc_sel_list_item(this,' || 'f33_' || LPAD (seq_id, 4, '0') || ')"', 'YES', '0', '- Select Department -', 'f32_' || LPAD (seq_id, 4, '0'), NULL, 'NO' ) deptno, apex_item.select_list_from_query (33, c002, 'SELECT ename d, ' || 'empno r FROM eba_demo_tf_emp ' || 'WHERE deptno = ' || c001, 'style="width:220px"', 'YES', '0', '- Select Employee (' || (SELECT COUNT (*) FROM eba_demo_tf_emp WHERE deptno = c001) || ') -', 'f33_' || LPAD (seq_id, 4, '0'), NULL, 'NO' ) employee FROM apex_collections WHERE collection_name = 'DEPT_EMP' UNION ALL SELECT apex_item.checkbox (30, NULL, 'onclick="highlight_row(this,' || TO_NUMBER (9900 + LEVEL) || ')"', NULL, ':', 'f30_' || LPAD (9900 + LEVEL, 4, '0') ) delete_checkbox, apex_item.hidden (31, NULL) || apex_item.select_list_from_query (32, 0, 'SELECT dname d, ' || 'deptno r FROM eba_demo_tf_dept', 'style="width:220px" ' || 'onchange="f_set_casc_sel_list_item(this,' || 'f33_' || LPAD (9900 + LEVEL, 4, '0') || ')"', 'YES', '0', '- Select Department -', 'f32_' || LPAD (9900 + LEVEL, 4, '0'), NULL, 'NO' ) deptno, apex_item.select_list_from_query (33, NULL, 'SELECT ename d, ' || 'empno r FROM eba_demo_tf_emp ' || 'WHERE deptno = ' || 0, 'style="width:220px"', 'YES', '0', '- Select Employee (0) -', 'f33_' || LPAD (9900 + LEVEL, 4, '0'), NULL, 'NO' ) employee FROM DUAL WHERE :request = 'ADD_ROWS' CONNECT BY LEVEL = 2 Before (APEX 4.2)
- 41. TH Technology 32K Row Limit footer
- 42. TH Technology Dynamic Action • Just Like On a Page Item • Conditions/Action Reference Any Column In Row • Cannot Reference Element in Other Rows
- 43. TH Technology Validations (Overview!) • :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
- 44. TH Technology
- 45. Validation – Dyn Action JS
- 48. footer
- 49. TH Technology JS: Access Grid, Model, Record…
- 50. TH Technology Ugly Error Messages
- 51. Upgrading to Grid: to Build IR to Grid, Tabular Form to Grid
- 52. TH Technology Upgrade Tabular Forms? • Upgrade Utility • May Need Rework • Standard YES • Non-Standard • Maintain vs Rebuild • Rebuild is Relatively Quick • Rebuild is Cleaner HOW WHEN
- 53. TH Technology What Will Upgrade? • Keys Off ApplyMRU, ApplyMRD • Tries! • Custom Embedded Javascript • Custom Processes
- 54. TH Technology Manual Upgrade Steps • Backup • Change Region Type to I-Grid • Delete Old Buttons (you will Replace Them) • Set the Page Attribute Advanced > Reload on Submit = “Only for Success” • Set Region Attribute Edit Enabled to “Yes” • Check for ROWID – I-Grid uses its own – Remove Yours • Check Lost Updates • Check Validations • Check Processes Save Interactive Grid Data” Process • Rebuild Buttons • TEST TEST TEST
- 55. TH Technology • CREATE A BACKUP ! • TEST AN UPGRADE FIRST • REBUILDING IS OFTEN FASTER
- 56. Interactive Grid: Extras to Build Advanced: JS Customizations for Menus, Toolbars and More
- 57. TH Technology Customization Options • Same For Editable/Non-Editable • Toolbar • Action Menu • Column Heading Menu • Row Actions Menu
- 58. TH 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 No Longer PL/SQL Collections ~ Now JavaScript
- 59. TH Technology Grid Plugins • Extend IG Toolbar https://apex.oracle.com/pls/apex/f?p= apexbyg:extendigtoolbar
- 60. TH Technology Note: APEX 5.1.1 Patch John Snyders ~ Interactive Grid API Improvements http://hardlikesoftware.com/weblog/2017/03/28/apex-interactive-grid-api- improvements-in-5-1-1/ • 5.1.1 IGrid APIs are DIFFERENT from APEX 5.1.0 IGrid APIs … Current Version: 5.1.3 Expect the APIs to Update
- 63. TH Technology So What (Else) Can I Do ? From the JavaScript console type: apex.region(“igrid_id").widget().interactiveGrid("option","config")
- 64. TH Technology …
- 65. TH Technology Customization Examples • Change Toolbar • Change Column Heading Menu • Change RowAction Menu • Change Toolbar Actions Menu • “Global” Settings
- 66. TH Technology Customized Row Actions, Action Menu
- 68. TH Technology Change Toolbar Goes in Grid Advanced JavaScript
- 71. TH Technology Change Column Heading Menu
- 72. TH Technology Change Column Heading Menu Goes in Column Advanced JavaScript
- 73. TH Technology Change Column Heading Menu
- 74. TH Technology Change RowAction Menu
- 75. TH Technology Change RowAction Menu Goes in Page JavaScript
- 76. TH Technology Access the Model …
- 77. TH Technology Change Toolbar Actions Menu
- 78. TH Technology Change Toolbar Actions Menu Goes in Grid Advanced JavaScript
- 79. TH Technology “Global” Settings • JS Function in JS File • Include File • Reference JS Function in Advanced JavaScript Code • Add Classes on Grids
- 80. TH Technology • << code example>> • << Demo app w common settings >>
- 82. TH Technology
- 84. TH Technology Custom: Edit via Dialog • IG Cookbook Application • Edits in Dialog • Changed Row Actions • Advanced, Possibilities!
- 85. TH Technology
- 87. TH Technology Upgrade or Not? • Standard • Customized • Little Use • High Volume • Customized • Important
- 88. TH Technology Best to Rebuild When … • Low/Reasonable Volume of Tabular Forms to Upgrade • All Features Have a Declarative Equivalent in Interactive Grid No Sense to Upgrade to Make Extensive Customizations
- 89. TH Technology
- 90. TH Technology Challenge • Sample Interactive Grid App • IG Cookbook http://www.hardlikesoftware.com • Read the JS Widget Code <apex_install_dir>/images/libraries/apex PLAY Homework
- 92. TH Technology Resources • Sample Interactive Grids APEX 5.1 Sample Application, Editing section • Interactive Grids Under the Hood http://hardlikesoftware.com/weblog/2016/06/08/interactive-grid-under-the- hood/ • Interactive Grid Column Widths http://hardlikesoftware.com/weblog/2017/01/06/interactive-grid-column- widths/ • How to Hack Interactive Grids, Parts I thru IV http://hardlikesoftware.com/weblog/2017/01/18/how-to-hack-apex-interactive-grid- part-1/ • APEX: Updating Interactive Grid Cells https://ruepprich.wordpress.com/2017/03/09/apex-updating-interactive-grid-cells/
- 93. 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 • APEX Grid Preventing Lost Updates http://www.explorer.uk.com/apex-interactive-grid-preventing-lost- updates-record-locking/ • Editable Grid, PL/SQL Process https://apex.oracle.com/pls/apex/germancommunities/apexcommunity /tipp/6361/index-en.html •
- 94. Thank You Evaluations Please! Karen Cannell kcannell@thtechnology.com