Document Properties
Kbid27P706
Last Modified24-Jun-2020
Added to KB20-Jul-2016
Public AccessEveryone
StatusOnline
Doc TypeReferences
Product
  • ICM 7.6
  • ICM 7.7
  • ICM 7.8
  • ICM 7.9
  • ICM 7.10

Reference - JavaScript Controls

1 Introduction

Javascript controls can be included via

  • ISML - ui_web_library - Javascript Controls and directly via
  • Javascript - JavaScript Package - Controls

The ISML modules guarantees the functionality, also if the Javascript widget is no longer available (or supported).

2 ui_web_library

2.1 General Usage

Most controls are divided into two parts: the JavaScript part and the DOM part. The JavaScript part should be placed at the HTML-head tag. To solve this, especially for components and includes a webadapter placeholder is used.

If you have included the ISML-Templates webcontrols/Placeholder and webcontrols/Modules in the header of the web page, you can call the controls of the ISML Javascript library in the following way:

...
<html>
    ...
    <head>
        ...
        <isinclude template="webcontrols/Placeholder">
        ...
    </head>
    <body>
        ...
        <isinclude template="webcontrols/Modules">
        ...
        <isCONTROLNAME id="controlSelector" ...attributes... />
        ...
    </body>
</html>
...

2.2 ISAssignmentList

For the AssignmentList we use a JQuery modul "MultiSelect", further documentation and demos are available on the vendors page.

2.2.1 Attributes

animated

When animated is specified, the AssignmentList UI will use transition effects between interactions.

dividerlocation

Specify the portion of the selected (left side) area of the AssignmentList.

droppable

Enable or disable basic drag and drop functionality between the selected list (left) and the available list (right).

hide

Specify the hide animation function to use.

id

The ID of the AssignmentList Div element.

params

a map with parameters which can be used inside the UI Template

remoteurl

Define the input search delay before a request is sent to the server.

scripttemplate

the additional JavaScript code for the control

searchable

Specify the show animation function to use.

searchdelay

Enable or disable item sortable functionality through drag and drop for the selected list (left) and/or the available list (right).

show

Specify some extra remote parameters to send with every remote search requests.

sortable

If the AssignmentList is searchable, then setting this option will allow fetching new data from a remote script.

defaultName

name of the radio-fields (e.g. if 2 assignmentlists are used in the same form)

itemLabel

singular form of the itemname (e.g. "item")

availableLabel

label of the available-list

selectedLabel

label of the selected-list

uitemplate

the HTML elements for the UI

2.2.2 Example scripttemplate

