Many of the widgets provide a JavaScript API to allow them to be used from other scripts. The following methods are considered the public interface of the widget and can be called by JavaScript code:
Many of the widgets provide a JavaScript API to allow them to be used from other scripts. The following methods are considered the public interface of the widget and can be called by JavaScript code:
You can also use the Actions, properties and events architecture to define simple interactions between widgets.
| JavaScript method | Description |
|---|---|
| getInstance(id) or $W(id) | Returns a widget registered under the specified id |
| setPollingEnabled(enabled) | Enables/disabled AJAX updates for all widgets |
| isPollingEnabled() | Checks if AJAX updates are enabled |
| observe(widget, notificationName, methodName) | Starts observing selected widget for a specified notification. A defined method will be invoked when the notification is sent. |
| stopObserving(widget, notificationName, methodName) | Stops observing selected widget for a specified notification |
| JavaScript method | Description |
|---|---|
| stop() | Stops widget transitions so no new slice of information will be displayed |
| start() | Resumes widget transitions |
| nextPage() | Moves forward displayed feed items obtained by the Feed Poller |
| previousPage() | Moves backwards displayed feed items obtained by the Feed Poller |
| setContent(htmlText) | Replaces whole carousel content with new from htmlText parameter. The content should be a string with a HTML fragment, including a sequence of li elements, each one representing content of the single carousel item. |
| forceUpdate() | Forces an AJAX update if the refresh action is used with Carousel widget |
| JavaScript method | Description |
|---|---|
| show() | Opens a calendar window |
| hide() | Closes a calendar window |
| getSelectedDate() | Returns selected date |
| Setting calendar display | |
| setStartRange(1,3,2005) | Defines a starting date |
| setEndRange(1,4,2008) | Defines an ending date |
| setStartDate(1,11,2006) | Sets initially focused date, with its month displayed. If method is not called, current date will be used. If a current date is out of the specified range, first date within the range will be used. |
| setDayNames('1','tuesday','3','4','5','sat','sunday') | Overrides the default day names returned to the referenced form field |
| setDayHeaders('1','tuesday','3','4','5','sat','sunday') | Overrides the default calendar day column headers with specified names |
| setMonthNames('Jan','February','March','IV','MAY', '6','7','8','9','10','11','12') | Defines month names |
| setDisabledDate(day,month,year) | Disables specified date. If the first field is set to 'null', the whole month will be disabled. If the first and second fields are set to 'null', the whole year will be disabled. |
| setDisabledWeekDays(6,7) | Disables week days. The example disables Saturdays and Sundays. |
| setDisabledStyle(style) | Sets style for disabled dates. The {color:gray} style is used by default. |
| setWeekStartDay(7) | Sets a first day of the week. The example sets Sunday. |
| Setting date format | |
| setDateFormat("DD/MM/YYYY") | Sets the format of the date returned to the referenced form field. Each D will be transformed into one day number, M into month number and Y into year number. The N letter will be transformed into string representation of month. An array of month names can be set using the setMonthNames() method. Other characters remain as separators. Format is ignored when dividing a date into the multiple fields. |
| Setting style for specific date | |
| setDateStyle(day-of-month,month,year,style-object) | Sets a style for a selected day |
| setDayOfWeekStyle(day-of-week,style) | Sets a style for a specified day of week across the whole calendar range |
| JavaScript method | Description |
|---|---|
| fold() | Folds a Folding Item widget using the effect configured by the author. If widget is already folded it has no effect. |
| unfold() | Unfolds a Folding Item widget with the effect configured by the appropriate style. If a widget is already unfolded it has no effect. |
| JavaScript method | Description |
|---|---|
| validate() | Causes validation on element |
| addSuccessCallback() | Callback function invoked when validation passes successfully |
| addFailureCallback() | Callback function invoked when validation fails |
| addFallbackCallback() | Callback function invoked when validation could not be performed due to some unexpected reason (no field, AJAX error) |
| JavaScript method | Description |
|---|---|
| launch() | Launches a forms wizard |
| show() | Displays a Wizard widget, if the widget is already displayed it has no effect |
| addCancelCallback(callback) | Sets a callback function to be called when wizard is canceled. Callback will be invoked with no parameters. |
| JavaScript method | Description |
|---|---|
| next() | Displays the next page of a gallery, unless gallery is displaying the last page. |
| previous() | Returns to the previous page, unless gallery is displaying the first page. |
| sendToSlideshow(n) | Sends the n'th item being displayed on the current gallery page to the associated Slideshow widget. |
| JavaScript method | Description |
|---|---|
| show() | Causes the popup to be displayed. If the popup is already displayed it has no effect. |
| dismiss(type) | Causes the popup to be hidden. If the popup is already hidden it has no effect. type is passed as an argument to methods registered as observers of the dismissed event. |
| hide() | Causes the popup to be hidden. If the popup is already hidden it has no effect. |
| JavaScript method | Description |
|---|---|
| show() | Shows previously invisible Progress Bar widget, using specified appear effect. It has no effect on already visible Progress Bar widget. |
| hide() | Hides previously visible Progress Bar widget, using the disappear effect specified by author. It has no effect on already hidden Progress Bar widget. |
| set(x) | Sets the current progress. If x is less or equal 0, the progress is set to 0. If x is more or equal 100, the progress is set to 100. If x is not a number, the progress is not changed. |
| get() | Returns the current progress |
| reset() | Equivalent to set(0) |
| finish() | Equivalent to set(100) |
| progress(d) | Increments the progress by d, equivalent to set(get() + d) |
| JavaScript method | Description |
|---|---|
| next() | Displays the next item from the defined set of items |
| previous() | Returns to the previous item |
| play() | Starts or resumes the slideshow |
| pause() | Pauses the slideshow |
| stop() | Stops the slideshow |
| gotoItem(n) | Goes to the n'th item. If n is out of range, it does nothing. |
| JavaScript method | Description |
|---|---|
| select(tabId) | Changes active tab to the tab specified by tabId |
| load(tabId) | Loads the content of a tab in the background, if a tab with id tabId uses deferred AJAX loading. Active tab is not changed. |
| reload(tabId) | If a tab with id tabId uses deferred AJAX loading, its content is (re)loaded in background. Active tab is not changed. |
| JavaScript method | Description |
|---|---|
| setContents(htmlText) | Replaces the contents of the Ticker Tape with the specified HTML text. Note that if mcs-marquee-effect style property is set to 'scroll', the contents will be replaced after the current one scrolls out of the page. |
| forceUpdate() | Forces an AJAX update if a Ticker Tape uses the refresh action. Otherwise it has no effect. |
Progress Bar widget controlled by the JavaScript.
<head>
<mcs:handler id="hProgress" type="text/javascript">
Widget.getInstance('myProgressBar').progress(15);
</mcs:handler>
<mcs:handler id="hReset" type="text/javascript">
Widget.getInstance('myProgressBar').reset();
</mcs:handler>
<event:listener observer="btnProgress" handler="#hProgress" event="click"/>
<event:listener observer="btnReset" handler="#hReset" event="click"/>
</head>
<body>
<widget:progress id="myProgressBar"/>
<span class="button" id="btnProgress">progress</span>
<span class="button" id="btnReset">reset</span>
</body>