---

Enables you to control accessibility behavior and alternative text for the widget.

For more information on using accessibility features in your app, refer Accessibility appendix.

Syntax

accessibilityConfig

Type

Object

Read/Write

Read + Write

Remarks

The accessibilityConfig property is enabled for all the widgets which are supported under the Flex Layout.

The accessibilityConfig property is a JavaScript object which can contain the following key-value pairs.

a11yLabel [String]

Optional. Specifies alternate text to identify the widget. Generally the label should be the text that is displayed on the screen.

a11yValue [String]

Optional. Specifies the current state/value associated with the widget so that the user can perform an action. For example, a checkbox is in selected state or unselected state. On the Android platform, the text specified for a11yLabel is prefixed to the a11yValue.

a11yHint [String]

Optional. Specifies the descriptive text that explains the action associated with the widget. On the Android platform, the text specified for a11yValue is prefixed to the a11yHint.

a11yHidden [Boolean]

Optional. Specifies if the widget should be ignored by assistive technology. The default option is set to false. This option is supported on iOS 5.0 and above, Android 4.1 and above, and SPA

Android limitations

• If the results of the concatenation of a11y fields result in an empty string, then accessibilityConfig is ignored and the text that is on widget is read out.
• The soft keypad does not gain accessibility focus during the right/left swipe gesture when the keypad appears.

SPA/Desktop Web limitations

• The behavior of accessibility depends on the Web browser, Web browser version, Voice Over Assistant, and Voice Over Assistant version.
• Currently SPA/Desktop web applications support only a few ARIA tags. To achieve more accessibility features, use the attribute a11yARIA. The corresponding tags will be added to the DOM as per these configurations.

Example

This example uses the button widget, but the principle remains the same for all widgets that have an accessibilityConfig property.

 

//This is a generic property that is applicable for various widgets.
//Here, we have shown how to use the accessibilityConfig Property for button widget.
/*You need to make a corresponding use of the accessibilityConfig property for other applicable widgets.*/

Form1.myButton.accessibilityConfig = {
    "a11yLabel": "Label",
    "a11yValue": "Value",
    "a11yHint": "Hint"    
};

Platform Availability

• Available in the IDE
• iOS, Android, SPA, and Desktop Web

---

---

The property enables you to improve the performance of Positional Dimension Animations.

Syntax

enableCache

Type

Boolean

Read/Write

Read + Write

Remarks

The default value for this property is true.

Note: When the property is used, application consumes more memory. The usage of the property enables tradeoff between performance and visual quality of the content. Use the property cautiously.

Example

Form1.widgetID.enableCache = true;

Platform Availability

• Available in the IDE.
• Windows

---

---

id is a unique identifier of Line consisting of alpha numeric characters. Every Line should have a unique id within an Form.

Syntax

id

Type

String

Read/Write

Read only

Example

//Defining the properties for a Line with id:"line".
var lineBasicConf = {
    id: "line1",
    skin: "gradlblskin",
    isVisible: true
};
var lineLayoutConf = {
    margin: [0, 0, 0, 0],
    padding: [3, 3, 3, 3],
    thickness: 25
};
var linePSPConf = {};

//Creating the Line.
var line1 = new kony.ui.Line(lineBasicConf, lineLayoutConf, linePSPConf);

//Reading the id property of Line widget.
alert("Line id ::" + line1.id);

Platform Availability

Available on all platforms

---

---

A custom JSObject with the key value pairs that a developer can use to store the context with the widget. This will help in avoiding the globals to most part of the programming .

Syntax

info

Type

JSObject

Read/Write

Read + Write

Remarks

This is a non-constructor property. You cannot set this property through widget constructor. But you can read and write data to it.

Info property holds any JSObject. Post assigning the JSObject to info property, the JSObject should not be modified. For example,

var inf = {
    a: 'hello'
};
widget.info = inf; //works
widget.info.a = 'hello world';
//This will not update the widget info a property to Hello world. 
//widget.info.a will have old value as hello.

Example

//Defining the properties for a Line with info property.
var lineBasicConf = {
    id: "line1",
    skin: "gradlblskin",
    isVisible: true
};

var lineLayoutConf = {
    margin: [0, 0, 0, 0],
    padding: [3, 3, 3, 3],
    thickness: 25
};

var linePSPConf = {};

//Creating the Line.
var line1 = new kony.ui.Line(lineBasicConf, lineLayoutConf, linePSPConf);
line1.info = {
    key: "Line"
};
//Reading the info property of Line widget.
alert("Line info is ::" + line1.info);

Platform Availability

Available on all platforms

---

---

This property controls the visibility of the line widget on the form.

Syntax

isVisible