webcontrols/AssignmentListDemoScriptTemplate.isml
$("<isprint value="#selector#">").assignment("select", "Option 2");

2.2.3 Example uitemplate

webcontrols/AssignmentListDemoUITemplate.isml
<select id="<isprint value="#id#">" name="example" multiple="multiple">
    <option value="1" selected="selected">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3" selected="selected">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5" selected="selected">Option 5</option>
    <option value="6">Option 6</option>
</select>

2.2.4 Example full HTML

<html>
    <head>
        <isinclude template="webcontrols/Placeholder">
    </head>
    <body>
        <isinclude template="webcontrols/Modules">
        <isAssignmentList id="AssignmentListDemo" uitemplate="webcontrols/AssignmentListDemoUITemplate.isml" scripttemplate="webcontrols/AssignmentListDemoScriptTemplate.isml">
    </body>
</html>

2.3 ISDropDown

For the DropDown we use a JQuery modul "MultiSelect". Further documentation and demos are available at the vendors page.

2.3.1 Attributes

autoopen

A boolean value denoting whether or not to automatically open the menu when the widget is initialized.

checkalltext

The text of the "check all" link.

classes

Additional class(es) to apply to BOTH the button and menu for further customization.

height

Height of the checkbox container (scroll area) in pixels.

hide

The name of the effect to use when the menu closes.

id

The ID of the DropDown Div element.

filter

Add a filter function to the DropDown box. Possible values are:

  • none - no filter.
  • search - filters the list via a search field.
  • toggle - show or hide a set of options via a checkbox.

filterautoreset

Reset user changes on the "search" and "toggle" filter.

filterlabel

Display name of the search function for "search" and "toggle" filter.

filterplaceholder

The text inside the search box of the "search" filter.

filteroncreate

The DropDown box starts with an enabled "toggle" filter.

minwidth

Minimum width of the entire widget in pixels.

multiple

If set to false, the widget will use radio buttons instead of checkboxes, forcing users to select only one option.

noneselectedtext

The default text the select box when no options have been selected.

params

A map with parameters which can be used inside the UI Template

positionx

Specifies where the dialog should be displayed. Possible values are 'center', 'left', 'right' or an x coordinate. The default value is "center".

positiony

Specifies where the dialog should be displayed. Possible values are 'center', 'top', 'bottom'. or an y coordinate. The default value is "center".

scripttemplate

The additional JavaScript code for the control e.g.:

selectedlist

A number greater than 0 denotes the maximum number of list items to display before switching over to the selectedText parameter.

selectedtext

The text to display in the select box when options are selected (if selectedList is false).

show

The name of the effect to use when the menu opens.

uitemplate

The HTML elements for the UI e.g.:

uncheckalltext

The text of the "uncheck all" link.

2.3.2 Example scripttemplate

webcontrols/DropDownDemoScriptTemplate.isml
$("<isprint value="#selector#">").dropdown("option", "position",
    {
        my: 'left bottom',
        at: 'left top'
    }
);

2.3.3 Example uitemplate

webcontrols/DropDownDemoUITemplate.isml
<select id="<isprint value="#id#">" name="example" multiple="multiple">
    <option class="red" value="1">Option 1</option>
    <option class="blue" value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
</select>

2.3.4 Example complete HTML page

If you have included the ISML templates "webcontrols/Placeholder" and "webcontrols/Modules" in the header of the web page, you can call the DropDown in the following way:

<html>
    <head>
        <isinclude template="webcontrols/Placeholder">
    </head>
    <body>
        <isinclude template="webcontrols/Modules">
        <isDropDown id="DropDownDemo" uitemplate="webcontrols/DropDownDemoUITemplate.isml" scripttemplate="webcontrols/DropDownDemoScriptTemplate.isml">
    </body>
</html>

2.4 ISGrid

2.4.1 Attributes

params

Map

Define isml variables needed in the data- / column- or script template here (see extra section). You can use ISCreateMap to create this parameter.

id

String

Is the HTML id of the generated element.

currentapplication

ApplicationBO

The current application is needed to resolve configuration parameters

pageablename

String

The Name of the shown PageableIterator

pageable

PageableIterator

Reference to the shown PageableIterator

(optional) pagesizeprefix

String

Used to tell the server the requested pagesize (default: "PageSize_")

(optional) pagenumberprefix

String

Used to tell the server the requested pagenumber (default: "PageNumber_")

configuration

String (a-zA-Z camelCase)

The configuration-name of this specific grid instance. If no configuration-name is given, it will fall back to the default settings defined in ui_web_library/staticfiles/cartridge/config/isgrid.properties

(optional) loadoninit

Boolean

Should the grid render its data on the initial load (default: true)

(optional) rowcsstemplate

Isinclude path

Contains function to be called for each row to add additional css.

columnstemplate

Isinclude path

Contains an array with column configuration objects for the grid.

datatemplate

Isinclude path

Contains a JavaScript function to get the items for a given page and offset. This method is called for each data request (loading, sorting, pagination) and has to triggers the callback method with the received data. If you don't define this function the grid won't display any data. See the passed parameters in the JSDoc linked at JavaScript Controls - jquery.fn.grid under jquery.fn.grid.defaults.getData().

(optional) scripttemplate

Isinclude path

Additional JavaScript that manipulates this ISGrid instance

2.4.2 Configuration

ui_web_library/staticfiles/cartridge/config/isgrid.properties
# available options for "rows per page"
intershop.template.isgrid.default.rowsperpage=15 50
# default "rows per page" on load
intershop.template.isgrid.default.rowsperpage.default=25
# if there are less or an equal number of total rows, a "show all" option is available
intershop.template.isgrid.default.showalllimit=200
# if there are less or an equal number of total rows, the user can jump to the first and last page
intershop.template.isgrid.default.firstlastlimit=3000

# available since IS 7.6.0
# footer should be displayed by default
intershop.template.isgrid.default.showfooter=true
<cartridge>/staticfiles/cartridge/config/isgrid.properties
# THIS SHOULD BE PLACED IN A MORE APP-SPECIFIC PROPERTY FILE
# configuration for a specific isgrid
# naming scheme for "UNIQUENAME": a-zA-Z camelCase
intershop.template.isgrid.UNIQUENAME.rowsperpage=100 250 500
intershop.template.isgrid.UNIQUENAME.rowsperpage.default=50

If the configuration-parameter of the isgrid can't be resolved to existing intershop.template.isgrid.CONFIGURATION_VALUE. values, intershop.template.isgrid.default is used.

2.4.3 Example ISML Tag

impex/ProductExportSelectProducts.isml
<ISCreateMap mapname="params"
    key0="Application" value0="#CurrentApplication#"
    key1="Products" value1="#Products#"
    key2="Clipboard" value2="#Clipboard#"
    key3="LookupHelper" value3="#LookupHelper#">
<ISGrid id="SelectedProducts"
    configuration="MasterCatalogProductExport"
    currentapplication="#CurrentApplication#"
    pageablename="Products"
    pageable="#Products#"
    columnstemplate="impex/ProductExportSelectProductsColumns.isml"
    datatemplate="impex/ProductExportSelectProductsData.isml"
    params="#params#">

2.4.4 Data Template

Usage of "select" column

If you want to use the "select" column, make sure that you provide a "selected"-attribute in your delivered data, representing the selection-state of the entry.

impex/ProductExportSelectProductsData.isml
<!---isnoloc--->
<iscontent type="text/javascript" charset="UTF-8" compact="true">
function getData(args) {
	var data = [];
<isloop iterator="params:Products" alias="Product">
	data.push({
		selected: <isif condition="#Product:UUID EQ params:Clipboard:ObjectUUID(Product:UUID)#">true<iselse>false</isif>,
		uuid: "<isprint value="#Product:UUID#">",
		name: "<isprint value="#Product:Name#">",
		sku: "<isprint value="#params:LookupHelper:get(Product:UUID):ProductIdentifierMap(Product:Domain):SellerID:Value#">",
		supplier: "<isprint value="#params:LookupHelper:get(Product:UUID):ProductIdentifierMap:SupplierID:Owner#">",
		value: "<isProductPrice Product="#Product#">",
		typeCode: "<isinclude template="inc/ProductTypeCode">",
		isOnline: <isif condition="#Product:isOnline#">true<iselse>false</isif>,
		isAvailable: <isif condition="#Product:isAvailable#">true<iselse>false</isif>,
		isCategorized: <isif condition="#Product:DefaultCatalogCategory NE NULL#">true<iselse>false</isif>,
		isOffered: <isif condition="#Product:getOffersCount>0#">true<iselse>false</isif>,
		isShared: <isif condition="#Product:hasDerivedProducts#">true<iselse>false</isif>
	});

</isloop>
    args.callback({
        offset: <isprint value="#pageable:PageStart - 1#" formatter="0">,
        total: <isprint value="#pageable:ElementCount#" formatter="0">,
        items: data
    });
}
<!---/isnoloc--->

2.4.5 Columns Template

All column types are managed by the grid plugin, so all columns share a common set of attributes.

2.4.6 Common Attributes

Attribute

Type

Default

Description

id

String

 

Name of the column for storing the column order (planned for later releases).

dataKey

String

 

The name of the property of the data object that contains the data for this column. For each cell this property of the row items is accessed. (See jQuery.fn.grid.getData() )

title

String

 

String or Function returning the title HTML.

sortable

Boolean

false

Column is sortable if true.

init

Function

Empty Function

The function to be executed each time before the grid is rendered. The grid is rendered when paged, sorted or when pageSize is changed.

render

Function

Default Function

This function returns the HTML displayed in each table row

minWidth

Integer

-1

Min width of column.

maxWidth

Integer

100

Max width of column.

cssClass

String or Function

 

String or Function returning the CSS class that will be applied to each row of that column.

2.4.7 Standard Column Types

These column types only support the common attributes.

2.4.7.1 Text

Displays data unmodified.

2.4.7.2 Integer

Converts values into integer before displaying.

2.4.7.3 Float

Converts values into float before displaying.

2.4.7.4 Money

Displays data unmodified. Data has to be converted into right format by server.

2.4.7.5 Progress

Displays a progress bar. Progress based on float values from 0 ... 100.

2.4.7.6 Percentage

Appends a % to the passed float.

2.4.7.7 Image

Displays an image, original data is source path.

2.4.7.8 Status

Displays an image based on a boolean value.

2.4.8 Column Types with Additional Attributes

2.4.8.1 Action

Attribute

Type

Default

Description

items

Array

 

Array containing the Menu Item Configuration (see jQuery.fn.popupmenu).

timeOut

Integer

300

Time in ms the menu should be visible after mouse was moved away (see jQuery.fn.popupmenu).

menuThreshold

Integer

3

By default, items are displayed as buttons, but if there are more items than this threshold, these items are displayed within a menu.
E.g. threshold is 2 and you have 2 items, no action button with menu will be displayed. If threshold is 2 and you have 3 items, one item, one action button is displayed and the menu contains the 2 remaining items

submitOnClick

Boolean

 

Defines if the form should be submitted when a button or menu item is clicked.
         * Unifies the submit behavior: When not set, buttons submit the form, but menu items do not.
Defines if the form should be submitted when a button or menu item is clicked. Unifies the submit behavior: When not set, buttons submit the form, but menu items do not.

Attribute

Type

Default

Description

url

String

 

HTTP Link with placeholders.E.g.

http://intershop/{category}/{product} 

The placeholders must match the property keys of the items returned by getData.

params

Array

 

Name of the columns containing the values to insert into placeholders.

2.4.8.3 Select

The select column occupies 2 attributes of the row object defined in the datatemplate:

Attribute

Type

Description

selected

Boolean

Whether the current row is selected

disabled

Boolean

Whether the checkbox of the current row is disabled

Column configuration attributes:

Attribute

Type

Default

Description

single

Boolean

false

If true, only one item can be selected.

selectedItemsName

String

selected

Name for checkboxes for tracking selected elements.

availableItemsName

String

available

Name for hidden input fields to track all displayed elements.

selectAllFn

Function

 

Related to "really select all" (All records are selected, not only records on the current page).
If this method is defined, a dropdown button with a menu is added to the select all checkbox. That menu contains an option select all records. The selectAll method is called when this option is clicked.

text.titleSingleSelection

String

 

The title of the column if single selection is enabled.

text.selectAllMenuAll

String

Select all ({total})

Text for Select all shown in the dropdown menu if selectAll is enabled.

text.selectAllMenuNone

String

Select none

Text for Select none shown in the dropdown menu if selectAll is enabled.

selectedItemsName

String

selected

The name of the checkbox elements.

availableItemsName

String

available

The name of the hidden input fields used to track all displayed items.

2.4.9 Simple Columns Template

The following columns template will display all defined columns.

impex/ProductExportSelectProductsColumns.isml
<!---isnoloc--->
<iscontent type="text/javascript" charset="UTF-8" compact="true">
[
    {
    	id: 'uuid',
        type: 'select',
        dataKey: 'uuid',
        selectedItemsName: 'SelectedObjectUUID',
        availableItemsName: 'ObjectUUID'
    },
	{
		id: 'link',
		type: 'link',
		dataKey: 'name',
		title: '<!---isloc--->Name<!---/isloc--->',
		url: '<isprint value="#URL(Action('ViewProduct-Edit')).'?ProductUUID={uuid}'#">',
		params: ['uuid'],
		sortable: true		
	},
	{
    	id: 'name',
        type: 'text',
        dataKey: 'name',
        title: '<!---isloc--->Name<!---/isloc--->',
       	sortable: false
    },
    {
    	id: 'sku',
        type: 'text',
        dataKey: 'sku',
        title: '<!---isloc--->ID<!---/isloc--->',
       	width: 180,
       	maxWidth: 180,
       	sortable: false
    },
    {
    	id: 'supplier',
        type: 'text',
        dataKey: 'supplier',
        title: '<!---isloc--->Supplier<!---/isloc--->',
       	sortable: false,
       	width: 180,
       	maxWidth: 180,
       	sortable: false
    },
    {
    	id: 'listPrice',
    	type: 'money',
    	dataKey: 'value',
    	title: '<!---isloc--->List Price (US Dollar)<!---/isloc--->',
       	width: 170,
       	maxWidth: 170,
       	sortable: false
    },
    {
    	id: 'typeCode',
    	type: 'text',
    	dataKey: 'typeCode',
    	title: '<!---isloc--->Type<!---/isloc--->',
       	sortable: false,
       	width: 200,
       	maxWidth: 200
    },
    {
    	id: 'status',
    	type: 'status',
    	dataKey: '',
    	title: '<!---isloc--->Status<!---/isloc--->',
       	sortable: false,
   		width: 170,
   		maxWidth: 170,
   		render: function render(args) {
   			var result = [], row = args.row;

			if (row.isOnline) {
				result.push('<img src="#WebRoot()#/images/status_online.gif" alt="<!---isloc--->Online<!---/isloc--->" title="<!---isloc--->Online<!---/isloc--->" border="0" />&nbsp;');
   			}
   			if (row.isAvailable) {
   				result.push('<img src="#WebRoot()#/images/status_instock.gif" alt="<!---isloc--->In Stock<!---/isloc--->" title="<!---isloc--->In Stock<!---/isloc--->" border="0" />&nbsp;');
   			}
   			if (row.isCategorized) {
   				result.push('<img src="#WebRoot()#/images/status_explicitly_bound.gif" alt="<!---isloc--->Categorized<!---/isloc--->" title="<!---isloc--->Categorized<!---/isloc--->" border="0"/>&nbsp;');
   			}
   			if (row.isOffered) {
   				result.push('<img src="#WebRoot()#/images/status_offers.gif" alt="<!---isloc--->Offered<!---/isloc--->" title="<!---isloc--->Offered<!---/isloc--->" border="0"/>&nbsp;');
			}
			if (row.isShared) {
				result.push('<img src="#WebRoot()#/images/status_shared_product_to.gif" alt="<!---isloc--->Shared to others<!---/isloc--->" title="<!---isloc--->Shared to others<!---/isloc--->" border="0"/>');
			}

            return result.join('');
        }
    }
]
<!---/isnoloc--->

2.4.10 Advanced Columns Template

The following template can be used for many ISGrids of the same type and provides configurable visible columns.

To define which columns to display, call the ISGrid with a configuration-parameter (to define the configuration-name) and add the following line to the isgrid.properties of your cartridge:

staticfiles/cartridge/config/isgrid.properties
intershop.template.isgrid.<CONFIGURATIONNAME>.columns=namelink id typecode

This will only show the 3 stated columns. Not providing this property or leaving it empty will show all columns.

The columns-template has to be modified too:

ChannelColumns.isml
<!---isnoloc--->
<iscontent type="text/javascript" charset="UTF-8" compact="true" templatemarker="false">
<!--- get visible columns from configuration --->
<isif condition="#isDefined(configuration) AND isDefined(currentapplication)#">
    <!--- get column names for this grid --->
    <isset scope="request" name="configColumns" value="#config.'.columns'#">
    <isset scope="request" name="columns" value="#"'".replace(currentapplication:Configuration:String(configColumns), " ", "', '")."'"#">
    <isif condition="#columns EQ '\'\''#"><isset scope="request" name="columns" value=""></isif>
</isif>
(function () {
    // all available columns
	var allColumns = {
            name: {
                type: 'text',
                dataKey: 'name',
                title: '<!---isloc--->Name<!---/isloc--->',
                sortable: true
            },
            namelink: {
                type: 'link',
                dataKey: 'name',
                title: '<!---isloc--->Name<!---/isloc--->',
                url: '<isprint value="#URL(Action('ViewChannel-Edit')).'?RepositoryUUID={uuid}'#">',
                params: ['uuid'],
                sortable: true
            },
            id: {
                type: 'text',
                dataKey: 'id',
                title: '<!---isloc--->ID<!---/isloc--->',
                sortable: true
            },
            idlink: {
                type: 'link',
                dataKey: 'id',
                title: '<!---isloc--->ID<!---/isloc--->',
                url: '<isprint value="#URL(Action('ViewChannel-Edit')).'?RepositoryUUID={uuid}'#">',
                params: ['uuid'],
                sortable: true
            },
            typecode: {
                type: 'text',
                dataKey: 'typeCode',
                title: '<!---isloc--->Type<!---/isloc--->',
                sortable: false,
            }
        },
        names = [<isprint encoding="off" value="#columns#">],
        useAll = names.length === 0,
        columns = [],
        name, column;
        
        function indexOf(list, element) {
            if (list.indexOf) {
                return list.indexOf(element);
            }
            for (var i = 0, len = list.length; i < len; i++) {
                if (list[i] === element) {
                    return i;
                }
            }
            return -1;
        }
        
        for (name in allColumns) {
            if (!allColumns.hasOwnProperty(name)) continue;
            
            var column = allColumns[name];
            column.id = name;
        
            // check if column configuration is provided
            if (useAll) {
                // no column configuration
                columns.push(column);
            } else {
                // check if column is needed
                if (indexOf(names, name) !== -1) {
                    columns.push(column);
                }
            }
        }
        
        return columns;
})()
<!---/isnoloc--->

2.5 ISLightBox (deprecated)

DEPRECATED

This ISModule is deprecated since Intershop 7.5 and was replaced by  Dialog concept. Do not use the ISLightBox for new code, instead have a look at the Cookbook - Dialog.

For the LightBox we use JQuery Dialog, further documentation and demos are available on the vendors page.

2.5.1 Attributes

autoopen

When autoOpen is true, the dialog will open automatically when dialog is called. If false, it will stay hidden until .dialog("open") is called on it. The default value is true.

closeonescape

Specifies whether the dialog should close when it has focus and the user presses the escape (ESC) key. The default value is true.

closetext

Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme. The default value is "close".

dialogclass

The specified class name(s) will be added to the dialog, for additional theming.

draggable

If set to true, the dialog will be draggable will be draggable by the title bar. The default value is true.

height

The height of the dialog, in pixels. Specifying 'auto' is also supported to make the dialog adjust based on its content.

hide

The effect to be used when the dialog is closed.

id

The ID of the LightBox Div element.

maxheight

The maximum height to which the dialog can be resized, in pixels. The default value is false.

maxwidth

The maximum width to which the dialog can be resized, in pixels. The default value is false.

minheight

The minimum height to which the dialog can be resized, in pixels. The default value is 150.

minwidth

The minimum width to which the dialog can be resized, in pixels. The default value is 150.

modal

If set to true, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements. The default value is false.

params

A map with parameters which can be used inside the UI Template.

positionx

Specifies where the dialog should be displayed. Possible values are 'center', 'left', 'right' or an x coordinate. The default value is "center".

positiony

Specifies where the dialog should be displayed. Possible values are 'center', 'top', 'bottom'. or an y coordinate. The default value is "center".

resizable

If set to true, the dialog will be resizable. The default value is true.

scripttemplate

The additional JavaScript code for the control.

show

The effect to be used when the dialog is opened.

stack

Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus. The default value is true.

title

Specifies the title of the dialog.

uitemplate

The HTML elements for the UI.

width

The width of the dialog, in pixels. The default value is 300.

zindex

The starting z-index for the dialog. The default value is 1000.

2.5.2 Example uitemplate

webcontrols/LightBoxDemoUITemplate.isml
<p>The LightBox window can be moved, resized or closed with the 'x' icon.</p>

2.5.3 Example scripttemplate

webcontrols/LightBoxDemoScriptTemplate.isml
<isplacement placeholderid="JSWebControls">
    $( "<isprint value="#selector#">" ).dialog( "option", "buttons",
        [
            {
                text: "Ok",
                click: function click()
                {
                    // excecute some other functions for the OK button ...

                    // close the LightBox
                    $(this).dialog("close");
                }
            },
            {
                text: "Cancel",
                click: function click()
                {
                    // excecute some other functions for the Cancel button ...

                    // close the LightBox
                    $(this).dialog("close");
                }
            }
        ]
    );
</isplacement>

2.5.4 Example full ISML page

<html>
    <head>
        <isinclude template="webcontrols/Placeholder">
    </head>
    <body>
        <isinclude template="webcontrols/Modules">
        <isLightBox id="LightBoxDemo" uitemplate="webcontrols/LightBoxDemoUITemplate.isml" scripttemplate="webcontrols/LightBoxDemoScriptTemplate.isml">
    </body>
</html>

2.6 ISPropertyEditor

The ISPropertyEditor renders form-elements that represent a given PropertyGroup. The values of the PropertyGroup can be manipulated by the user.

2.6.1 Abvailable Editors

2.6.1.1 TextInputFieldEditor

Value TypeString
@Secret supportyes
Full qualified Name
com.intershop.ui.web.internal.property.editor.TextInputFieldEditor
Used Controls
  • com.intershop.ui.web.capi.property.editor.ui.TextInputField
  • com.intershop.ui.web.capi.property.editor.ui.PasswordInputField

The default editor for properties of the type String. Normally rendered as a text input field. If the property is annotated as @Secret it is rendered as a password field and the value is not transfered to the client.

2.6.1.2 SelectBoxEditor

Value TypeString
@Secret supportno
Full qualified Name... in progress ...
Used Controls
com.intershop.ui.web.capi.property.editor.ui.SelectBox

... in progress ...

2.6.1.3 EnumSelectBox

Value TypeEnum<?>
@Secret supportno
Full qualified Name
com.intershop.ui.web.internal.property.editor.EnumSelectBox
Used Controls
com.intershop.ui.web.capi.property.editor.ui.SelectBox

The default editor for enum typed properties. The values shown to the user can be localized either specific for the property group or the enum data type. The lookup for the localized value is:

  • localization key propertygroup.<property group ID>.properties.<property ID>.values.<enumValue.name()>
  • localization key <enumValue.getClass().getName()>.<enumValue.name()>
  • enumValue.toString()

2.6.2 Attributes

ownerObjectThe owner of the values which are stored using the PropertyGroup.
propertydescriptorPropertyGroupDescriptorThe PropertyGroupDescriptor of a PropertyGroup that shall be rendered (see Concept - Property Groups)
validationresultUIPropertyGroupThe validation results which are returned by the pipelet StorePropertyGroupValues
hidetitleStringHide the title of the property group (e.g. when only 1 property group is rendered) (default: "false")
formfieldnameStringThe name of the hidden form-field that stores the JSON-serialized property group values (incl. user changes) for processing with the pipelet StorePropertyGroupValues  (default: "PropertyGroupConfiguration")

2.6.3 Extension Points

To add a new custom Editor which is used to render a specific Property, use the Extension Points by following these steps:

  1. Create the server-side Editor implementation using the interface com.intershop.ui.web.capi.property.editor.Editor  (example: com.intershop.ui.web.internal.property.editor.TextInputFieldEditor)

    CustomEditor.java
    public class CustomEditor implements Editor<String>
    {
        @Override
        public boolean isSupported(PropertyType propertyType)
        {
            return propertyType.getValueType().equals(String.class);
        }
    
        @Override
        public UIEditor getUIEditor(String value, PropertyType propertyType, Object owner)
        {
            if (propertyType.isSecret())
            {
                String placeholder = value == null ? "" : "SECRET";
                return new CustomUIEditor(placeholder);
            }
            else
            {
                return new CustomUIEditor(value);
            }
        }
        @Override
        public String getValue(UIEditor editor, PropertyType propertyType, Object owner) throws ConversionException
        {
            CustomUIEditor field = (CustomUIEditor)editor;
            String value = field.getValue();
            return value;
        }
    } 
  2. Create the server-side UIEditor implementation using the interface com.intershop.ui.web.capi.property.editor.ui.AbstractUIEditor (example: com.intershop.ui.web.internal.property.editor.ui.TextInputField)

    Those instances are subject for serialization and deserialization with the Jackson library.

    CustomUIEditor.java
    public class CustomUIEditor extends AbstractUIEditor
    {
        private String value;
        private boolean invalid = false;
    
        public CustomUIEditor()
        {
        }
    
        public CustomUIEditor(String value)
        {
            this.setValue(value);
        }
    
        public String getValue()
        {
            return value;
        }
    
        public void setValue(String value)
        {
            this.value = value;
        }
    
        @Override
        public int hashCode()
        {
            return Objects.hashCode(value);
        }
    
        @Override
        public boolean equals(Object obj)
        {
            if (this == obj)
            {
                return true;
            }
            
            if (obj == null)
            {
                return false;
            }
            
            if (getClass() != obj.getClass())
            {
                return false;
            }
            
            CustomUIEditor other = (CustomUIEditor)obj;
            if (!Objects.equals(value, other.value))
            {
                return false;
            }
            return true;
        }
    
        @Override
        public boolean isInvalid()
        {
            return invalid;
        }
    
        public void markAsInvalid()
        {
            invalid = true;
        }
    } 
  3. Create the client-side JavaScript UIEditor (example: p_business/ui_web_library/staticfiles/cartridge/static/default/js/propertygroups/editor/textinputfield.js)
    Don't forget to change editor registration to match the full qualified name of your server-side UIEditor.

    customfield.js
    /*global jQuery:true, intershop:true */
    'use strict';
    !function (global, utils, $) {
        var ui = utils.namespace('intershop.propertygroups.ui'),
            editor = utils.namespace('intershop.propertygroups.ui.editor'),
            template = '' + 
                '<div class="propertygroup-editor propertygroup-editor-custom">' +
                    '<input type="text" class="propertygroup-editor-value" />' +
                '</div>';
    
        /**
         * Create a new CustomField editor.
         * @param {Object} json configuration as JSON
         * @param {String} name name of the editor
         */
        var CustomField = function CustomField(json, name) {
            this.$el = $($.parseHTML(template));
            this.$el.children('.propertygroup-editor-value').attr('name', name);
            
            Object.defineProperty(this, 'value', {
                configurable: true,
                enumerable: true,
                get: function () {
                    return this.$el.children('.propertygroup-editor-value').val();
                },
                set: function (v) {
                    this.$el.children('.propertygroup-editor-value').val(v);
                }
            });
            
            this.fromJSON(json);
            this.bindEvents();
        };
        
        /**
         * Bind events to the DOM element.
         * @private
         */
        CustomField.prototype.bindEvents = function bindEvents() {
            var _this = this;
            this.$el.find('.propertygroup-editor-value')
                .on('input.propertygroup', function onInput() {
                    _this.modified = true;
                });
        };
        
        /**
         * Load configuration from JSON.
         * @param {Object} originJSON configuration as JSON
         * @private
         */
        CustomField.prototype.fromJSON = function fromJSON(originJSON) {
            var json = $.extend(true, {}, originJSON);
            
            this.modified = json.modified || false;
            this.value = json.value || '';
        };
        
        /**
         * Create configuration as JSON.
         * @param {Object} originJSON old configuration as JSON
         * @return {Object} updated configuration as JSON
         */
        CustomField.prototype.toJSON = function toJSON(originJSON) {
            var json = $.extend(true, {}, originJSON);
            
            json.modified = this.modified;
            if (this.modified) {
                json.value = this.value;
            }
            
            return json;
        };
        
        /**
         * Get the jQuery DOM element.
         * @return {jQuery} jQuery DOM elements
         */
        CustomField.prototype.render = function render() {
            return this.$el;
        };
        
        editor.CustomField = editor.CustomField || CustomField;
        ui.Controller.registerEditor('full.qualified.name.of.your.CustomUIEditor', CustomField);
    }(window, intershop.propertygroups.utils, jQuery);
    
    
  4. Create the CSS file to style your editor (example: p_business/ui_web_library/staticfiles/cartridge/static/default/css/propertygroups/editor/textinputfield.css)

    customfield.css
    .propertygroup-editor-custom {
        background-color: red;
    }
  5. Create a template which loads the JavaScript implementation and the CSS file (example: p_business/ui_web_library/staticfiles/cartridge/templates/default/webcontrols/propertygroups/editor/TextInputFieldEditor.isml)

    CustomEditor.isml
    <iscontent type="text/html" charset="UTF-8" compact="true">
    <isplacement placeholderid="JSWebLibraries">propertygroups/editor/customfield.js</isplacement>
    <isplacement placeholderid="CSSWebLibraries">propertygroups/editor/customfield.css</isplacement>
  6. Register your Editor at the existing ExtensionPoints (example: p_business/ui_web_library/staticfiles/cartridge/extensions/PropertyEditorTextInputFieldEditor.extension)

    CustomEditor.extension
    <?xml version="1.0" encoding="UTF-8"?>
    <extensionpoint:ExtensionPointModel xmlns:extensionpoint="http://www.intershop.de/extensionpoint/2011" name="CustomEditor">
        <extensionBindings type="java" extensionPoint="com.intershop.ui.web.capi.property.editor.Editor-PropertyEditor.register" extension="full.qualified.name.of.your.CustomEditor"/>
        <extensionBindings type="isml" extensionPoint="webcontrols/propertygroups/PropertyEditor-Editors" extension="template/path/to/your/isml/CustomEditor"/>
    </extensionpoint:ExtensionPointModel>
    
    
  7. Map the Property of a PropertyGroup to your Editor (example: a_backoffice/app_bo_dashboard/staticfiles/cartridge/components/instances.component)

    This is only necessary if multiple editors for the same Java are registered and this certain property needs to used the editor with lower priority.

    instances.component
    <?xml version="1.0" encoding="UTF-8"?>
    <components xmlns="http://www.intershop.de/component/2010">
        <instance name="MyCustomMappingUsingMyCustomEditor" with="PropertyEditorConfiguration">
            <fulfill requirement="propertyGroupMapping">
                <instance with="PropertyEditorConfiguration.PropertyGroupMapping">
                    <fulfill requirement="propertyGroup" value="full.qualified.name.of.my.PropertyGroup"/>
                    <fulfill requirement="propertyMapping">
                        <instance with="PropertyEditorConfiguration.PropertyMapping">
                            <fulfill requirement="property" value="nameOfMyProperty"/>
                            <fulfill requirement="editor"   value="full.qualified.name.of.my.CustomEditor"/>
                        </instance>
                    </fulfill>
                </instance>
            </fulfill>
        </instance>
    </components>

2.7 ISStickyTableHeaders

2.7.1 Attributes

selector

(optional)

jQuery selector of the table (e.g. "#producttable", "table.product"), falls back to "table.stickyheader" if not used

2.7.2 Description

The ISStickyTableHeader module is a wrapper of the stickyheader jQuery plugin which will make sure that the table header (thead) is always visible when the user scrolls trough the table.
The plugin detaches the thead and sets a fixed-position in the page, if the user starts scrolling.

2.7.3 Usage

<ISStickyTableHeaders>
<!--- this table will use it by default --->
<table class="stickyheader">
</table>

<!--- this table won't use it --->
<table>
</table>

<!--- this table explicitly uses it --->
<ISStickyTableHeaders selector="#'#'#mytable">
<table id="mytable">
</table>

2.7.3.1 Without StickyHeaders

2.7.3.2 With StickyHeaders

The table header (which includes buttons) is visible during scrolling.

2.8 ISTree

2.8.1 Attributes

params

Map

Define ISML variables needed in the data- / config- or script template here. You can use ISCreateMap to create this parameter.

id

String

Is the HTML id of the generated element.

configuration

String (a-zA-Z camelCase)

The configuration-name of this specific tree instance.

configtemplate

Isinclude path

Contains a JavaScript object containing the configuration of the tree.

datatemplate

Isinclude path

Contains a JavaScript object with the hierarchical data of the tree.

(optional) scripttemplate

Isinclude path

Additional JavaScript that manipulates this ISTree instance

2.8.2 Example

Page.isml
<ISCreateMap mapname="params"
	key0="Application" value0="#CurrentApplication#"
	key1="Catalogs" value1="#Catalogs#"
	key2="Clipboard" value2="#selectedCategoriesMap#"
	key3="LookupHelper" value3="#LookupHelper#"
	key4="CurrentChannelPermissionMap" value4="#CurrentChannelPermissionMap#">

<ISTree
	id="#'catalogTree_'.CurrentChannel:Id#"
	configtemplate="TreeConfig.isml"
	datatemplate="TreeData.isml"
	params="#params#">
TreeConfig.isml
<!---isnoloc--->
<iscontent type="text/javascript" charset="UTF-8" compact="true" templatemarker="false">
{
	plugins: ['themes', 'json', 'ui', 'hotkeys', 'checkbox']
}
<!---/isnoloc--->
TreeData.isml
<!---isnoloc--->
<iscontent type="text/json" charset="UTF-8" compact="true" templatemarker="false">
<isset scope="request" name="printComma" value="false">
[
<isloop iterator="params:Catalogs" alias="Catalog">
    {
        title: "<isprint encoding="javascript" value="#Catalog:DisplayName#"/>",
        liAttr: {
            id: "<isprint encoding="javascript" value="#Catalog:UUID#"/>"
        },
        data: {
            checkbox: {
                <!--- if you add a placeholder you don't have to care about the following commas --->
                _placeholder: undefined
                <isif condition="#params:Clipboard:get(Catalog:UUID)#">
                    ,checked: true
                </isif>
                <isif condition="#NOT isDefined(params:CurrentChannelPermissionMap:SLD_MANAGE_SEARCH_INDEXES)#">
                    ,disabled: true
                </isif>
            }
        }
        <isif condition="#hasElements(Catalog:Root:SubCategories)#">
            <!--- TODO: export to separate ismodule --->
            <isset scope="request" name="printChildComma" value="false">
            , children: [
                <isloop iterator="Catalog:Root:SubCategories" alias="Category">
                    {
                        title: "<isprint encoding="javascript" value="#Category:DisplayName#"/>",
                        liAttr: {
                            id: "<isprint encoding="javascript" value="#Category:UUID#"/>"
                        },
                        data: {
                            checkbox: {
                                _placeholder: undefined
                                <isif condition="#params:Clipboard:get(Category:UUID)#">
                                    ,checked: true
                                </isif>
                                <isif condition="#NOT isDefined(params:CurrentChannelPermissionMap:SLD_MANAGE_SEARCH_INDEXES)#">
                                    ,disabled: true
                                </isif>
                            }
                        }

                    }
                    <isif condition="#hasNext(Category)#">,</isif>
                </isloop>
            ]
            <!--- /TODO: export to separate ismodule --->
        </isif>
    }
    <isif condition="#hasNext(Catalog)#">,</isif>
</isloop>
]
<!---/isnoloc--->

See JavaScript Controls - jquery.fn.tree for more information on the data structure.

3 Package - Controls

3.1 jquery.ui.widgets.Widget

public abstract Widget

3.1.1 Summary

3.1.1.1 Options

The options of a UI Widget can be set inside the constructor

Type

Short Description

Boolean

disabled = false
           Disables (true) or enables (false) the Widget.

3.1.1.2 Constructor

Short Description

widget( String name, Object base, Object prototype )
           Constructs a new UI Widget.

3.1.1.3 Methods

The public methods of a UI Widget must be executed via the corresponding constructor:

Return Value

Short Description

protected Boolean

_trigger ( String type, JQueryEvent event, Object data )
           Triggers the given Event.

void

destroy ( )
           Remove the widget functionality completely.

void

disable ( )
           Disable the widget.

void

enable ( )
           Enable the widget.

Object

option ( String optionName )
           Get a widget option.

void

option ( String optionName , Object value )
           Set a widget option.

void

option ( Object[] options )
           Set multiple widget options at once by providing an options object.

Widget

widget ( )
           Returns the corresponding widget element.

3.1.1.4 Events

Supply a callback function to handle the create event as an init option.

$( ".aElement" ).aWidget(
    {
        aEvent: function aEvent(event, ui)
        {
            ...
        }
    }
);

Bind to the create event by type:

var aEventType = widgetName + aEvent;
$( ".aElement" ).bind( aEventType, function aEvent(event, ui)
    {
        ...
    }
);

Type

Short Description

JQueryEvent

create
           This event is triggered when widget is created.

3.1.2 Detail

3.1.2.1 Options

The options of a UI Widget can be set inside the constructor

$( ".aElement" ).aWidget({ aOption: "aValue" });

or with the set method.

$( ".aElement" ).aWidget( "option", "aOption", "aValue" );

Get the value of the option via the get method:

var aValue = $( ".aElement" ).aWidget( "option", "aOption" );

3.1.2.1.1 disabled

public Boolean disabled = false

 

Disables (true) or enables (false) the widget. Can be set when initialising (first creating) the widget.


3.1.2.2 Constructor

3.1.2.2.1 widget

public widget ( String name, Object base, Object prototype )

 

Constructs a new UI Widget.

3.1.2.2.1.1 Parameters:
  • name - the type class name of the new widget
  • base - the class of the new widget
  • prototype - the prototype of the new widget, if base and prototype isn't the same

3.1.2.3 Methods

The public methods of a UI Widget must be executed via the corresponding constructor:

$( ".aElement" ).aWidget(methodName, param0, param1, ... , paramN);

The protected methods can be called directly from the extending class e.g.:

self._trigger('open')

3.1.2.3.1 trigger

protected Boolean _trigger ( String type, JQueryEvent event, Object data )

 

Triggers the given Event.

3.1.2.3.1.1 Parameters:
  • type - the type name of the event
  • event - the corresponding event which should be triggered
  • data - the data which should be pass through
3.1.2.3.1.2 Returns:
  • Boolean - true for success otherwise false.

3.1.2.3.2 destroy

public void destroy ( )

 

Remove the widget functionality completely. This will return the element back to its pre-init state.


3.1.2.3.3 disable

public void disable ( )

 

Disable the widget.


3.1.2.3.4 enable

public void enable ( )

 

Enable the widget.


3.1.2.3.5 option

public Object option ( String optionName )

 

Get a widget option.

3.1.2.3.5.1 Parameters:
  • optionName - the name of the option you want to get back
3.1.2.3.5.2 Returns:
  • Object - the value of the given Parameter.

3.1.2.3.6 option

public void option ( String optionName, Object value )

 

Set a widget option.

3.1.2.3.6.1 Parameters:
  • optionName - the name of the option you want to set
  • value - the value of the option you to set

3.1.2.3.7 option

public void option ( Object[ ] options )

 

Set multiple widget options at once by providing an options object.

3.1.2.3.7.1 Parameters:
  • options - a set of different options you want to set

3.1.2.3.8 widget

public Widget widget ( )

 

Returns the corresponding widget element.

3.1.2.3.8.1 Returns:

3.1.2.4 Events

Supply a callback function to handle the create event as an init option.

$( ".aElement" ).aWidget(
    {
        aEvent: function aEvent(event, ui)
        {
            ...
        }
    }
);

Bind to the create event by type:

var aEventType = widgetName + aEvent;
$( ".aElement" ).bind( aEventType, function aEvent(event, ui)
    {
        ...
    }
);

3.1.2.4.1 create

public JQueryEvent create

 

This event is triggered when dialog is created.

3.2 jquery.fn.grid

3.2.1 HTML

<div id="productgrid"></div>

3.2.2 JavaScript

// grid initialization
$('#productgrid').grid({
    getData: function getData(request) {
        // request.pageSize is the request number of rows
        // get requested data
        var data = ...
        var total = ...; // total of rows

        // return data to the grid
        request.callback({
            orderColumnId: request.orderColumnId,
            orderTerm: request.orderterm,
            order: request.order,
            offset: request.offset,
            total: total,
            items: data
        });
    },
    // localization
    text: {
        status: '<strong>{0}</strong> - <strong>{1}</strong> von <strong>{2}</strong>'
    },
    rowsPerPage: [25, 10, 50, 100, 250],
    // columns configuration
    columns: [
        // selectable rows
        {
            id: 'select',
            type: 'select',
            dataKey: 'sku',
            selectedItemsName: 'SelectedObjectUUID',
	    availableItemsName: 'ObjectUUID'
        },
        // sku as bold text
        {
            id: 'sku',
            type: 'text',
            dataKey: 'sku',
            title: 'SKU',
            minWidth: 100,
            render: function render(params) {
                return '<strong>' + params.cell + '</strong>';
            }
        },
        // displayname as link
        {
            id: 'displayName',            type: 'link',
            dataKey: 'displayName',
            title: 'Name',
            url: 'http://enfinity.local/products/{0}/detail',
            params: ['sku']
        },
        // price aligned to the right
        {
            id: 'price',
            type: 'money',
            dataKey: 'price',
            title: 'Price',
            cssClass: 'right'
        },
        // offline/online status as image
        {
            id: 'status',
            type: 'status',
            dataKey: 'online',
            title: 'Online/Offline',
            render: function render(params) {
                var src = !!params.cell ? 'online.gif' : 'offline.gif';
                return '<img src="' + src + '" />';
            }
        },
        // actions, 2 visible, the others in a dropdown menu
        {
            id: 'action',
            type: 'action',
            dataKey: 'sku',
            menuThreshold: 2,
            items: [
                {
                    cssClass: 'edit',
                    render: 'Edit',
                    click: function click(params) {
                        alert('Edit ' + params.cell);
                    }
                },
                {
                    type: 'separator'
                },
                {
                    cssClass: 'delete',
                    render: function render() {
                        return 'Delete';
                    },
                    click: function click(params) {
                        alert('Delete ' + params.cell);
                    }
                },
                {
                    cssClass: 'online',
                    render: 'Online',
                    click: function click(params) {
                        alert('Online ' + params.cell);
                    }
                },
                {
                    type: 'separator'
                },
                {
                    cssClass: 'export',
                    render: 'Export',
                    click: function click(params) {
                        alert('Export ' + params.cell);
                    }
                }
            ]
        }
    ],
    // every 5th row receives the "fiver" css class
    rowCss: function rowCss(params) {
        return ((params.rowIndex + 1) % 5 === 0) ? 'fiver' : '';
    }
});

3.2.3 Configuration

Attribute

Default value

Description

getData

function() {}

this function is called for each data request (loading, sorting, pagination) and triggers the callback function with the received data, e.g.

function getData(request) {
    // request.pageSize is the number of requested rows
    // get requested data
    var data = ...;
    var total = ...;

    // return data to the grid
    request.callback({
        orderterm: request.orderterm,
        order: request.order,
        offset: request.offset,
        total: total,
        items: data
    });
}

loadOnInit

true

Trigger loading of grid data after initialization.

text

text: {
	/**
	 * pagination status
	 * params: from, to, total
	 */
	status: '<strong>{from}</strong> - <strong>{to}</strong> of <strong>{total}</strong>',
	/** items per page */
	items: 'items per page',
	/** e.g. rows 1-25 of 5010 */
	of: 'of',
	/** show all */
	showAll: 'show all',
	titleSingleSelection: '',
	/** params: total */
	selectAllMenuAll: 'Select all ({total})',
	/** params: total */
	selectAllMenuNone: 'Select none'
} 

All localizable strings are listed in this object, use the placeholders ({first}, {last}, ...) where needed

rowsPerPage

25, 10

rows-per-page options, listed in the selectbox on the bottom, first value is default value

columns

[]

array of column-configurations

rowCss

function() {}

function is called for each row and can return a css class as string (or an empty string), e.g.

function rowCss(params) {
    return ((params.rowIndex + 1) % 5 === 0) ? 'fiver' : '';
}

showAllLimit

200

Hide "show all" for more rows

paginationLimit

5000

A simple pagination bar is used when this limit is reached. For large data sets some features of the pagignation bar are disabled e.g jump to first/last page.

beforeDataRequest

 

Executed before getData method. getData method is not executed if this returns false

3.2.4 Functions

name

parameters

description

getBase

boolean detach, boolean clear

Creates the table inside the parent element and returns a reference. If it already exists, no new table will be created. Call with detach=true to detach the table from the DOM for faster mass-data operations, but do not forget to append the table manually again to the parent element. Calling with clear=true will empty the complete table.

getColumnData

DOMNode element

By giving this function a reference to any DOM element inside the table (e.g. the th or an element inside a td) it will return the configuration of the parent column.

getRowData

DOMNode element

By giving this function a reference to any DOM element inside the tbody (e.g. an element inside a td or the tr itself) it will return the data-object of the owning row.

3.3 jquery.fn.popupmenu

3.3.1 HTML

<div id="toolbar">
	<input type="submit" name="new" value="New" />
	<input type="submit" name="delete" value="Delete" />
	<input type="submit" name="more" value="More" />
</div>

3.3.2 JavaScript

    $('#toolbar').children('input[name="more"]').popupmenu({
        items: [
            {
                cssClass: 'online',
                render: function render() {
                    var rows = $('#element').grid('getSelectedRows');
                    return 'Set Online (' + rows.length + ' items)';
                },
                click: function click() {
                    alert('Online ');
                }
            },
            {
                type: 'separator'
            },
            {
                cssClass: 'export',
                render: function render() {
                    var rows = $('#element').grid('getSelectedRows');
                    return 'Export (' + rows.length + ' items)';
                },
                click: function click() {
                    alert('Export ');
                }
            }
        ]
    });

3.3.3 Configuration

Attribute

Default Value

Description

items

[ ]

An array containing menu item configuration objects.

timeOut

300

Time in ms until the menu will be hidden, after the mouse coursor was moved away from menu.

attachTo

null

Attach menu to this element and show when this element is clicked.

attachMode

after

Can be 'after' or 'insert'. How the menu should be placed. After the given element or into it.
After should be applied for buttons. Use insert with care, the menu will get closed if the mouse
leaves the element it was inserted to (even if the mouse still remains within the menu).

alignTo

null

Menu is aligned to this element instead of the element it was attached to.

manualShow

false

By default, the menu is shown after clicking on the element it was attached to.
Set this to true if showing / hiding of the menu is handled by your code.

3.3.4 Item Configuration

Attribute

Default Value

Description

type

text

can be text or seperator

render

Empty Function

{String or Function} How the menu item is displayed.

click

Empty Function

The method that will be attached to the click event. Parameters can be passed to this method by passing them to the show method.

cssClass

 

{String or Function} The css class applied to that item

3.4 jquery.fn.powerTip

A web browser on its own only uses the "title" attribute of DOM elements to present a tooltip to the user, but this is limited to plain text. If a tooltip should also contain HTML markup then this can only be achieved via JavaScript. For this PowerTip (a jquery plugin) is provided with the Intershop solution. 

PowerTip Homepage

Running example usages: ui_web_library\staticfiles\cartridge\static\default\js\jquery\powertip\demo\examples.html

3.4.2 Demo Scenario 1

The basic use case to let "title" tooltips to be rendered with PowerTip.

3.4.2.1 HTML

<a href="/some/link" title="This will be the tooltip text.">Some Link</a>

3.4.2.2 JavaScript

$('[title]').powerTip({smartPlacement:true});

3.4.3 Demo Scenario 2

Create tooltips with structured content. Note that the tooltip content should be simply renderable with ISML. This is an Intershop specific extension of the original PowerTip plugin.

3.4.3.1 HTML

<a href="/some/link">Some Link</a>
<div class="tooltip" style="display:none">
This will be the tooltip <br />
	<table>
		<tr>
			<td>Name:</td>
			<td>A name</td>
		</tr>
		<tr>
			<td>ID:</td>
			<td>An identifier</td>
		</tr>
	</table>
</div>

3.4.3.2 JavaScript

$('.tooltip').powerTip({applyThisOnPrevious:true, mouseOnToPopup:true, smartPlacement:true});

3.4.4 Required Resources

ui_web_library contains 

  • css\jquery\powertip\jquery.powertip.css
  • js\jquery\powertip\jquery.powertip.js

3.4.5 Configuration

NameDefaultTypeDescription
followMousefalseBooleanIf set to true the tooltip will follow the users mouse cursor.
mouseOnToPopupfalseBooleanAllow the mouse to hover on the tooltip. This lets users interact with the content in the tooltip. Only works if followMouse is set to false.
placement'n'StringPlacement location of the tooltip relative to the element it is open for. Values can be n, e, s, w, nw, ne, sw, se, nw-alt, ne-alt, sw-alt, or se-alt (as in north, east, south, and west). This only matters if followMouse is set to false.
smartPlacementfalseBooleanWhen enabled the plugin will try to keep tips inside the browser view port. If a tooltip would extend outside of the view port then its placement will be changed to an orientation that would be entirely within the current view port. Only applies if followMouse is set to false.
popupId'powerTip'StringHTML id attribute for the tooltip div.
offset10NumberPixel offset of the tooltip. This will be the offset from the element the tooltip is open for, or from from mouse cursor if followMouse is true.
fadeInTime200NumberTooltip fade-in time in milliseconds.
fadeOutTime100NumberTooltip fade-out time in milliseconds.
closeDelay100NumberTime in milliseconds to wait after mouse cursor leaves the element before closing the tooltip. This serves two purposes: first, it is the mechanism that lets the mouse cursor reach the tooltip (cross the gap between the element and the tooltip div) for mouseOnToPopup tooltips. And, second, it lets the cursor briefly leave the element and return without causing the whole fade-out, intent test, and fade-in cycle to happen.
intentPollInterval100NumberHover intent polling interval in milliseconds.
intentSensitivity7NumberHover intent sensitivity. The tooltip will not open unless the number of pixels the mouse has moved within the intentPollInterval is less than this value. These default values mean that if the mouse cursor has moved 7 or more pixels in 100 milliseconds the tooltip will not open.
manualfalseBooleanIf set to true then PowerTip will not hook up its event handlers, letting you create your own event handlers to control when tooltips are shown (using the API to open and close tooltips).
applyThisOnPreviousfalseBooleanIf set to true then PowerTip will use the DOM element where is applied to and takes it as the tooltip content for the immediately preceding sibling element. This is an Intershop specific extension of the PowerTip plugin.

3.5 jquery.fn.tree

3.5.1 Further Reading

For further documentation or examples it is helpful to check the underlying jsTree jquery plugin.

3.5.2 HTML

<div id="tree"></div>

3.5.3 JavaScript

// tree data
var data = [
    {
        title: 'Node 0',
        liAttr: {
            id: 'node0'
        },
        children: [
            {
                title: 'Node 0-0',
                liAttr: {
                    id: 'node00'
                },
                data: {
                    checkbox: {
                        checked: true
                    }
                }
                children: [
                    {
                        title: 'Node 0-0-0',
                        liAttr: {
                            id: 'node000'
                        }
                    }
                ]
            },
            {
                title: 'Node 0-1',
                liAttr: {
                    id: 'node01'
                }
            },
            {
                title: 'Node 0-2',
                liAttr: {
                    id: 'node02'
                }
            }
        ]
    },
    {
        title: 'Node 1',
        liAttr: {
            id: 'node1'
        },
        data: {
            core: {
                disabled: true,
                disabledText: 'This is a disabled node'
            }
        }
    }
];

// tree initialization
$('#tree').tree({
    plugins: ['themes', 'json', 'ui', 'hotkeys', 'checkbox', 'menu'],
    core: {
        animation: 100
    },
    json: {
        data: data,
        progressiveRender: true
    },
    checkbox: {
        single: false
    },
    menu: {
        menuThreshold: 1,
        items: [
            {
                cssClass: 'Exclude',
                render: 'Exclude',
                click: function clickAction1(args) {
                    var instance = args.data.treeInstance,
                        node = args.data.node;
                    instance.excludeNode(node);
                }
            },
            {
                cssClass: 'Include',
                render: 'Include',
                click: function clickAction1(args) {
                    var instance = args.data.treeInstance,
                        node = args.data.node;
                    instance.includeNode(node);
                }
            }
        ]
    }
});

3.5.4 Configuration

Attribute

Default value

Description

plugins

[]

list of plugins that should be initialized

Each plugin has its own configuration object with plugin-specific settings. For a full API documentation (including the configuration parameters) run ant jsdoc in the ui_web_library/build folder.

3.6 jquery.ui.widgets.AssignmentList

public AssignmentList  extends Widget

The AssignmentList extends the standard input element SELECT. This widget provides two lists:

  • left - all non selected options and
  • right - all selected options

The user can "select" and "deselect" the options via drag and drop or displayed icons (+/-). The option moves from one side to the other on select/deselect.

3.6.1 Demo Scenarios

Demo

Example

Html DOM element for dialog

...
<div id="YOUR_HTML_ELEMENT" name="letter">
</div>
...

Creates a new Assignment List with the standard Settings

$( "#assignment" ).assignment();

3.6.2 Complete HTML Layout

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery UI AssignmentList - Demo for the standard Constructor</title>

        <!-- required CSS Libraries -->
        <link rel="stylesheet" href="../../../../css/jqueryui-1.8.19/jquery.ui.core.css">
        <link rel="stylesheet" href="../../../../css/jqueryui-1.8.19/jquery.ui.theme.css">
        <link rel="stylesheet" href="../../../../css/jqueryui/assignment/jquery.assignment.css">

        <!-- required JavaScript Libraries -->
        <script src="../../../jquery-1.7.2.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.core.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.widget.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.mouse.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.draggable.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.position.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.resizable.js"></script>
        <script src="../../../jquery/tmpl-1.1.1/jquery.tmpl.js"></script>
        <script src="../../../jqueryui/assignment/jquery.assignment.js"></script>

        <script>
            // .. the JQuery Script for the Dialog
        </script>
    </head>
    <body>
        <!-- The Html part for the AssignmentList - BEGIN -->
        <select id="assignment" name="example assignment list" multiple="multiple">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
        <!-- The Html part for the AssignmentList - END -->
    </body>
</html>

3.6.3 Summary

3.6.3.1 Options

The options of an AssignmentList can be set inside the constructor

Type

Option = Default Value
           Short Description

String

animated = "fast"
           When animated is specified, the AssignmentList UI will use transition effects between interactions.

Function

dataParser = defaultDataParser
           Used with remote search, this function is called to parse the data received and return the data in the expected format.

Number

dividerLocation = 0.6
           Specify the portion of the selected (left side) area of the AssignmentList.

String

droppable = "both"
           Enable or disable basic drag and drop functionality between the selected list (left) and the available list (right).

String

hide = "slideUp"
           Specify the hide animation function to use.

Function

nodeComparator = defaultNodeComparator
           Comparator function used in ordering the list's elements during transfer.

Function

nodeInserted = null
           Callback function fired for each newly inserted items.

Object

remoteParams = {}
           Enable or disable search capabilities for this instance of the AssignmentList.

String

remoteUrl = null
           Define the input search delay before a request is sent to the server.

Boolean

searchable = true
           Specify the show animation function to use.

Integer

searchDelay = 400
           Enable or disable item sortable functionality through drag and drop for the selected list (left) and/or the available list (right).

show

aOption = slideDown
           Specify some extra remote parameters to send with every remote search requests.

String

sortable = "left"
           If the AssignmentList is searchable, then setting this option will allow fetching new data from a remote script.

Options inherited from jquery.ui.widgets.Widget

disabled

3.6.3.2 Constructor

These public methods can be used to create an assignment list widget:

Method ( parameter )
           Short Description

assignment( )
           Constructs an AssignmentList with the standard settings.

assignment( Object initialSettings )
           Constructs an AssignmentList with the given settings.

3.6.3.3 Methods

The public methods of an AssignmentList must be executed via the corresponding constructor:

Return Value

Method ( parameter )
           Short Description

void

deselect( Boolean state, String msg )
           Get or set the state of the enabled AssignmentList.

void

enabled( String item )
           Deselect the specified item.

Boolean

isBusy( )
           Return the busy state of the AssignmentList.

Boolean

isSelected( String item )
           Return true if and only if item is selected.

void

search( String query )
           Perform a search of all the available elements, and filter out (hide) any unmatched item.

void

select( String item )
           Select the specified item.

void

selectAll( )
           Select all of the available items.

String[]

selectedValues( )
           Return an array of the keys of all the currently selected values.

void

aMethod( )
           Deselect all the selected items (equivalent to "Remove all").

3.6.3.4 Events

Supply a callback function to handle the create event as an init option.

Type

Event
           Short Description

JQueryEvent

deselected
           This event is triggered whenever the an option has been deselected.

JQueryEvent

messages
           This event is triggered whenever the widget needs to send some feedback to the user.

JQueryEvent

selected
           This event is triggered whenever the an option has been selected.

Events inherited from jquery.ui.widgets.Widget

create

3.6.4 Detail

3.6.4.1 Options

The options of an AssignmentList can be set inside the constructor

$( "aElement" ).assignment({ aOption: "aValue" });

or with the set method.

$( "aElement" ).assignment( "option", "aOption", "aValue" );

Get the value of the option via the get method:

var aValue = $( "aElement" ).assignment( "option", "aOption" );

3.6.4.1.1 animated

public String animated = "fast"

 

When animated is specified, the AssignmentList UI will use transition effects between interactions. The possible values are 'fast', 'slow' and null (no animation).


3.6.4.1.2 dataParser

public Function dataParser = defaultDataParser

 

Used with remote search, this function is called to parse the data received and return the data in the expected format.

The function takes the raw received data from the request and should return a JSON object corresponding to the new available options to add. The returned object should have the following structure :

{
	"key1": {
		selected: boolean,
		value: string
	}[,
	"key2": {
		selected: boolean,
		value: string
	}[,
	...]]
}

If the data should be discarded, the function may return false or null.


3.6.4.1.3 dividerLocation

public Number dividerLocation = 0.6

 

Specify the portion of the selected (left side) area of the AssignmentList. To have an even split AssignmentList, set dividerLocation to 0.5. The value should be between 0 and 1.


3.6.4.1.4 droppable

public String droppable = "both"

 

Enable or disable basic drag and drop functionality between the selected list (left) and the available list (right). The possible values are 'both', 'left', 'right', 'none'. And set drop support in both lists, the selected list, the available list, or no drag and drop respectively.

This setting is readonly at run-time. Trying to set this property after initialization will trigger a messages event.


3.6.4.1.5 hide

public String hide = "slideUp"

 

Specify the hide animation function to use. If animated is null, the value will be overriden to 'hide'. The possible values are any available function effects name. The default value for animated hide effect is 'slideUp'.


3.6.4.1.6 nodeComparator

public Function nodeComparator = defaultNodeComparator

 

Comparator function used in ordering the list's elements during transfer. The function takes two arguments, a and b, and should return a numeric value less than 0 if a < b, 0 if a == b, or greater than 0 if a > b respectively.

The function is only called when the list is not sortable. By default, items are sorted by content value ascending. To completely disable automatic list ordering, set nodeComparator to null.


3.6.4.1.7 nodeInserted

public Function nodeInserted = null

 

Callback function fired for each newly inserted items. The function takes the inserted item as a JQuery object and does not expect any return value.

Internally, items are cached as a best effort basis, therefore some items may be inserted, removed and re-inserted during manipulations.


3.6.4.1.8 remoteParams

public Object remoteParams = {}

 

Specify some extra remote parameters to send with every remote search requests. Note that the 'q' argument is reserved by AssignmentList and if remoteParams contains a key called 'q', it will be overriden with the search query.


3.6.4.1.9 remoteUrl

public String remoteUrl = null

 

If the AssignmentList is searchable, then setting this option will allow fetching new data from a remote script. The returned data may vary if a custom dataParser is set.

The default parser expects to receive the data as plain text, one option per line, in the format of :

value=text

3.6.4.1.10 searchable

public Boolean searchable = true

 

Enable or disable search capabilities for this instance of the AssignmentList.


3.6.4.1.11 searchDelay

public Integer searchDelay = 400

 

Define the input search delay before a request is sent to the server. The default value is 400 milliseconds.


3.6.4.1.12 show

public String show = "slideDown"

 

Specify the show animation function to use. If animated is null, the value will be overriden to 'show'. The possible values are any available function effects name. The default value for animated hide effect is 'slideDown'.


3.6.4.1.13 sortable

public String sortable = "left"

 

Enable or disable item sortable functionality through drag and drop for the selected list (left) and/or the available list (right). The possible values are 'both', 'left', 'right', 'none'. And set sortable support in both lists, the selected list only, the available list only, or none sortable respectively.

This setting overrides droppable for the specified list. This setting is readonly at run-time (like droppable).

3.6.4.2 Constructor

An AssignmentList can be created with these constructors, one with and one without options.

$( "aElement" ).assignment({ aOption: "aValue" });
$( "aElement" ).assignment();

3.6.4.2.1 assignment

public assignment( )

 

Constructs an AssignmentList with the standard settings.


3.6.4.2.2 assignment

public assignment( Object initialSettings )

 

Constructs a AssignmentList with the given settings.

3.6.4.2.3 Parameters:
  • initialSettings - the initial settings for the new AssignmentList

3.6.4.3 Methods

The public methods of an AssignmentList must be executed via the corresponding constructor:

$( ".aElement" ).assignment("methodName", param0, param1, ... , paramN);

The protected methods can be called directly from the extending class e.g.:

self._trigger('open')

3.6.4.3.1 deselect

public void deselect( Boolean state, String msg )

 

Get or set the state of the enabled AssignmentList. If no state is specified, will act as a getter. If state is set to false, the msg argument will display the specified string as custom disabled message inside the AssignmentList.

3.6.4.3.2 Parameters:
  • state - set it to false to disable the AssignmentList
  • msg - the displayed custom disabled message

3.6.4.3.3 enabled

public void enabled( String item )

 

Deselect the specified item. The value should be the text of the option to verify (not case sensitive).

If only the option key is known, the option may be specified using the following command:

$('aElement').assignment('isSelected', $('aElement').find('option[value=key]').text() );
3.6.4.3.4 Parameters:
  • item - the key of a select element

3.6.4.3.5 isBusy

public Boolean isBusy( )

 

Return the busy state of the AssignmentList. The method will return true if the AssignmentList is processing item selection, search, etc.

3.6.4.3.6 Returns:
  • Boolean - true if the AssignmentList is busy, otherwise false.

3.6.4.3.7 isSelected

public Boolean isSelected( String item )

 

Return true if and only if item is selected. The value should be the text of the option to verify (not case sensitive).

If only the option key is known, the option may be specified using the following command:

$('aElement').assignment('isSelected', $('aElement').find('option[value=key]').text() );
3.6.4.3.8 Parameters:
  • item - the key of a select element
3.6.4.3.9 Returns:
  • Boolean - true if the given item is selected, otherwise false.

public void search( String query )

 

Perform a search of all the available elements, and filter out (hide) any unmatched item. This method controls the search input fields, if the AssignmentList is not searchable, or is busy, or not enabled, the method does nothing.

3.6.4.3.11 Parameters:
  • query - the search query

3.6.4.3.12 select

public void select( String item )

 

Select the specified item. The value should the text of the option to select (not case sensitive).

If only the option key is known, the option may be specified using the following command:

$('aElement').assignment('isSelected', $('aElement').find('option[value=key]').text() );
3.6.4.3.13 Parameters:
  • item - the key of a select element

3.6.4.3.14 selectAll

public void selectAll( )

 

Select all of the available items.


3.6.4.3.15 selectedValues

public String[] selectedValues( )

 

Return an array of the keys of all the currently selected values.

3.6.4.3.16 Returns:
  • String[] - the keys of the selected items

3.6.4.3.17 selectNone

public void selectNone( )

 

Deselect all the selected items (equivalent to "Remove all").


3.6.4.4 Events

Supply a callback function to handle the create event as an init option.

$( "aElement" ).assignment(
    {
        aEvent: function aEvent(event, ui)
        {
            ...
        }
    }
);

Bind to the create event by type:

var aEventType = "assignment" + aEvent;
$( "aElement" ).bind( aEventType, function aEvent(event, ui)
    {
        ...
    }
);

3.6.4.4.1 deselected

public JQueryEvent deselected

 

This event is triggered whenever the an option has been deselected. The event deselected is triggered for every option deselected.


3.6.4.4.2 messages

public JQueryEvent messages

 

This event is triggered whenever the widget needs to send some feedback to the user.


3.6.4.4.3 selected

public JQueryEvent selected

 

This event is triggered whenever the an option has been selected. The event selected is triggered for every option selected.

3.7 jquery.ui.widgets.Dialog

public Dialog extends Widget

A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.

If the content length exceeds the maximum height, a scrollbar will automatically appear.

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

A call to

$(foo).dialog()

will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with:

$(foo).dialog({ autoOpen: false })

Open it with:

$(foo).dialog('open')

To close it, use:

$(foo).dialog('close')

3.7.1 Demo Scenarios

Demo

Example

Html DOM element for dialog

...
<div id="dialog" title="Basic dialog">
    <p>The dialog window can be moved, resized or closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
...

Creates a new Dialog with the standard Settings

$( "#dialog" ).dialog();

Creates a new Dialog with some initial Settings

$( "#dialog" ).dialog(
{
    closeOnEscape: false,
    draggable: false
});

Open the Dialog manually

$( "#dialog" ).dialog(
{
    autoOpen: false
});
$( "#opener" ).click(function click()
{
    $("#dialog").dialog( "open" );
    return false;
});

Dialog with two Buttons as Object

$( "#dialog" ).dialog();

// For the demo we set the buttons via the "option" method.
// But it is possible to set the buttons with the constructor (see: Dialog with two Buttons as Array).
$( "#dialog" ).dialog( "option", "buttons",
{
    "Ok": function Ok()
     {
         // execute functions for OK Button ...
         $(this).dialog("close");
     },
     "Cancel": function Cancel()
     {
         // execute functions for Cancel Button ...
         $(this).dialog("close");
     }
});

Dialog with two Buttons as Array

// For the demo we set the buttons with constructor.
// But it is possible to set the buttons with the "option" method (see: Dialog with two Buttons as Object).
$( "#dialog" ).dialog(
{
    buttons:
    [{
        text: "Ok",
        click: function Ok()
        {
            // execute functions for OK Button ...
            $(this).dialog("close");
        }
    },{
        text: "Cancel",
        click: function click()
        {
            // execute functions for Cancel Button ...
            $(this).dialog("close");
        }
    }]
});

Disable and Enable ESC button for a Dialog

$( "#dialog" ).dialog(
{
    closeOnEscape: false,
    buttons:
    [{
        text: "enable ESC",
        click: function click()
        {
            $(this).dialog("option", "closeOnEscape", true);
        }
    }]
});

Close the Dialog

$( "#dialog" ).dialog(
{
    buttons:
    {
        "Close": function Close()
        {
            // execute functions for OK Button ...
            $(this).dialog("close");
        }
    }
});

Listen to Resize Events

$( "#dialog" ).dialog(
{
    resize: function resize(event)
    {
        $( "#demo-output" ).html("W: " + event.target.clientWidth + "; H: " + event.target.clientHeight);
        return true;
    }
});

3.7.2 Complete HTML Layout

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery UI Dialog - Demo for the "autoOpen" option</title>

        <!-- required CSS Libraries -->
        <link  href="../../../../css/jqueryui-1.8.19/jquery.ui.core.css" rel="stylesheet"/>
        <link  href="../../../../css/jqueryui-1.8.19/jquery.ui.resizable.css" rel="stylesheet"/>
        <link  href="../../../../css/jqueryui-1.8.19/jquery.ui.theme.css" rel="stylesheet"/>
        <link  href="../../../../css/jqueryui-1.8.19/jquery.ui.dialog.css" rel="stylesheet"/>
        <link  href="../../../../css/jqueryui-1.8.19/jquery.ui.theme.css" rel="stylesheet"/>
        <link  href="../../../../css/jqueryui/lightbox/jquery.dialog.css" rel="stylesheet"/>

        <!-- required JavaScript Libraries -->
        <script src="../../../jquery-1.7.2.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.core.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.widget.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.mouse.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.draggable.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.position.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.resizable.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.dialog.js"></script>

        <script>
            // .. the JQuery Script for the Dialog
        </script>
    </head>
    <body>
        <!-- The Html part for the Dialog - BEGIN -->
        <div id="dialog" title="Basic dialog">
            <p>The dialog window can be moved, resized or closed with the 'x' icon.</p>
        </div>
        <!-- The Html part for the Dialog - END -->
    </body>
</html>

3.7.3 Summary

3.7.3.1 Options

The options of a Dialog can be set inside the constructor:

Type

Option = Default Value
           Short Description

Boolean

autoOpen = true
           When autoOpen is true the dialog will open automatically when dialog is called.

Object

buttons = {}
           Specifies which buttons should be displayed on the dialog.

Object[ ]

buttons = []
           Specifies which buttons should be displayed on the dialog.

Boolean

closeOnEscape = true
           Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.

String

closeText = "close"
           Specifies the text for the close button.

String

dialogClass = ""
           The specified class name(s) will be added to the dialog, for additional theming.

Boolean

draggable = true
           If set to true, the dialog will be draggable will be draggable by the titlebar.

Number

height = "auto"
           The height of the dialog, in pixels.

String

hide = null
           The effect to be used when the dialog is closed.

Object

hide = null
           The effect to be used when the dialog is closed.

Number

maxHeight = false
           The maximum height to which the dialog can be resized, in pixels.

Number

maxWidth = false
           The maximum width to which the dialog can be resized, in pixels.

Number

minHeight = 150
           The minimum height to which the dialog can be resized, in pixels.

Number

minWidth = 150
           DThe minimum width to which the dialog can be resized, in pixels

Boolean

modal = false
           If set to true, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with).

