APEX 5.1 Interactive Grid: What it Means for You and Your Users
1 like2,290 views
Going to the Grid: What moving to the APEX 5.1 Interactive Grid means for you and your end users. Learn Grid features, how to upgrade, how to perform basic customizations. Goodbye PL/SQL collections, JavaScript here we come!
Ad
More Related Content
What's hot (19)
Similar to APEX 5.1 Interactive Grid: What it Means for You and Your Users (20)
Ad
Recently uploaded (20)
Ad
APEX 5.1 Interactive Grid: What it Means for You and Your Users
- 1. Going to the Grid: What the APEX 5.1 Interactive Grid Means or You and Your Users Karen Cannell [email protected] TH Technology
- 2. TH Technology Note to Early Slide Downloaders: I edit my slides frequently up to the day of the presentation. Please check back for the latest slides and references.
- 3. TH Technology It was the best of times, it was the worst of times … Dickens in Tale of Two Cities
- 4. TH Technology It was the best of features, it was the worst of features … Anonymous APEX Developer re Tabular Forms
- 5. TH Technology About Me … • 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 • Editor Emeritus, ODTUG Technical Journal • Oracle Ace Associate • APress Author • ODTUG Director
- 6. TH Technology About You … • Oracle Technology ? • Years w APEX ? • APEX Versions ? • Interactive Reports and Tabular Forms ? • Customizations ? Biggest Gripes?
- 7. TH Technology Goals • Understand Interactive Grid (I-Grid) Features • How to Build, Upgrade to and Work With an Interactive Grid • Pros / Cons of Replacing Legacy IRs/Tab Forms w Interactive-Grid
- 8. TH Technology Agenda – Interactive Grid • Introducing Interactive Grid • How To Build • How To Upgrade • Validations • Advanced • JavaScript Customizations • Pros/Cons ~ Discussion ~ Questions
- 9. TH Technology Evolution: Interactive Reports • APEX 4.0 • The New Big Thing • APEX 4.1 • More Column Types • Improved Group By, Add PIVOT • APEX 5.0 • Reengineered – CSS and JS, Widgets • APEX 5.1 • Interactive Grid – JQuery Widgets Shift to Widgets All Widgets
- 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 NOTE: APEX 5.1.1 Patch John Snyders Interactive Grid API Improvements http://hardlikesoftware.com/weblog/2017/03/28/ap ex-interactive-grid-api-improvements-in-5-1-1/ • Toolbar • Model • IG Widget • IG Configuration
- 12. TH Technology Beware APEX 5.1.1 IGrid APIS are DIFFERENT from APEX 5.1.0 IGrid APIs … You Will Have To Upgrade < 5.1.1 IGrid Customizations
- 13. TH Technology In the Sandbox …
- 14. TH Technology Out of the Sandbox
- 15. TH Technology Interactive Grid == Better Sandbox
- 16. TH Technology Interactive Grid (Interactive Report or Tab Form) + <All the Features You Ever Wanted> (Thank You APEX Team!) ----------------------------------------- Interactive Grid
- 17. TH Technology Direction Interactive Report Tabular Form Interactive Grid Now Future
- 18. TH Technology IGrid Architecture Interactive Grid – Under the Hood J Snyders http://hardlikesoftware.com/weblog/201 6/06/08/interactive-grid-under-the-hood/
- 19. 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
- 20. Interactive Report • Collections (pre 5.0) • Browser Decides Column Width table-layout: auto; Interactive Grid • Model • Each Column is an Item • Fixed Table Layout
- 21. Interactive Grid: to Build How to Build
- 22. TH Technology Interactive Report – Still There
- 23. TH Technology Tabular Forms == Legacy
- 24. TH Technology Editing an Interactive Grid • Editing Enabled => Yes • Row Selector • Actions Menu Column • PK Hidden by Default • Edit, Save Buttons • I-Grid Auto Row Processing Process • Developer has to • Add Headings • Set Column Types, Static Ids • Set a PK Column (If one not Already Set) • Set Page “Reload on Submit” to “Only on Success”
- 25. TH Technology
- 26. TH Technology Edit: Column: Set One as a Primary Key
- 27. TH Technology
- 28. TH Technology Edit: Page Reload on Submit
- 29. TH Technology Interactive Grid • Add image here – looks pretty much the same
- 30. TH Technology Editable Interactive Grid
- 32. TH Technology Customized Toolbar Menu
- 33. TH Technology Editable Cells Floating Popups • Radio Group • Text Areas (one liner …) • Item Plugins • Anything that dos not fit in cell • CTRL-F6 collapse/expand popup
- 34. Editable Grid: to Build Row Height, Column Width, (No)Stretch, Master-Detail, Casc. LOV
- 35. TH Technology re Fixed Row Height • IF Change Height of a Row • Ex: Add Icon or Textarea • Need To Adjust on Both Sides … • Frozen and Unfrozen • cellTemplate property
- 36. TH Technology
- 37. TH Technology
- 38. TH Technology Column Widths • Appearance “Width” Property Does Not Set Column Width • Drag and Drop then Report Save • Columns • Resize • Reorder • Minimum Width • Min Width vs Current Width
- 40. TH Technology NoStretch – APEX 5.1.1 • JS to Set Per Column In Advanced JavaScript for the Column function(config) { config.defaultGridColumnOptions = { noStretch: true }; return config; }
- 41. TH Technology NoStretch – APEX 5.1.1 • JS to Set Per Grid (All Columns) In Advanced JavaScript for the Grid Declarable in APEX 5.2 ?
- 42. TH Technology Declarable in APEX 5.2 ?
- 43. TH Technology Master-Detail • Create Master Grid • Create Detail Grid • Set PKs for Both • Link via Master Region on Detail Grid • Disable Detail Grid Save Button
- 44. TH Technology Cascading LOV • Just Like Page Item to Page Item
- 45. 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)
- 47. TH Technology 32K Row Limit footer
- 48. TH Technology Dynamic Action • Just Like On a Page Item • Conditions/Action Reference Any Column In Row • Cannot Reference Element in Other Rows
- 49. TH Technology Validations • Just Like 4.2 Tab Form • :COLUMN_NAME References • Dynamic Actions • Column Option • APEX 5.1.1 Patch
- 51. TH Technology User Perspective: Interactive Grid Interactive Report – Pivot -- Drills + Edit Capability (if enabled) ----------------------------------------------------- Interactive Grids
- 52. TH Technology Edit Mode Navigation • Tab or Shift Tab – Next/Previous Cells (right/left within a row) • Enter or Shift-Enter – Up/Down Column So-so for Data Entry Users But > Nothing! Arrow Keys Do Not Work Here
- 53. TH Technology • All Edits Stored Locally til Save • Warning for Unsaved Changes • Pagination OK
- 54. Interactive Grid: to Build How to Upgrade an Existing IR or Tabular Form to Interactive Grid
- 55. TH Technology • Standard Will Upgrade • Non-Standard Will Not Upgrade • Any Custom Code • APEX_ITEM Calls Rebuild (Most Often) Takes Less Time
- 56. TH Technology Upgrade Interactive Reports? • Change Region Type • Standard, No Frills Users YES • Considerations • Pivot • Customized Logic • Drills To IRs HOW WHEN HOW WHEN
- 57. TH Technology Upgrade Tabular Forms? • Upgrade Utility • May Need Rework • Standard YES • Non-Standard • Maintain vs Rebuild • Rebuild is Relatively Quick HOW WHEN
- 58. Interactive Grid: to Build How to Customize Menus, Toolbars and More
- 59. TH Technology Customizations • JavaScript • Advanced JavaScript Code • Read Widget JS Files to Learn What is Possible • Hardlikesoftware.com No Longer PL/SQL Collections – Now JavaScript
- 60. TH Technology I-Grid Customizations • Much More Flexible • Beyond Declarative • Attributes JavaScript Code Region • Grid Grid Menus • Column Column Menu (Most of the Time…)
- 62. TH Technology So What (Else) Can I Do ? From the JavaScript console type: apex.region(“igrid_id").widget().interactiveGrid("option","config")
- 63. TH Technology …
- 64. TH Technology Customization Examples • Change Toolbar • Change Grid Menus • Access Data Model • Change Action Menu • “Global” Settings
- 65. TH Technology Change Toolbar Goes in Grid Advanced JavaScript
- 67. TH Technology Change Column Menu Goes in Column Advanced JavaScript
- 68. TH Technology Change Column Menu
- 69. TH Technology Change Grid Menu Goes in Page JavaScript
- 70. TH Technology Goes in Page JavaScript
- 71. TH Technology Change Grid Menu
- 72. TH Technology Access the Model …
- 73. TH Technology Change Action Menu Goes in Grid Advanced JavaScript
- 74. TH Technology Change Action Menu
- 75. TH Technology Access Grid, Model, Record…
- 76. TH Technology “Global” Settings • JS Function in JS File • Include File • Reference JS Function in Advanced JavaScript Code • Add Classes on Grids
- 77. TH Technology • << code example>> • << Demo app w common settings >>
- 79. TH Technology
- 82. TH Technology Upgrade or Not? • IR Considerations • Pivot • Customized Logic • Drills To IRs • Tabular Form Considerations • Customizations
- 83. TH Technology Best to Rebuild When … • Low/Reasonable Volume of IRs/Tabular Forms to Upgrade • All Features Have a Declarative Equivalent in Interactive Grid No Sense to Upgrade to Make Extensive Customizations
- 85. What Interactive Grid Means … Developers • Bigger Sandbox • THINK Before Build or Upgrade • Brush Up on JavaScript • jQuery Widgets • JavaScript Customizations End Users • Cleaner Interface • Improved Loading, Pagination • Tab/Enter Navigation • Inline Edits • More is Possible – Less Work
- 86. TH Technology
- 87. TH Technology There is Much More …. • Pagination Options • Client-Side Validation • Protected Rows • Icon View • Detail View • More Coming!
- 88. TH Technology Challenge • Sample Interactive Grid App • http://www.hardlikesoftware.com • Read the JS Widget Code <apex_install_dir>/images/libraries/apex • PLAY Homework
- 90. 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/
- 91. TH Technology Resources, cont’d • APEX Client-Side Validation http://hardlikesoftware.com/weblog/2017/05/10/apex-client-side- validation/#more-615 • 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/
- 92. TH Technology
- 94. TH Technology Advanced Client Validation • APEX 5.1.1 • Validate Comm • JS Using API • Validate Comm Limit Example • Row Level – no HTML5 • Fire on apexendrecordedit Event • apexendrecordedit Event • When Edit ends
- 95. TH Technology Advanced Client Validation • Validate Comm Limit • Row-level Validation (no HTML5) • Use JavaScript model API • Set Record Validity APEX 5.1.1
- 97. TH Technology Validate Comm APEX 5.1.1