Type

Boolean

Read/Write

Read + Write

Remarks

The default value for the property is true.

• If set to false, the widget is not displayed.
• If set to true, the widget is displayed.

This property is not applicable if the widget is placed in a Segment. When the widget is placed in a Segment, the Visibility of the widget is controlled by the data property of the segment.

Example

 

Note: In addition, the visibility of the widget can be controlled using the setVisibility method.

//Creating the Line with isVisible:true.
var lineBasicConf = {
    id: "line",
    skin: "gradlblskin",
    isVisible: true
};

var lineLayoutConf = {
    margin: [0, 0, 0, 0],
    padding: [3, 3, 3, 3],
    thickness: 25
};

var linePSPConf = {};

//Creating the Line.
var line = new kony.ui.Line(lineBasicConf, lineLayoutConf, linePSPConf);

//Reading the isVisible property of Line widget.
alert("Line isVisible ::" + line.id);

Platform Availability

• Available in the IDE
• Available on all platforms

---

---

This property is used to retain the content alignment property value, as it was defined.

Note: Locale-level configurations take priority when invalid values are given to this property, or if it is not defined.

The mirroring widget layout properties should be defined as follows.

function getIsFlexPositionalShouldMirror(widgetRetainFlexPositionPropertiesValue) {
    return (isI18nLayoutConfigEnabled &&
    localeLayoutConfig[defaultLocale]
    ["mirrorFlexPositionalProperties"] == true &&
    !widgetRetainFlexPositionPropertiesValue);
}

The following table illustrates how widgets consider Local flag and Widget flag values.

Properties	Local Flag Value	Widget Flag Value	Action
Mirror/retain FlexPositionProperties	true	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	true	false	Use Mirror FlexPositionProperties since locale-level Mirror is true.
Mirror/retain FlexPositionProperties	true	not specified	Use Mirror FlexPositionProperties since locale-level Mirror is true.
Mirror/retain FlexPositionProperties	false	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	false	false	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	false	not specified	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	not specified	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	not specified	false	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	not specified	not specified	Use the Design/Model-specific default layout.

 

Syntax

retainContentAlignment

Type

Boolean

Read/Write

No (only during widget-construction time)

Example

//This is a generic property that is applicable for various widgets.
//Here, we have shown how to use the retainContentAlignment property for Button widget.
/*You need to make a corresponding use of the 
retainContentAlignment property for other applicable widgets.*/
var btn = new kony.ui.Button({
    "focusSkin": "defBtnFocus",
    "height": "50dp",
    "id": "myButton",
    "isVisible": true,
    "left": "0dp",
    "skin": "defBtnNormal",
    "text": "text always from top left",
    "top": "0dp",
    "width": "260dp",
    "zIndex": 1
}, {
    "contentAlignment": constants.CONTENT_ALIGN_TOP_LEFT,
    "displayText": true,
    "padding": [0, 0, 0, 0],
    "paddingInPixel": false,
    "retainFlexPositionProperties": false,
    "retainContentAlignment": true
}, {});

Platform Availability

• Available in IDE
• Windows 10, iOS, Android, and SPA

---

---

This property is used to retain flex positional property values as they were defined. The flex positional properties are left, right, and padding.

Note: Locale-level configurations take priority when invalid values are given to this property, or if it is not defined.

The mirroring widget layout properties should be defined as follows.

function getIsFlexPositionalShouldMirror(widgetRetainFlexPositionPropertiesValue) {
    return (isI18nLayoutConfigEnabled &&
    localeLayoutConfig[defaultLocale]
    ["mirrorFlexPositionalProperties"] == true &&
    !widgetRetainFlexPositionPropertiesValue);
}

The following table illustrates how widgets consider Local flag and Widget flag values.

Properties	Local Flag Value	Widget Flag Value	Action
Mirror/retain FlexPositionProperties	true	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	true	false	Use Mirror FlexPositionProperties since locale-level Mirror is true.
Mirror/retain FlexPositionProperties	true	not specified	Use Mirror FlexPositionProperties since locale-level Mirror is true.
Mirror/retain FlexPositionProperties	false	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	false	false	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	false	not specified	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	not specified	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	not specified	false	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	not specified	not specified	Use the Design/Model-specific default layout.

 

Syntax

retainFlexPositionProperties

Type

Boolean

Read/Write

No (only during widget-construction time)

Example