String

position = "center"
           Specifies where the dialog should be displayed.

String[ ]

position = ["center"]
           Specifies where the dialog should be displayed.

Boolean

resizable = true
           If set to true, the dialog will be resizable.

String

show = null
           The effect to be used when the dialog is opened.

Object

show = null
           The effect to be used when the dialog is opened.

Boolean

stack = true
           Specifies whether the dialog will stack on top of other dialogs.

String

title = ""
           Specifies the title of the dialog.

Number

width = 300
           The width of the dialog, in pixels.

Integer

zIndex = 1000
           The starting z-index for the dialog.

Options inherited from jquery.ui.widgets.Widget

disabled

3.7.3.2 Constructor

These public methods can be used to create an assignment list widget:

Method ( parameter )
           Short Description

dialog( )
           Constructs a dialog with the standard settings.

dialog( Object initialSettings )
           Constructs a dialog with the given settings.

3.7.3.3 Methods

The public methods of a Dialog must be executed via the corresponding constructor:

Return Value

Method ( parameter )
           Short Description

void

close( )
           Close the dialog.

Boolean

isOpen( )
           Returns true if the dialog is currently open.

void

moveToTop( )
           Move the dialog to the top of the dialogs stack.

void

open( )
           Open the dialog.

3.7.3.4 Events

