Personal Library

Reference - JavaScript Controls

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).

ui_web_library

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>
...

ISAssignmentList

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

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

Example scripttemplate

webcontrols/AssignmentListDemoScriptTemplate.isml

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

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>

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>

ISDropDown

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

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.

Example scripttemplate

webcontrols/DropDownDemoScriptTemplate.isml

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

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>

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>

ISGrid

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

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.

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#">

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--->

Columns Template

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

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.

Standard Column Types

These column types only support the common attributes.

Text

Displays data unmodified.

Integer

Converts values into integer before displaying.

Float

Converts values into float before displaying.

Money

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

Progress

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

Percentage

Appends a % to the passed float.

Image

Displays an image, original data is source path.

Status

Displays an image based on a boolean value.

Column Types with Additional Attributes

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.

Link

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.

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.

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.

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--->

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--->

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.

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.

Example uitemplate

webcontrols/LightBoxDemoUITemplate.isml

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

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>

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>

ISPropertyEditor

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

Abvailable Editors

TextInputFieldEditor

Value Type	String
@Secret support	yes
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.

SelectBoxEditor

Value Type	String
@Secret support	no
Full qualified Name	... in progress ...
Used Controls	com.intershop.ui.web.capi.property.editor.ui.SelectBox

... in progress ...

EnumSelectBox

Value Type	Enum<?>
@Secret support	no
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()
```

Attributes

owner	Object	The owner of the values which are stored using the PropertyGroup.
propertydescriptor	PropertyGroupDescriptor	The PropertyGroupDescriptor of a PropertyGroup that shall be rendered (see Concept - Property Groups)
validationresult	UIPropertyGroup	The validation results which are returned by the pipelet StorePropertyGroupValues
hidetitle	String	Hide the title of the property group (e.g. when only 1 property group is rendered) (default: "false")
formfieldname	String	The 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")

Extension Points

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

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;
    }
}

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;
    }
}

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);

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;
}
```

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>

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>

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>

ISStickyTableHeaders

Attributes

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

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.

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>

Without StickyHeaders

With StickyHeaders

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

ISTree

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

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.

Package - Controls

public abstract Widget

Summary

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.

Constructor

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

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.

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.

Detail

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" );

disabled

public Boolean disabled = false

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

Constructor

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

Constructs a new UI Widget.

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

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')

trigger

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

Triggers the given Event.

Parameters:

type - the type name of the event
event - the corresponding event which should be triggered
data - the data which should be pass through

Returns:

Boolean - true for success otherwise false.

destroy

public void destroy ( )

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

disable

public void disable ( )

Disable the widget.

enable

public void enable ( )

Enable the widget.

option

public Object option ( String optionName )

Get a widget option.

Parameters:

optionName - the name of the option you want to get back

Returns:

Object - the value of the given Parameter.

option

public void option ( String optionName, Object value )

Set a widget option.

Parameters:

optionName - the name of the option you want to set
value - the value of the option you to set

option

public void option ( Object[ ] options )

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

Parameters:

options - a set of different options you want to set

public Widget widget ( )

Returns the corresponding widget element.

Returns:

Widget - this widget element.

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)
    {
        ...
    }
);

create

public JQueryEvent create

This event is triggered when dialog is created.

jquery.fn.grid

HTML

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

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' : '';
    }
});

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

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.

jquery.fn.popupmenu

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>

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 ');
                }
            }
        ]
    });

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.

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

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.

Links

PowerTip Homepage

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

Demo Scenario 1

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

HTML

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

JavaScript

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

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.

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>

JavaScript

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

Required Resources

ui_web_library contains

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

Configuration

