Example 3 — DC Objects

This example uses a core 4X method to convert an element into a DC (Dynamic Component) object.

This will give the element access to all of the properties and methods documented in the folder "Help/DC API/DC Object Properties and Methods", which can be used to add advanced functionality.

DC objects can be used for any purpose; be remapped to provide parent/child/sibling relationships that are separate from the DOM order hierarchy, and remain persistent even when they don't exist in the DOM.

Example 3 — Coding Sandbox

Convert a standard element into a DC object and add dynamic functionality.

// Convert the div with class "blackboard" into a DC object, add configuration options, render the hidden element, then fire an alert to announce the new message to screen reader users.

// Help/$A API/DC Objects/ToDC
                                                                    var DC = $A.toDC(".blackboard", {

// Add events
                                                                      // Help/DC API/DC Object Configuration/Events
                                                                      mouseLeave: function(event, DC) {
                                                                        // Remove the DC object.
                                                                        // Help/DC API/DC Object Properties and Methods/Core Methods/Remove
                                                                        DC.remove();
                                                                      },
                                                                      // delayTimeout: 4000,
                                                                      timeout: function(DC) {
                                                                        DC.remove();
                                                                      },

// Add animation effects
                                                                                                                                            // Help/DC API/DC Object Configuration/Visual Effects
                                    animate: {
                                      onRender: function(dc, wrapper, next) {
                                        // Help/VelocityUI-Effects-Index
                                        Velocity(wrapper, "transition.slideDownIn", {
                                          complete: function() {
                                            // Running next() is required to continue executing built-in lifecycle methods such as afterRender() when the animation completes.
                                            next();
                                          }
                                        });
                                      },
                                      onRemove: function(dc, wrapper, next) {
                                        Velocity(wrapper, "transition.slideDownOut", {
                                          complete: function() {
                                            // Running next() is required to continue executing built-in lifecycle methods such as afterRender() when the animation completes.
                                            next();
                                          }
                                        });
                                      }
                                    }

})

// Render the DC object.
                                                                    // Help/DC API/DC Object Properties and Methods/Core Methods/Render
                                                                    .render()

// Fire an alert for screen reader users to announce the content of the DC object.
                                                                    // Help/DC API/DC Object Properties and Methods/ARIA Methods/Alert
                                                                    .alert();