Supply a callback function to handle the create event as an init option:

Type

Event
           Short Description

JQueryEvent

beforeClose
           This event is triggered when a dialog attempts to close.

JQueryEvent

open
           This event is triggered when dialog is opened.

JQueryEvent

focus
           This event is triggered when the dialog gains focus.

JQueryEvent

dragStart
           This event is triggered at the beginning of the dialog being dragged.

JQueryEvent

drag
           This event is triggered when the dialog is dragged.

JQueryEvent

dragStop
           This event is triggered after the dialog has been dragged.

JQueryEvent

resizeStart
           This event is triggered at the beginning of the dialog being resized.

JQueryEvent

resize
           This event is triggered when the dialog is resized.

JQueryEvent

resizeStop
           This event is triggered after the dialog has been resized.

JQueryEvent

close
           This event is triggered when the dialog is closed.

Events inherited from jquery.ui.widgets.Widget

create

3.7.4 Detail

3.7.4.1 Options

The options of a Dialog can be set inside the constructor

$( ".aElement" ).dialog({ aOption: "aValue" });

or with the set method.

$( ".aElement" ).dialog( "option", "aOption", "aValue" );

Get the value of the option via the get method:

var aValue = $( ".aElement" ).dialog( "option", "aOption" );

3.7.4.1.1 autoOpen

public Boolean autoOpen = true

 

When autoOpen is true the dialog will open automatically when dialog is called. If false it will stay hidden until .dialog("open") is called on it.


3.7.4.1.2 buttons

public Object buttons = {}

 

Specifies which buttons should be displayed on the dialog. The property key is the text of the button. The value is the callback function for when the button is clicked. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object.


3.7.4.1.3 buttons

public Object[ ]

 

Specifies which buttons should be displayed on the dialog. Each element of the array must be an Object defining the properties to set on the button.


3.7.4.1.4 closeOnEscape

public Boolean closeOnEscape = true

 

Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.


3.7.4.1.5 closeText

public String closeText = "close"

 

Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.


3.7.4.1.6 dialogClass

public String dialogClass = ""

 

The specified class name(s) will be added to the dialog, for additional theming.


3.7.4.1.7 draggable

public Boolean draggable = true

 

If set to true, the dialog will be draggable will be draggable by the titlebar.


3.7.4.1.8 height

public Number height = "auto"

 

The height of the dialog, in pixels. Specifying 'auto' is also supported to make the dialog adjust based on its content.


3.7.4.1.9 hide

public String hide = null

 

The effect to be used when the dialog is closed.


3.7.4.1.10 hide

public Object hide = null

 

The effect to be used when the dialog is closed.