Name	Default	Type	Description
`followMouse`	`false`	Boolean	If set to `true` the tooltip will follow the users mouse cursor.
`mouseOnToPopup`	`false`	Boolean	Allow 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'`	String	Placement 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`.
`smartPlacement`	`false`	Boolean	When 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'`	String	HTML id attribute for the tooltip div.
`offset`	`10`	Number	Pixel 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`.
`fadeInTime`	`200`	Number	Tooltip fade-in time in milliseconds.
`fadeOutTime`	`100`	Number	Tooltip fade-out time in milliseconds.
`closeDelay`	`100`	Number	Time 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.
`intentPollInterval`	`100`	Number	Hover intent polling interval in milliseconds.
`intentSensitivity`	`7`	Number	Hover 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.
`manual`	`false`	Boolean	If 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).
`applyThisOnPrevious`	`false`	Boolean	If 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.

jquery.fn.tree

HTML

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

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);
                }
            }
        ]
    }
});

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.

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.

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();

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>

Summary

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

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.

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").

Methods inherited from jquery.ui.widgets.Widget
_trigger, destroy, disable, enable, option, option, option, widget

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

Detail

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" );

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).

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.

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.

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.

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'.

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.

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.

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.

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

searchable

public Boolean searchable = true

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

searchDelay

public Integer searchDelay = 400

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

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'.

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).

Constructor

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

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

assignment

public assignment( )

Constructs an AssignmentList with the standard settings.

assignment

public assignment( Object initialSettings )

Constructs a AssignmentList with the given settings.

Parameters:

initialSettings - the initial settings for the new AssignmentList

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')

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.

Parameters:

state - set it to false to disable the AssignmentList
msg - the displayed custom disabled message

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() );

Parameters:

item - the key of a select element

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.

Returns:

Boolean - true if the AssignmentList is busy, otherwise false.

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() );

Parameters:

item - the key of a select element

Returns:

Boolean - true if the given item is selected, otherwise false.

search

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.

Parameters:

query - the search query

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() );

Parameters:

item - the key of a select element

selectAll

public void selectAll( )

Select all of the available items.

selectedValues

public String[] selectedValues( )

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

Returns:

String[] - the keys of the selected items

selectNone

public void selectNone( )

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

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)
    {
        ...
    }
);

deselected

public JQueryEvent deselected

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

messages

public JQueryEvent messages

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

selected

public JQueryEvent selected

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

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')

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; } });

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>

Summary

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

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.

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.

Methods inherited from jquery.ui.widgets.Widget
_trigger, destroy, disable, enable, option, option, option, widget

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

Detail

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" );

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.

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.

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.

closeOnEscape

public Boolean closeOnEscape = true

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

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.

dialogClass

public String dialogClass = ""

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

draggable

public Boolean draggable = true

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

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.

hide

public String hide = null

The effect to be used when the dialog is closed.

hide

public Object hide = null

The effect to be used when the dialog is closed.

maxHeight

public Number maxHeight = false

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

maxWidth

public Number maxWidth = false

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

minHeight

public Number minHeight = 150

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

minWidth

public Number minWidth = 150

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

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.

position

public String position = "center"

Specifies where the dialog should be displayed. Possible values:

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

position

public String[ ] position = ["center"]

Specifies where the dialog should be displayed.

resizable

public Boolean resizable = true

If set to true, the dialog will be resizable.

show

public String show = null

The effect to be used when the dialog is opened.

show

public Object show = null

The effect to be used when the dialog is opened.

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.

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.

width

public Number width = 300

The width of the dialog, in pixels.

zIndex

public Integer zIndex = 1000

The starting z-index for the dialog.

Constructor

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

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

dialog

public dialog( )

Constructs a dialog with the standard settings.

dialog

public dialog( Object initialSettings )

Constructs a dialog with the given settings.

Parameters:

initialSettings - the initial settings for the new dialog

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')

close

public void close( )

Close the dialog.

isOpen

public Boolean isOpen( )

Returns true if the dialog is currently open.

Returns:

Boolean - true if the dialog is currently open.

moveToTop

public void moveToTop( )

Move the dialog to the top of the dialogs stack.

open

public void open( )

Open the dialog.

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)
    {
        ...
    }
);

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.

open

public JQueryEvent open

This event is triggered when dialog is opened.

focus

public JQueryEvent focus

This event is triggered when the dialog gains focus.

dragStart

public JQueryEvent dragStart

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

drag

public JQueryEvent drag

This event is triggered when the dialog is dragged.

dragStop

public JQueryEvent dragStop

This event is triggered after the dialog has been dragged.

resizeStart

public JQueryEvent resizeStart

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

resize

public JQueryEvent resize

This event is triggered when the dialog is resized.

resizeStop

public JQueryEvent resizeStop

This event is triggered after the dialog has been resized.

close

public JQueryEvent close

This event is triggered when the dialog is closed.

public DropDown extends Widget

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

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();

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();

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>

Summary

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

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.

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.

Methods inherited from jquery.ui.widgets.Widget
_trigger, destroy, disable, enable, option, option, option, widget

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

Detail

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" );

autoOpen

public Boolean autoOpen = false

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

checkAllText

public String checkAllText = "Check all"

The text of the "check all" link.

classes

public String classes = ""

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

header

public Boolean header = true

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

header

public String header = true

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

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.

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

minWidth

public Number minWidth = 225

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

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.

noneSelectedText

public String noneSelectedText = "Select options"

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

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.

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.

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.

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

uncheckAllText

public String uncheckAllText = "Uncheck all"

The text of the "uncheck all" link.

Constructor

public dropdown( )

Constructs a DropDown box with the standard settings.

public dropdown( Object initialSettings )

Constructs a DropDown box with the given settings.

Parameters:

initialSettings - the initial settings for the new DropDown box

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')

checkAll

public void checkAll( )

Check all checkboxes.

close

public void close( )

Closes the menu.

getChecked

public Object[] getChecked( )

Returns an array of all the checked checkboxes.

Returns:

Object[] - an array of all the checked checkboxes

isOpen

public Boolean isOpen( )

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

Returns:

Boolean - true if the widget is currently open otherwise false.

open

public void open( )

Opens the menu.

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.

uncheckAll

public void uncheckAll( )

Uncheck all checkboxes.

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)
    {
        ...
    }
);

beforeclose

public JQueryEvent beforeclose

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

beforeopen

public JQueryEvent beforeopen

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

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).

click

public JQueryEvent click

Fires when a checkbox is checked or unchecked.

close

public JQueryEvent close

Fires after the widget closes.

open

public JQueryEvent open

Fires after the widget opens.

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.

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.

Table of Contents

Introduction

ui_web_library

General Usage

ISAssignmentList

Attributes

Example scripttemplate

Example uitemplate

Example full HTML

ISDropDown

Attributes

Example scripttemplate

Example uitemplate

Example complete HTML page

ISGrid

Attributes

Configuration

Example ISML Tag

Data Template

Columns Template

Common Attributes

Standard Column Types

Text

Integer

Float

Money

Progress

Percentage

Image

Status

Column Types with Additional Attributes

Action

Link

Select

Simple Columns Template

Advanced Columns Template

ISLightBox (deprecated)

Attributes

Example uitemplate

Example scripttemplate

Example full ISML page

ISPropertyEditor

Abvailable Editors

TextInputFieldEditor

SelectBoxEditor

EnumSelectBox

Attributes

Extension Points

ISStickyTableHeaders

Attributes

Description

Usage

Without StickyHeaders

With StickyHeaders

ISTree

Attributes

Example

Package - Controls

jquery.ui.widgets.Widget

Summary

Options

Constructor

Methods

Events

Detail

Options

disabled

Constructor

widget

Parameters:

Methods

trigger

Parameters:

Returns:

destroy

disable

enable

option

Parameters:

Returns: