PatternExpandFunction 

Definition

You can insert a PatternExpandFunction into a PatternTabStrip or a PatternTray. With PatternExpandFunction, you can implement the option of expanding and collapsing a PatternTabStrip or a PatternTray. The difference between this and the expand function you have when you use a Tray is that the PatternExpandFunctionallows three states: Large, medium and small. Different icons are displayed, depending on the value of the expandState property.

Another difference to the Tray element is that you need to define the expand function. You can therefore set the exact height of the relevant PatternTray or PatternTabStrip.

The following screenshot illustrates a PatternTray with the relevant icons for each expandState, large, medium and small (from left to right).

Description of UI Element Properties

●      enabled

Defines whether the PatternExpandFunction is enabled.

●      expandState

Defines the icon that is displayed for the PatternExpandFunction. expandState can take the following values and is represented by enumeration type WDIconButtonFunctionStatus:

value	design	description
large		should be used to expand the Container to maximum size
medium		should be used to shrink the Container to a medium size
small		should be used to collapse the Container to minimum size

The default value is large.

●      tooltip

This property describes a note for the UI element that is displayed when the user places the cursor on the UI element.

Properties Overview

Name	Interface	Type	Initial Value	Bindable
enabled	IWDPatternExpandFunction	boolean	true	bindable
expandState	IWDPatternExpandFunction	WDIconButtonFunctionStatus	large	bindable
tooltip	IWDPatternExpandFunction	String		bindable

Events

The event onAction is triggered if the user clicks the expand button. The parameter is the new state.

Name	Interface	Parameter
onAction	PatternExpandFunction	(WDIconButtonFunctionStatus expandState)

 

Example

The following example explains how you can implement a PatternTray with three PatternExpandFunctions that represent the three possible states of the expandState property.

...

       1.      Insert a PatternTray into your view

       2.      Insert the following UI elements into the PatternTray:

○       A PatternContentArea – then insert a Container element into this.

○       Three PatternExpandFunctions for the three expand states:

The graphic below illustrates these UI elements as they are displayed in the outline:

       3.      Set the expandState property of the PatternExpandFunction elements to the different values large, medium and small.

       4.      Create a context attribute called containerHeight of type string.

       5.      Bind the height property of the ScrollContainer that represents the content area of the PatternTray to the context attribute containerHeight.

       6.      Create an action for every PatternExpandFunction and add the following code to the action:

wdContext.currentContextElement().setContainerHeight("<wished height>");