3.7.4.1.11 maxHeight

public Number maxHeight = false

 

The maximum height to which the dialog can be resized, in pixels.


3.7.4.1.12 maxWidth

public Number maxWidth = false

 

The maximum width to which the dialog can be resized, in pixels.


3.7.4.1.13 minHeight

public Number minHeight = 150

 

The minimum height to which the dialog can be resized, in pixels.


3.7.4.1.14 minWidth

public Number minWidth = 150

 

The minimum width to which the dialog can be resized, in pixels.


3.7.4.1.15 modal

public Boolean modal = false

 

If set to true, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements.


3.7.4.1.16 position

public String position = "center"

 

Specifies where the dialog should be displayed. Possible values:

  1. a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'.
  2. an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100])
  3. an array containing x,y position string values (e.g. ['right','top'] for top right corner).

3.7.4.1.17 position

public String[ ] position = ["center"]

 

Specifies where the dialog should be displayed.


3.7.4.1.18 resizable

public Boolean resizable = true

 

If set to true, the dialog will be resizable.


3.7.4.1.19 show

public String show = null

 

The effect to be used when the dialog is opened.


3.7.4.1.20 show

public Object show = null

 

The effect to be used when the dialog is opened.


3.7.4.1.21 stack

public Boolean stack = true

 

Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus.


