Example 4 — Date Picker (Using Modules)

4X also includes the ability to load modules to extend its core functionality. No special format or syntax is needed to do this; any valid JavaScript can be loaded as a module. However, one of the benefits of using modules is that shared modules need only be loaded once, no matter how many other modules depend on that shared module to function properly.

The standard script tag can be used to load modules into 4X. This does, however, require that shared modules be loaded in the correct order.

All available modules that can be loaded using the standard script tag are located in the folder: "4X/Standard".

Whenever a module requires another shared module to be loaded in advance, these dependencies are documented at the top of the relevant module file for easy referencing.

Example 4 — Coding Sandbox

Using standard modules to import the Datepicker module into 4X.

// Create a datepicker that includes animation effects.
                                  // Help/VelocityUI-Effects-Index
                                  // Help/Module Imports/Widgets/Datepicker
                                  
                                  var datepicker = $A.setDatepicker({
                                  
                                    // Unique ID for the date picker instance
                                    // After instantiation, can be referenced using: var DC = $A("UniqueCalendarId");
                                    id: "UniqueCalendarId",
                                  
                                    // Icon triggering element
                                    toggle: $A.get("dateIcon2"),
                                  
                                    // Native or simulated input element
                                    input: $A.get("dateId2"),
                                  
                                    style: { position: "absolute", zIndex: 1, display: "none" },
                                    animate: {
                                      onRender: function(dc, wrapper, next) {
                                        $A.Velocity(wrapper, "transition.fadeIn", {
                                          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) {
                                        $A.Velocity(wrapper, "transition.fadeOut", {
                                          complete: function() {
                                            // Running next() is required to continue executing built-in lifecycle methods such as afterRender() when the animation completes.
                                            next();
                                          }
                                        });
                                      }
                                    }
                                  
                                  });
                                  
                                  datepicker.render(); // Manually open the datepicker.