APEX Office Hours Interactive Grid Deep Dive
- 2. 2 Interactive Grid Deep Dive APEX Office Hours
- 3. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | Safe Harbor Statement The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle. 3
- 4. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | 4 • John Snyders • At Oracle since 2008 (Weblogic) • Joined Oracle Application Express team in 2012 • Focus Area: – JavaScript • Projects: – Interactive Grid, Page Designer, JavaScript widgets, Survey Builder –Twitter: @J_Snyders –Blog: http://hardlikesoftware.com About me
- 5. 5 Agenda Interactive Grid out of the box Why the architecture matters A tour of what’s possible Q & A 1 2 3 4
- 6. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | Interactive Grid out of the box •Declarative •Powerful •No code needed
- 7. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | Demo 7
- 8. Copyright © 2017, Oracle and/or its affiliates. All rights reserved. | 8 Customization Range and types • Declarative Configuration (>100 attributes) • Report settings • Advanced JavaScript Configuration (>190 options) • Toolbar and menu customizations • React and control • Data model manipulation No Code Low Code Full Control
- 9. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | Resources for taking control of Interactive Grid • Sample Interactive Grids (in App Gallery) • IG Cookbook (from my blog) • APEX JavaScript API https://docs.oracle.com/database/apex-18.2/AEXJS/index.html • Interactive Grid Cheat Sheet (links to many more resources) https://github.com/mgoricki/orclapex-ig-cheat-sheet • Ask questions on the APEX Forums https://community.oracle.com/community/technology_network_community/database/developer- tools/application_express People: Marko @mgoricki, Matt @Matt_Mulvaney, Menno @mennooo
- 10. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | Interactive Grid Architecture Key Concepts •Modular: made up of many parts •Separate Model and View layers •Flyweight pattern •Actions •Data exchange between client and server
- 11. grid recordView tableModelView tableModelViewBase Grid Model ojChart interactiveGrid apex.model Grid view + Single Row View Group By view Chart viewIcon view Detail view iconList view interface Group By Model Icon Model Detail Model Chart Model toolbar menu apex.actions apex.item Column Item dialogs report settings area ajax requests to server ajax requests to server view model
- 12. Action Type: action | radio | toggle State: Label Title Icon Disabled Hidden Shortcut Behavior (one of): href action function set/get functions + Menu Item action: “view-chart” Select List data-action="change-report" class="js-actionSelect" Button data-action="add-row" class="js-actionButton" Radio Group Buttons data-action="change-view" class="js-actionRadioGroup" Keyboard Shortcut shortcut: “ALT+F5” Toggle Button Checkbox data-action="edit-mode" class="js-actionCheckbox"
- 13. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | Data Exchange In the beginning Server rendered html with data in form elements Browser POST form as application/x-www-form-urlencoded Server process form data and redirect after post Ajax Browser can send data to and receive data from server at any time APEX supports it but there are limitations APEX 5.1
- 14. Copyright © 2017, Oracle and/or its affiliates. All rights reserved. | What is an Interactive Grid? 14 Flexible, declarative APEX region that turns a SQL query into a modern data grid that is optionally editable and end user customizable.
- 15. Copyright © 2017, Oracle and/or its affiliates. All rights reserved. | What is an Interactive Grid? Alternative View 15 Declarative way to get a SQL result set to the browser, present and manipulate it in arbitrary ways*, and save it back to the server for declarative processing. *not declarative Interactive Grid Model Rendering Processing Interactive Grid – Automatic Row Processing (DML) Validation APEX Server Ajax Fetch Ajax Save Data Ajax Fetch Data Browser some view
- 16. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | What use is this? Simple declarative fetching, validating, and saving of data Need to hide and detach the IG UI from the model Fancy UI needs custom code no mater what Enabler of progressive web apps What’s missing -or- future possibilities Generalize so not tied to interactive grid – A model region type? More powerful templates – extend apex.util.applyTemplate? General 2 way binding to the APEX model.
- 17. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | Tour 17
- 18. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | Q&A 18
- 19. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | Questions • Hi APEX Team, how to sort data at Detail View of Interactive grid? Regards, Saeed. A: known bug :( • Do you plan to support Rich Text in IG? If so when? For us this is a showstopper for using IG with of our some reports. A: it is on the list but no current plan. Showed workaround • Jeffrey Kemp: For customizing Interactive Grids currently, if a feature is not exposed in the APEX attributes the option is given to write Advanced JavaScript to set the options programmatically. Is this the intended end game or could there be plans to build a simpler, declarative attribute system in APEX - one that can handle the large number of attributes that are available now and that may be added later, but without requiring memorizing the JavaScript incantations? • ?
- 20. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | Appendix: Some slides about Actions from APEX World 2018 Conference
- 21. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | APEX actions •Action: object that encapsulates Behavior + State •Behavior –Any user invoked UI behavior. Examples: • show or hide something • fetch more data from serer •State –Label, Title, Icon, Shortcut Key, Hidden, Disabled •Associated with a UI element such as a menu item or button
- 22. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | apex.actions vs. Dynamic Actions •They are different things •Confusing terminology •DA: general event binding + list of DA actions •DA: an APEX entity, somewhat declarative •Future? Tighter integration of apex.actions into APEX and DAs.
- 23. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | apex.actions types and bindings • Binding actions to UI elements is declarative • Normal or action actions – Have a href or action function, Bind to buttons or menu items • Toggle – Have set and get functions, Bind to buttons, checkbox, or checkbox menu items • Radio – Have set and get functions and choices, Bind to radio group, select list, or radio group menu items
- 24. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | apex.actions Contexts •Global for the whole page or Scoped to a DOM element. •In 5.0 there was just the global context •Contexts added in 5.1 to support Interactive Grid
- 25. Copyright © 2018, Oracle and/or its affiliates. All rights reserved. | apex.actions Keyboard Shortcuts •This is how keyboard shortcuts are done in APEX •Declarative – you don’t write a keydown handler •Shortcut automatically shown in menus and title labels •New in 18.1: Key sequences (like in gmail) •Future? User customizable key bindings •Fussy about key names good: Alt+Z bad: ALT-z •Names apply to US keyboard layout