3.7.4.1.22 title

public String title = ""

 

Specifies the title of the dialog. Any valid HTML may be set as the title. The title can also be specified by the title attribute on the dialog source element.


3.7.4.1.23 width

public Number width = 300

 

The width of the dialog, in pixels.


3.7.4.1.24 zIndex

public Integer zIndex = 1000

 

The starting z-index for the dialog.


3.7.4.2 Constructor

The constructor of a Dialog can be executed in the following way:

$( ".aElement" ).dialog(param0, param1, ... , paramN);

3.7.4.2.1 dialog

public dialog( )

 

Constructs a dialog with the standard settings.


3.7.4.2.2 dialog

public dialog( Object initialSettings )

 

Constructs a dialog with the given settings.

3.7.4.2.3 Parameters:
  • initialSettings - the initial settings for the new dialog

3.7.4.3 Methods

The public methods of a Dialog must be executed via the corresponding constructor:

$( ".aElement" ).dialog("methodName", param0, param1, ... , paramN);

The protected methods can be called directly from the extending class e.g.:

self._trigger('open')

3.7.4.3.1 close

public void close( )

 

Close the dialog.


3.7.4.3.2 isOpen

public Boolean isOpen( )

 

Returns true if the dialog is currently open.

3.7.4.3.3 Returns:
  • Boolean - true if the dialog is currently open.

3.7.4.3.4 moveToTop

public void moveToTop( )

 

Move the dialog to the top of the dialogs stack.


3.7.4.3.5 open

public void open( )

 

Open the dialog.


3.7.4.4 Events

Supply a callback function to handle the create event as an init option.

$( ".aElement" ).dialog(
    {
        aEvent: function(event, ui)
        {
            ...
        }
    }
);

Bind to the create event by type:

var aEventType = "dialog" + aEvent;
$( ".aElement" ).bind( aEventType, function(event, ui)
    {
        ...
    }
);

3.7.4.4.1 beforeClose

public JQueryEvent beforeClose

 

This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented.


3.7.4.4.2 open

public JQueryEvent open

 

This event is triggered when dialog is opened.


3.7.4.4.3 focus

public JQueryEvent focus

 

This event is triggered when the dialog gains focus.


