3 Replies Latest reply on Apr 15, 2019 8:50 PM by fac586

    About JavaScript dynamic traversal

    Laury

      Hi,

       

      Can someone explain me what is "dynamic traversal" in JavaScript (for APEX)?

      How does it improves coding inside a piece of JavaScript using hard-coding the ID of the elemets of a page?

      Yet, having in minid that Form elements like fields have a name in APEX, and report column of fields have alsoa name that can be an alias ID.

      How then to identify and distinguish these elements (button, form field, report field,...) from an APEX HTML page?

       

      Thanks and Regards

        • 1. Re: About JavaScript dynamic traversal
          fac586

          Laury wrote:

           

          Can someone explain me what is "dynamic traversal" in JavaScript (for APEX)?

          It refers to the approach of accessing page elements using jQuery API methods that traverse (navigate) the DOM tree. In APEX terms this is usually performed as a means to get, set, and change the appearance of values in a report or tabular form, typically using the .closest() and .find() methods: Tabular Form, Dynamic action to disable and set text column

          How does it improves coding inside a piece of JavaScript using hard-coding the ID of the elemets of a page?

          It is a better approach because although the DOM elements are accessed dynamically at runtime, this is achieved using information that is fixed and known to (or explicitly set by) the developer at design time—column aliases, static IDs, and CSS classes. Conversely, the default name and id attributes that the APEX engine generates for tabular form controls and interactive report columns are not known to the developer during the design process. They can only be determined by a feedback loop of inspecting the DOM at runtime, then utilising the engine-generated values in the required code. The biggest drawback is that unlike static column aliases, IDs, and classes assigned by the developer, these automatically generated identifiers will change when columns are reordered in the region source query or report/form definition, when applications are moved to other environments, and as a result of undocumented changes to the APEX engine.

          Yet, having in minid that Form elements like fields have a name in APEX, and report column of fields have alsoa name that can be an alias ID.

          How then to identify and distinguish these elements (button, form field, report field,...) from an APEX HTML page?

          Buttons (and many other components and elements) can be assigned a known Static ID at design time. Page items are automatically assigned their item name as their HTML ID. Report and tabular form cells should be accessed using DOM traversal based on headers attributes that reference column aliases that are used as table header IDs (or Static IDs for interactive reports): td[headers="ENAME"]. Controls and elements within table cells can be referenced using a descendant selector comprised of this plus an element (td[headers="ENAME"] input), class (td[headers="ENAME"] .current-manager), or attribute selector (td[headers="ENAME"] [readonly]).

          • 2. Re: About JavaScript dynamic traversal
            Laury

            Thanks for the answer, but I do not understand how I can apply it.

            • 3. Re: About JavaScript dynamic traversal
              fac586

              Laury wrote:

               

              Thanks for the answer, but I do not understand how I can apply it.

              Why not? The linked forum thread contains a direct comparison between the specific target and dynamic traversal approaches. Many other solutions using this approach have also been posted. One of these is of particular interest because it demonstrates just how much more efficient and productive these techniques are than hardcoding IDs and row numbers.