//This is a generic property that is applicable for various widgets.
//Here, we have shown how to use the retainFlexPositionProperties property for Button widget.
/*You need to make a corresponding use of the 
retainFlexPositionProperties property for other applicable widgets.*/
var btn = new kony.ui.Button({
    "focusSkin": "defBtnFocus",
    "height": "50dp",
    "id": "myButton",
    "isVisible": true,
    "left": "0dp",
    "skin": "defBtnNormal",
    "text": "always left",
    "top": "0dp",
    "width": "260dp",
    "zIndex": 1
}, {
    "contentAlignment": constants.CONTENT_ALIGN_CENTER,
    "displayText": true,
    "padding": [0, 0, 0, 0],
    "paddingInPixel": false,
    "retainFlexPositionProperties": true,
    "retainContentAlignment": false
}, {});

Platform Availability

• Available in IDE
• Windows 10, iOS, Android, and SPA

---

---

This property is used to convert Flow Horizontal Left to Flow Horizontal Right.

Note: Locale-level configurations take priority when invalid values are given to this property, or if it is not defined.

The mirroring widget layout properties should be defined as follows.

function getIsFlexPositionalShouldMirror(widgetRetainFlexPositionPropertiesValue) {
    return (isI18nLayoutConfigEnabled &&
    localeLayoutConfig[defaultLocale]
    ["mirrorFlexPositionalProperties"] == true &&
    !widgetRetainFlexPositionPropertiesValue);
}

The following table illustrates how widgets consider Local flag and Widget flag values.

Properties	Local Flag Value	Widget Flag Value	Action
Mirror/retain FlexPositionProperties	true	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	true	false	Use Mirror FlexPositionProperties since locale-level Mirror is true.
Mirror/retain FlexPositionProperties	true	not specified	Use Mirror FlexPositionProperties since locale-level Mirror is true.
Mirror/retain FlexPositionProperties	false	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	false	false	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	false	not specified	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	not specified	true	Use the designed layout from widget for all locales. Widget layout overrides everything else.
Mirror/retain FlexPositionProperties	not specified	false	Use the Design/Model-specific default layout.
Mirror/retain FlexPositionProperties	not specified	not specified	Use the Design/Model-specific default layout.

 

Syntax

retainFlowHorizontalAlignment

Type

Boolean

Read/Write

No (only during widget-construction time)

Example

//This is a generic property that is applicable for various widgets.
//Here, we have shown how to use the retainFlowHorizontalAlignment property for Button widget.
/*You need to make a corresponding use of the 
retainFlowHorizontalAlignment property for other applicable widgets. */
var btn = new kony.ui.Button({
 "focusSkin": "defBtnFocus",
 "height": "50dp",
 "id": "myButton",
 "isVisible": true,
 "left": "0dp",
 "skin": "defBtnNormal",
 "text": "always left",
 "top": "0dp",
 "width": "260dp",
 "zIndex": 1
}, {
 "contentAlignment": constants.CONTENT_ALIGN_CENTER,
 "displayText": true,
 "padding": [0, 0, 0, 0],
 "paddingInPixel": false,
 "retainFlexPositionProperties": true,
 "retainContentAlignment": false,
 "retainFlowHorizontalAlignment ": false
}, {});

Platform Availability

• Available in IDE
• Windows 10, iOS, Android, and SPA

---

---

Specifies the look and feel of the Line when not in focus.

Syntax

skin

Type

String

Read/Write

Read + Write

Example

//Creating the Line with skin:"gradlblskin"
var lineBasicConf = {
    id: "line",
    skin: "gradlblskin",
    isVisible: true
};

var lineLayoutConf = {
    margin: [0, 0, 0, 0],
    padding: [3, 3, 3, 3],
    thickness: 25
};

var linePSPConf = {};

//Creating the Line.
var line = new kony.ui.Line(lineBasicConf, lineLayoutConf, linePSPConf);

//Reading the skin property of Line widget
alert("Line skin ::" + line.skin);

Platform Availability

• Available in the IDE
• Available on all platforms

---

---

Specifies the hint text when the cursor hovers over a widget, without clicking it. The text entered in the tooltip appears as a small box when the cursor hovers over a widget.

Syntax

toolTip

Type

String

Read/Write

Read + Write

Example

//Defining the properties of Line with toolTip:sample text
var lineBasicConf = {
    id: "line1",
    isVisible: true,
    skin: "lineSkin",
    focusSkin: "lineFSkin",
    text: "Click Here"
};

var lineLayoutConf = {
    containerWeight: 100,
    padding: [5, 5, 5, 5],
    margin: [5, 5, 5, 5],
    hExpand: true,
    vExpand: false,
    displayText: true
};

var linePSPConf = {
    toolTip: "sample text"
};

//Creating a Line.
var line1 = new kony.ui.Line(lineBasicConf, lineLayoutConf, linePSPConf);

Platform Availability

• Available in the IDE
• This property is available on Windows Tablet

---