3.7.4.4.4 dragStart

public JQueryEvent dragStart

 

This event is triggered at the beginning of the dialog being dragged.


3.7.4.4.5 drag

public JQueryEvent drag

 

This event is triggered when the dialog is dragged.


3.7.4.4.6 dragStop

public JQueryEvent dragStop

 

This event is triggered after the dialog has been dragged.


3.7.4.4.7 resizeStart

public JQueryEvent resizeStart

 

This event is triggered at the beginning of the dialog being resized.


3.7.4.4.8 resize

public JQueryEvent resize

 

This event is triggered when the dialog is resized.


3.7.4.4.9 resizeStop

public JQueryEvent resizeStop

 

This event is triggered after the dialog has been resized.


3.7.4.4.10 close

public JQueryEvent close

 

This event is triggered when the dialog is closed.

3.8 jquery.ui.widgets.DropDown

public DropDown extends Widget

DropDown turns an ordinary HTML select control into an elegant drop down box of checkboxes with themeroller support.

3.8.1 Demo Scenarios

Demo

Example

HTML DOM element for dialog

...
<select id="dropdown" name="example dropdown box" multiple="multiple">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>
...

Creates a new DropDown box with the standard Settings

$( "#dropdown" ).dropdown();

3.8.2 Complete HTML Layout

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery UI DropDown - Demo for the standard Constructor</title>

        <!-- required CSS Libraries -->
        <link rel="stylesheet" href="../../../../css/jqueryui-1.8.19/jquery.ui.core.css">
        <link rel="stylesheet" href="../../../../css/jqueryui-1.8.19/jquery.ui.theme.css">
        <link rel="stylesheet" href="../../../../css/jqueryui/dropdown/jquery.dropdown.css">
        <link rel="stylesheet" href="../../../../css/jqueryui/dropdown/jquery.dropdown.filter.css">

        <!-- required JavaScript Libraries -->
        <script src="../../../jquery-1.7.2.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.core.js"></script>
        <script src="../../../jqueryui-1.8.19/jquery.ui.widget.js"></script>
        <script src="../../../jqueryui/dropdown/jquery.dropdown.js"></script>
        <script src="../../../jqueryui/dropdown/jquery.dropdown.filter.js"></script>

        <script>
            // .. the JQuery Script for the DropDown
        </script>
    </head>
    <body>
        <!-- The Html part for the DropDown - BEGIN -->
        <select id="dropdown" name="example dropdown box" multiple="multiple">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
        <!-- The Html part for the DropDown - END -->
    </body>
</html>

3.8.3 Summary

3.8.3.1 Options

The options of a DropDown:

Type

Option = Default Value
           Short Description

Boolean

autoOpen = false
           A boolean value denoting whether or not to automatically open the menu when the widget is initialized.

String

checkAllText = "Check all"
           The text of the "check all" link.

String

classes = ""
           Additional class(es) to apply to BOTH the button and menu for further customization.

Boolean

header = true
           A boolean value denoting whether or not to display the header.

String

header = true
           A string value, which replaces the text of the "check all", "uncheck all" and "close" links.

Number

height = 175
           Height of the checkbox container (scroll area) in pixels.

String

hide = ""
           The name of the effect to use when the menu closes.

Number

minWidth = 225
           Minimum width of the entire widget in pixels.

Boolean

multiple = true
           If set to false, the widget will use radio buttons instead of checkboxes, forcing users to select only one option.

String

noneSelectedText = "Select options"
           The default text of the select box when no options have been selected.

Object

position = {}
           This option allows you to position the menu anywhere you like relative to the button; centered, above, below (default), etc.

Number

selectedList = 0
           A number greater than 0 denotes the maximum number of list items to display before switching over to the selectedText parameter.

String

selectedText = "# selected"
           The text to display in the select box when options are selected (if selectedList is false).

String

show = ""
           The name of the effect to use when the menu opens.

String

uncheckAllText = "Uncheck All"
           The text of the "uncheck all" link.

Options inherited from jquery.ui.widgets.Widget

disabled

3.8.3.2 Constructor

These public methods can be used to create an assignment list widget:

Method ( parameter )
           Short Description

dropdown( )
           Constructs a DropDown with the standard settings.

dropdown( Object initialSettings )
           Constructs a DropDown with the given settings.

3.8.3.3 Methods

The public methods of a DropDown must be executed via the corresponding constructor:

Return Value

Method ( parameter )
           Short Description

void

checkAll( )
           Check all checkboxes.

void

close( )
           Closes the menu.

Object[]

getChecked( )
           Returns an array of all the checked checkboxes.

Boolean

isOpen( )
           Returns a boolean denoting if the widget is currently open or not.

void

open( )
           Opens the menu.

void

refresh( )
           Reloads the checkbox menu.

void

uncheckAll( )
           Uncheck all checkboxes.

3.8.3.4 Events

Supply a callback function to handle the create event as an init option.

Type

Event
           Short Description

JQueryEvent

beforeclose
           Fires right before the menu closes.

JQueryEvent

beforeopen
           Fires right before the menu opens.

JQueryEvent

checkall
           Fires when all the options are checked.

JQueryEvent

click
           Fires when a checkbox is checked or unchecked.

JQueryEvent

close
           Fires after the widget closes.

JQueryEvent

open
           Fires after the widget opens.

JQueryEvent

optgrouptoggle
           Fires when an optgroup label is clicked on.

JQueryEvent

uncheckall
           Fires when all the options are all unchecked.

Events inherited from jquery.ui.widgets.Widget

create

3.8.4 Detail

3.8.4.1 Options

The options of a DropDown can be set inside the constructor

$( "aElement" ).dropdown({ aOption: "aValue" });

or with the set method.

$( "aElement" ).dropdown( "option", "aOption", "aValue" );

Get the value of the option via the get method:

var aValue = $( "aElement" ).dropdown( "option", "aOption" );

3.8.4.1.1 autoOpen

public Boolean autoOpen = false

 

A boolean value denoting whether or not to automatically open the menu when the widget is initialized.


3.8.4.1.2 checkAllText

public String checkAllText = "Check all"

 

The text of the "check all" link.


3.8.4.1.3 classes

public String classes = ""

 

Additional class(es) to apply to BOTH the button and menu for further customization. Separate multiple classes with a space.


3.8.4.1.4 header

public Boolean header = true

 

A boolean value denoting whether or not to display the header.


3.8.4.1.5 header

public String header = true

 

A string value, which replaces the text of the "check all", "uncheck all" and "close" links.


3.8.4.1.6 height

public Number height = 175

 

Height of the checkbox container (scroll area) in pixels. If set to "auto", the height will calculate based on the number of checkboxes in the menu.


3.8.4.1.7 hide

public String hide = ""

 

The name of the effect to use when the menu closes. To control the speed as well, pass in an array: 'explode', 500


3.8.4.1.8 minWidth

public Number minWidth = 225

 

Minimum width of the entire widget in pixels. Setting to "auto" will disable.


3.8.4.1.9 multiple

public Boolean multiple = true

 

If set to false, the widget will use radio buttons instead of checkboxes, forcing users to select only one option.


3.8.4.1.10 noneSelectedText

public String noneSelectedText = "Select options"

 

The default text of the select box when no options have been selected.


3.8.4.1.11 position

public String position = {}

 

This option allows you to position the menu anywhere you like relative to the button; centered, above, below (default), etc. Also provides collision detection to flip the menu above the button when near the bottom of the window. If you do not set this option or if the position utility has not been included, the menu will open below the button.


3.8.4.1.12 selectedList

public Number selectedList = 0

 

A numeric (or boolean to disable) value denoting whether or not to display the checked opens in a list, and how many. A number greater than 0 denotes the maximum number of list items to display before switching over to the selectedText parameter. A value of 0 or false is disabled.


3.8.4.1.13 selectedText

public String selectedText = "# selected"

 

The text to display in the select box when options are selected (if selectedList is false). A pound sign (#) will automatically replaced by the number of checkboxes selected. If two pound signs are present in this parameter, the second will be replaced by the total number of checkboxes available. Example: "# of # checked".

This parameter also accepts an anonymous function with three arguments: the number of checkboxes checked, the total number of checkboxes, and an array of the checked checkbox DOM elements. See examples for usage.


3.8.4.1.14 show

public String show = ""

 

The name of the effect to use when the menu opens. To control the speed as well, pass in an array: 'slide', 500


3.8.4.1.15 uncheckAllText

public String uncheckAllText = "Uncheck all"

 

The text of the "uncheck all" link.


3.8.4.2 Constructor

3.8.4.2.1 dropdown

public dropdown( )

 

Constructs a DropDown box with the standard settings.


3.8.4.2.2 dropdown

public dropdown( Object initialSettings )

 

Constructs a DropDown box with the given settings.

3.8.4.2.3 Parameters:
  • initialSettings - the initial settings for the new DropDown box

3.8.4.3 Methods

The public methods of a DropDown box must be executed via the corresponding constructor:

$( ".aElement" ).dropdown("methodName", param0, param1, ... , paramN);

The protected methods can be called directly from the extending class e.g.:

self._trigger('open')

3.8.4.3.1 checkAll

public void checkAll( )

 

Check all checkboxes.


3.8.4.3.2 close

public void close( )

 

Closes the menu.


3.8.4.3.3 getChecked

public Object[] getChecked( )

 

Returns an array of all the checked checkboxes.

3.8.4.3.4 Returns:
  • Object[] - an array of all the checked checkboxes

3.8.4.4 isOpen

public Boolean isOpen( )

 

Returns a boolean denoting if the widget is currently open or not.

3.8.4.4.1 Returns:
  • Boolean - true if the widget is currently open otherwise false.
 

3.8.4.4.2 open

public void open( )

 

Opens the menu.


3.8.4.4.3 refresh

public void refresh( )

 

Reloads the checkbox menu. If you’re dynamically adding/removing option tags on the original select via AJAX or DOM manipulation methods, call refresh to reflect the changes in the widget.


3.8.4.4.4 uncheckAll

public void uncheckAll( )

 

Uncheck all checkboxes.


3.8.4.5 Events

Supply a callback function to handle the create event as an init option.

$( ".aElement" ).dropdown(
    {
        aEvent: function aEvent(event, ui)
        {
            ...
        }
    }
);

Bind to the create event by type:

var aEventType = "dropdown" + aEvent;
$( ".aElement" ).bind( aEventType, function aEvent(event, ui)
    {
        ...
    }
);

3.8.4.5.1 beforeclose

public JQueryEvent beforeclose

 

Fires right before the menu closes. Prevent the menu from closing by returning false in the handler.


3.8.4.5.2 beforeopen

public JQueryEvent beforeopen

 

Fires right before the menu opens. Prevent the menu from opening by returning false in the handler.


3.8.4.5.3 checkall

public JQueryEvent checkall

 

Fires when all the options are checked by either clicking the "check all" link in the header, or when the "checkall" method is programatically called (see next section).


3.8.4.5.4 click

public JQueryEvent click

 

Fires when a checkbox is checked or unchecked.


3.8.4.5.5 close

public JQueryEvent close

 

Fires after the widget closes.


3.8.4.5.6 open

public JQueryEvent open

 

Fires after the widget opens.


3.8.4.5.7 optgrouptoggle

public JQueryEvent optgrouptoggle

 

Fires when an optgroup label is clicked on. This event receives the original event object as the first argument, and a hash of values as the second argument.


3.8.4.5.8 uncheckall

public JQueryEvent uncheckall

 

Fires when all the options are all unchecked by either clicking the “uncheck all” link in the header, or when the “uncheckall” method is programatically called (see next section).

 

Disclaimer

The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.

Customer Support
Knowledge Base
Product Resources
Tickets