Tips for standardizing your APEX Interactive Grid configuration and customization (when customization is needed), APEX Interactive Grids give us fewer declarative configuration options than Interactive Reports. One can customize via JavaScript APIs, but this could lead to many different grids. This session promotes localizing JS configuration code to a common shared JS file to achieve uniform grid configuration across an app or an enterprise.

1. TH Technology
APEX
Interactive
Grids:
Standardize
for Sanity
Grid Customization the
Easy Way
Karen Cannell
kcannell@thtechnology.com
TH Technology
@thtechnology

2. TH TechnologyTH 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, Oracle tools 25+ years
• ODTUG Director, Editor Emeritus, Technical Journal
• Oracle Ace Director
• APress Author
Voyage to VBCS

3. TH Technology

4. TH TechnologyTH Technology
My Goal
Standardize
Grid Configuration &
Customization
APEX Grid APIs 10/1/2019

5. TH TechnologyTH Technology
10/1/2019APEX Grid APIs

6. TH TechnologyTH Technology
10/1/2019APEX Grid APIs

7. TH TechnologyTH Technology
This Session Leaves
LOW CODE
Behind …
10/1/2019APEX Grid APIs

8. TH TechnologyTH Technology
10/1/2019APEX Grid APIs

9. TH TechnologyTH Technology
Standardize
10/1/2019APEX Grid APIs

10. TH TechnologyTH Technology
Why Standardize?
• Write Once, Reuse Where
Needed
• Uniform Grid Configuration
• Not Everyone Has to be a
JavaScript Expert
10/1/2019APEX Grid APIs

11. TH TechnologyTH Technology
How?
• Determine Your Grid
“Standards”
• All JS Into a JS Include File
• Always
• Optional By Class
• Add Classes to Grids As Needed
10/1/2019APEX Grid APIs

12. TH TechnologyTH Technology
Set Your Standards
• Pagination Page/Scroll
• Sequence Number?
• Sticky Footer or No?
• Toolbar Config – Edit
• Toolbar Config – Static
… Determine Your Own
10/1/2019APEX Grid APIs

13. TH TechnologyTH Technology
Filter Only
10/1/2019APEX Grid APIs

14. TH TechnologyTH Technology
Local Help Button
10/1/2019APEX Grid APIs

15. TH TechnologyTH Technology
Sequence Number
10/1/2019APEX Grid APIs

16. TH TechnologyTH Technology
• Do It Declaratively First
• Check Each Upgrade
10/1/2019APEX Grid APIs
LOW CODE

17. TH TechnologyTH Technology
Documented APIs
• APEX 18.1+
• Documented == Supported
https://apex.oracle.com/api
#39 JavaScript APIs
APEX Grid APIs 10/1/2019

18. TH TechnologyTH Technology
Default Grid Options
• Refer to API Doc
• Lots of Options Here
• rowHeader
• tooltip
• stickyFooter
• pagination options
• Incorporate Your Settings into Your
Standards File
10/1/2019APEX Grid APIs

19. 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 10/1/2019

20. TH Technology
APEX Grid APIs 10/1/2019

21. TH TechnologyTH Technology
Customization Examples
• Change Toolbar
• Change Column Heading Menu
• Change RowAction Menu
• Change Toolbar Actions Menu
• Standardize w “Global” Settings
APEX Grid APIs 83 10/1/2019

22. TH TechnologyTH Technology
Change Toolbar
APEX Grid APIs 10/1/2019

23. TH TechnologyTH Technology
Replaced Toolbar - Filter Only
10/1/2019APEX Grid APIs

24. TH TechnologyTH Technology
Change Column Heading Menu
APEX Grid APIs 10/1/2019

25. TH TechnologyTH Technology
No Column Heading Menu
10/1/2019APEX Grid APIs

26. TH TechnologyTH Technology
Standardize
10/1/2019APEX Grid APIs

27. TH TechnologyTH Technology
“Global” Settings == Standards
• JS Function in JS File
• Include JS File in App
• Reference JS Function in Grid
Attributes
• Advanced → JavaScript Code
• Add Classes on Grid CSS Classes
APEX Grid APIs 10/1/2019

28. TH TechnologyTH Technology
• << code example>>
• << Demo app w common
settings >>
APEX Grid APIs 10/1/2019

29. TH Technology
APEX Grid APIs 10/1/2019

30. TH TechnologyTH Technology
Include File in Application
APEX Grid APIs 10/1/2019

31. TH TechnologyTH Technology
Add Function to Grid Attributes
10/1/2019APEX Grid APIs

32. TH TechnologyTH Technology
Add Classes to Grid
10/1/2019APEX Grid APIs

33. TH TechnologyTH Technology
10/1/2019APEX Grid APIs

34. TH TechnologyTH Technology
10/1/2019APEX Grid APIs

35. TH TechnologyTH Technology
Best Practices for
Adding JS Files
10/1/2019APEX Grid APIs

36. TH TechnologyTH 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/applicationhere!-
express/18.2/aexjs/toc.html
APEX Grid APIs 10/1/2019

37. TH TechnologyTH Technology
10/1/2019APEX Grid APIs

38. TH TechnologyTH Technology
• Be Careful …
• Always TEST
10/1/2019APEX Grid APIs

39. TH TechnologyTH Technology
APEX 19.1 Grid Declarative Options
• Column Enable Users To
• Cannot Turn off Freeze
• Cascading LOV Columns, This is Hidden
10/1/2019APEX Grid APIs

40. TH TechnologyTH Technology
Change Column Heading Menu
APEX Grid APIs 10/1/2019

41. TH TechnologyTH Technology
To Really Turn Off Column Headers
• In Column Advanced JavaScript:
10/1/2019APEX Grid APIs

42. TH TechnologyTH Technology
10/1/2019APEX Grid APIs

43. TH TechnologyTH Technology
Do It Declaratively First
… but Be Careful w
Declarative in Combo w
Customizations
(Don’t Hang Yourself)
10/1/2019APEX Grid APIs

44. TH TechnologyTH Technology
APEX Grid APIs 10/1/2019

45. TH TechnologyTH 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
APEX Grid APIs
Homework
10/1/2019

46. TH TechnologyTH Technology
10/1/2019APEX Grid APIs

47. TH Technology
Comments?
Questions?
Thank You!
Email for Slides, Demo App
Karen Cannell
kcannell@thtechnology.com
@thtechnology

48. 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/
10/1/2019APEX Grid APIs

49. 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
10/1/2019APEX Grid APIs