Configuration Guide

Phone Number Widget

Definition

There are two Widgets allowing to configure display/edit of attributes that represents a phone number.

  • Phone Number Input Edit 

  • Phone Number Display

Phone Number Input Edit

Phone Number Display

image-20250626-084000.png


image-20250617-083853.png


Configuration

Properties

Property name

Type

Mandatory

Description

Values (default value in bold)

Input Edit

Display

required

Boolean

NO

Defines if the attribute is mandatory or not.

true, false

check mark

cross mark

placeholderType

Enum

YES

Defines the placeholder type, a phone number example for the specified type.

FIXED_LINE, MOBILE, FIXED_LINE_OR_MOBILE, TOLL_FREE, PREMIUM_RATE, SHARED_COST, VOIP, PERSONAL_NUMBER, PAGER, UAN, VOICEMAIL

check mark

cross mark

defaultCountryISO

String

NO

Defines the default country to use when no phone number is specified. Not case-sensitive.

AD, AE, AF, AG, AI, AL, AM, AN, AO, AQ, AR, AS, AT, AU, AW, AX, AZ, BA, BB, BD, BE, BF, BG, BH, BI, BJ, BL, BM, BN, BO, BQ, BR, BS, BT, BV, BW, BY, BZ, CA, CC, CD, CF, CG, CH, CI, CK, CL, CM, CN, CO, CR, CS, CU, CV, CW, CX, CY, CZ, DE, DJ, DK, DM, DO, DZ, EC, EE, EG, EH, ER, ES, ET, FI, FJ, FK, FM, FO, FR, GA, GB, GD, GE, GF, GG, GH, GI, GL, GM, GN, GP, GQ, GR, GS, GT, GU, GW, GY, HK, HM, HN, HR, HT, HU, ID, IE, IL, IM, IN, IO, IQ, IR, IS, IT, JE, JM, JO, JP, KE, KG, KH, KI, KM, KN, KP, KR, KW, KY, KZ, LA, LB, LC, LI, LK, LR, LS, LT, LU, LV, LY, MA, MC, MD, ME, MF, MG, MH, MK, ML, MM, MN, MO, MP, MQ, MR, MS, MT, MU, MV, MW, MX, MY, MZ, NA, NC, NE, NF, NG, NI, NL, NO, NP, NR, NU, NZ, OM, PA, PE, PF, PG, PH, PK, PL, PM, PN, PR, PS, PT, PW, PY, QA, RE, RO, RS, RU, RW, SA, SB, SC, SD, SE, SG, SH, SI, SJ, SK, SL, SM, SN, SO, SR, SS, ST, SV, SX, SY, SZ, TC, TD, TF, TG, TH, TJ, TK, TL, TM, TN, TO, TR, TT, TV, TW, TZ, UA, UG, UM, US, UY, UZ, VA, VC, VE, VG, VI, VN, VU, WF, WS, YE, YT, ZA, ZM, ZW,

check mark

cross mark

backgroundColor

String

NO

Defines the background color.

#ffffff, standard CSS color value

cross mark

check mark

bold

Boolean

NO

Defines if the value is displayed in bold or not.

true, false

cross mark

check mark

fontSize

String

NO

Defines the displayed size.

INHERIT, XX_SMALL, X_SMALL, SMALL, MEDIUM, LARGE, X_LARGE, XX_LARGE

cross mark

check mark

italic

Boolean

NO

Defines if the value is displayed in italic or not.

true, false

cross mark

check mark

textAlign

String

NO

Defines the text alignment.

LEFT, CENTER, RIGHT

cross mark

check mark

textColor

String

NO

Defines the displayed text color.

#000000, standard CSS color value

cross mark

check mark

underline

Boolean

NO

Defines if the value is underlined or not.

true, false

cross mark

check mark

Example

Phone Number Input Edit

Phone Number Display

image-20250626-083951.png


image-20250617-083853.png
XML
<widget id="phone" xsi:type="ctdbum:AttributeEditorWidgetType">
    <hidden>false</hidden>
    <config>
        <editor>
            <editWidget xsi:type="ctdbum:PhoneEditWidgetType">
                <hidden>false</hidden>
                <config>
                    <required>false</required>
                    <placeholderType>FIXED_LINE</placeholderType>
                    <defaultCountryISO>fr</defaultCountryISO>
                </config>
            </editWidget>
        </editor>
        <label></label>
        <lockedInUi>false</lockedInUi>
        <mode>READ_WRITE</mode>
        <override>true</override>
    </config>
    <attributeId>phoneNumber</attributeId>
</widget>


XML
<widget id="phone" xsi:type="ctdbum:AttributeEditorWidgetType">
    <hidden>false</hidden>
    <config>
        <editor>
            <displayWidget xsi:type="ctdbum:PhoneDisplayWidgetType">
                <hidden>false</hidden>
                <config>
                    <backgroundColor>#ffffff</backgroundColor>
                    <bold>false</bold>
                    <fontSize>INHERIT</fontSize>
                    <italic>false</italic>
                    <textAlign>LEFT</textAlign>
                    <textColor>#000000</textColor>
                    <underline>false</underline>
                </config>
            </displayWidget>
        </editor>
        <label></label>
        <lockedInUi>false</lockedInUi>
        <mode>READ</mode>
        <override>true</override>
    </config>
    <attributeId>phoneNumber</attributeId>
</widget>


  • Features

    Design screens and business features to manage objects.