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

Configuration

Properties

Property name	Type	Mandatory	Description	Values (default value in bold)
required	`Boolean`	NO	Defines if the attribute is mandatory or not.	true, false
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
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,
backgroundColor	`String`	NO	Defines the background color.	#ffffff, standard CSS color value
bold	`Boolean`	NO	Defines if the value is displayed in bold or not.	true, false
fontSize	`String`	NO	Defines the displayed size.	INHERIT, XX_SMALL, X_SMALL, SMALL, MEDIUM, LARGE, X_LARGE, XX_LARGE
italic	`Boolean`	NO	Defines if the value is displayed in italic or not.	true, false
textAlign	`String`	NO	Defines the text alignment.	LEFT, CENTER, RIGHT
textColor	`String`	NO	Defines the displayed text color.	#000000, standard CSS color value
underline	`Boolean`	NO	Defines if the value is underlined or not.	true, false

Example

Phone Number Input Edit

Phone Number Display

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>

Configuration

Properties

Example

Read Next