Truncating Label

Overview

The Truncating Label component is a component without contract. This component is used in place of a Label widget when the Label text must appear truncated in the middle, based on the text length.

The Truncating Label component contains two Label widgets to achieve truncating of the Label text. A developer must assign the full text except for the last four characters to the first Label widget and the last four characters to the second Label widget to use this component.

For example, to truncate the AccountSaving123456 text, a developer must configure the text of the first Label widget as AccountSaving12 and configure the text of the second Label widget 3456. After assigning the text values, the Truncating Label component displays the text as AccountSav…456.

NOTE: The Truncating Label component is used inside the Mobile Banking application.

Contracts and Methods

As the Truncating Label component is a component without a contract and so does not contains any methods or contracts

Usage

To use the Truncating Label component, follow these steps.

1. From Quantum Visualizer, open the application in the Design view.
2. Under Project Explorer, expand the application name > Forms.
3. Open the form to add the component.
4. Navigate to the Templates tab.
5. From the Templates tab, drag and drop the Truncating Label component onto the form.
   The component is added to the form.
6. The Truncating Label component contains two Label widgets. To use this component, a developer must perform the following configurations.
   • Assign the entire Label text to the first Label except for the last four digits.
   • Assign the last four digits to the second Label widget.

   As Truncating Label component is a component without contract, a developer can modify the Label widget properties through the Properties panel in the Quantum Visualizer or the Controller. To set the property from the Controller, follow the steps given below.

   1. Under Project Explorer, expand the application name > Controllers.
   2. Select and open the form controller of the parent of the component.
   3. Set the properties in Controllers as per the requirement. The sample code given below is an example of how to update the text property of a Label widget in a Controller.

      this.view.[labelId].text = '456';