Download as PDF, PPTX
Module 2: Adding JavaScript to APEX Apps
- 1. Module 2: AddingJavaScript to APEX Apps Introduction to JavaScript for APEX Developers
- 2. Copyright © 2020,Oracle and/or its affiliates2 4 3 2 1 Static files Page and component level attributes Dynamic Actions with JavaScript hooks Dynamic Actions Adding JavaScript to APEX Apps
- 3. Copyright © 2020,Oracle and/or its affiliates3 4 3 2 1 Static files Page and component level attributes Dynamic Actions with JavaScript hooks Dynamic Actions Adding JavaScript to APEX Apps
- 4. Copyright © 2020,Oracle and/or its affiliates4 • A declarative way to add dynamic behaviors to a page - Configure attributes to specify what happens and when - APEX generates the JavaScript and adds it to the page • Two parts - Dynamic Action: the event and related component - Actions: the response, such as ‘hide’ or ‘show’ What are Dynamic Actions?
- 5. Copyright © 2020,Oracle and/or its affiliates5 Thinking through Dynamic Actions Action Event
- 6. Copyright © 2020,Oracle and/or its affiliates6 Thinking through Dynamic Actions Action Event Action Action
- 7. Copyright © 2020,Oracle and/or its affiliates7 Thinking through Dynamic Actions Actions Dynamic Action Action Event Action Action
- 8. Copyright © 2020,Oracle and/or its affiliates8 Thinking through Dynamic Actions Actions Dynamic Action ActionAction ConditionEvent False True
- 9. Copyright © 2020,Oracle and/or its affiliates9 Thinking through Dynamic Actions Actions Dynamic Action ActionAction ConditionEvent False True Action Action Action Action
- 10. Copyright © 2020,Oracle and/or its affiliates10 Thinking through Dynamic Actions Actions Dynamic Action ActionAction ConditionEvent False True Action Action Action Action Many actions can be configured to fire at page load too.
- 11. Copyright © 2020,Oracle and/or its affiliates11 • Disable Alternate Number field until the Phone Number is populated Example 1
- 12. Copyright © 2020,Oracle and/or its affiliates12 • Disable Alternate Number field until the Phone Number is populated Example 1 • What’s the driver? • Is there a condition? • What are the true/false actions? • Relevant at page load too?
- 13. Copyright © 2020,Oracle and/or its affiliates13 • Disable Alternate Number field until the Phone Number is populated Example 1 Actions Dynamic Action Disable Alt. PhoneEnable Alt. Phone Value is nullPhone Num. changes False True + PL + PL
- 14. Copyright © 2020,Oracle and/or its affiliates14 • Hide List Price and Product Image if Product Available is No Example 2
- 15. Copyright © 2020,Oracle and/or its affiliates15 • Hide List Price and Product Image if Product Available is No Example 2 • What’s the driver? • Is there a condition? • What are the true/false actions? • Relevant at page load too?
- 16. Copyright © 2020,Oracle and/or its affiliates16 • Hide List Price and Product Image if Product Available is No Example 2 Actions Dynamic Action Hide Price & ImageShow Price & Image Value = 'N'Product Avail. changes False True Show Image region Hide Image Region + PL + PL + PL + PL
- 17. Copyright © 2020,Oracle and/or its affiliates17 4 3 2 1 Static files Page and component level attributes Dynamic Actions with JavaScript hooks Dynamic Actions Adding JavaScript to APEX Apps
- 18. Copyright © 2020,Oracle and/or its affiliates18 • Dynamic Actions can’t cover everything - Hooks are provided to extend capabilities - Requires basic knowledge of JavaScript to use • Probably the sweet spot for most APEX developers Dynamic Actions with JavaScript hooks
- 19. Copyright © 2020,Oracle and/or its affiliates19 • Custom Event option accepts any event name • jQuery Selector provides a flexible means of selecting elements Dynamic Action: Event and Selection Type Action Event
- 20. Copyright © 2020,Oracle and/or its affiliates20 • Declarative conditions only work with one item’s value • The JavaScript Expression option provides full access to the DOM - Must resolve to true or false - See the “help” for additional options Dynamic Action: Client-side Condition Action Event
- 21. Copyright © 2020,Oracle and/or its affiliates21 • Declarative options are great for common interactions - Hide/show, enable/disable, refresh, etc. • Execute JavaScript can do anything not available out of the box Action: Execute JavaScript Action Event
- 22. Copyright © 2020,Oracle and/or its affiliates22 4 3 2 1 Static files Page and component level attributes Dynamic Actions with JavaScript hooks Dynamic Actions Adding JavaScript to APEX Apps
- 23. Copyright © 2020,Oracle and/or its affiliates23 • Dynamic Actions may not work for every situation - The dynamic action/actions structure can be a little rigid - Handwritten JavaScript code may be a better solution • Page level attributes for JavaScript are the next step - Provide a consistent place to put JavaScript code Page level attributes
- 24. Copyright © 2020,Oracle and/or its affiliates24 • Function and Global Variable Declaration - Code here is in the global scope - Before DOM load and component initialization • Execute when Page Loads - Code here is in a function scope - After DOM load and component initialization Using page level attributes
- 25. Copyright © 2020,Oracle and/or its affiliates25 • Various components have a “JavaScript Initialization Code” attribute - Allows customization beyond declarative attributes Component level attributes Regions Interactive Grid (region and column level) Chart Calendar Tree Items HTML Editor Markdown Editor (19.2+) Popup LOV (19.2+)
- 26. Copyright © 2020,Oracle and/or its affiliates26 • Capabilities will vary by component - See help for examples - See doc for a list of attributes Using component level attributes https://apex.oracle.com/jsapi
- 27. Copyright © 2020,Oracle and/or its affiliates27 4 3 2 1 Static files Page and component level attributes Dynamic Actions with JavaScript hooks Dynamic Actions Adding JavaScript to APEX Apps
- 28. Copyright © 2020,Oracle and/or its affiliates28 • Static files have several advantages over page level attributes - Faster page loads via browser caching and optional minification - Better organization; easier to reuse code between pages • Static files can be placed in various locations - Most performant: File server (Apache, Nginx, etc.) - Most convenient: Static App/Workspace Files (Shared Components) Static files overview
- 29. Copyright © 2020,Oracle and/or its affiliates29 Using Static Application Files on a page • Simply upload the file and use the reference provided
- 30. Copyright © 2020,Oracle and/or its affiliates30 • Heavily reused code can be made available on all pages Using static files throughout an app
- 31. Copyright © 2020,Oracle and/or its affiliates31 See the JS doc for additional info on adding JavaScript to APEX https://apex.oracle.com/jsapi