目录

functionalButtonComponentManager (Scenario-specific Convergent Button Component Management)

This module helps manage the logic of the button component for HarmonyOS apps and atomic services to implement relevant functions.

Since: 4.1.0(11)

Modules to Import

import { functionalButtonComponentManager } from '@kit.ScenarioFusionKit';

OpenType

Defines the function types of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Name Value Description
GET_PHONE_NUMBER 0

Verifies a mobile number quickly.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

GET_REALTIME_PHONENUMBER 1

Verifies a mobile number in real time.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

NOTE

GET_REALTIME_PHONENUMBER is only for internal use since API version 5.0.0(12).

LAUNCH_APP 2

Launches an app.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

OPEN_SETTING 3

Opens the authorization setting page.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

NOTE

OPEN_SETTING no longer evolves since API version 5.0.2(14). You are advised to use PERMISSION_SETTING instead.

CHOOSE_AVATAR 4

Selects an avatar.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

CHOOSE_ADDRESS 5

Selects an address.

Since: 5.0.0(12)

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

CHOOSE_INVOICE_TITLE 6

Selects an invoice title.

Since: 5.0.0(12)

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

REAL_NAME_AUTHENTICATION 7

Verifies real-name information.

Since: 5.0.0(12)

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

NOTE

REAL_NAME_AUTHENTICATION is only for internal use currently.

FACE_AUTHENTICATION 8

Verifies identity information by face.

Since: 5.0.0(12)

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

NOTE

FACE_AUTHENTICATION is only for internal use currently.

CHOOSE_LOCATION 9

Selects a location on a map.

Since: 5.0.0(12)

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

SUBSCRIBE_LIVE_VIEW 10

Subscribes to live view messages.

Since: 5.0.0(12)

NOTE

SUBSCRIBE_LIVE_VIEW is only for internal use currently.

PERMISSION_SETTING 11

Permissions settings.

Since: 5.0.2(14)

Atomic service API: This API can be used in atomic services since API version 5.0.2(14).

REQUEST_SUBSCRIBE_MESSAGE 12

Obtains service updates based on the authorization code.

Since: 6.0.0(20)

Atomic service API: This API can be used in atomic services since API version 6.0.0(20).

SHARE 13

Shares an atomic service.

Since: 6.0.0(20)

Atomic service API: This API can be used in atomic services since API version 6.0.0(20).

FEEDBACK 14

Gives feedback.

Since: 6.0.0(20)

Atomic service API: This API can be used in atomic services since API version 6.0.0(20).

GET_PHONE_NUMBER_AND_RISK_LEVEL 15

Obtains the mobile number and risk level.

Since: 6.0.2(22)

Atomic service API: This API can be used in atomic services since API version 6.0.2(22).

SizeType

Defines the size options of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Name Value Description
DEFAULT 0 Default size.
MINI 1 Small size.

HoverClassType

Defines the effect options when the FunctionalButton component is tapped.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Name Value Description
NONE 0 No effect.
HOVER_CLASS 1 Default effect.

ColorType

Defines the color options of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Name Value Description
DEFAULT 0 Blue.
PRIMARY 1 Green.
WARN 2 Red.

CredentialType(deprecated)

Defines the identity verification options of the FunctionalButton component.

This API is added in version 5.0.0(12) and then deprecated in version 6.0.2(22). There is no substitute API.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 5.0.0(12)

Name Value Description
IDCard 0 ID card.

RealNameAuthenticationInfo(deprecated)

Defines the real-name information verification object required by the FunctionalButton component.

This API is supported since version 5.0.0(12) and deprecated since version 6.0.2(22). No substitute is provided.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 5.0.0(12)

Name Type Read-Only Optional Description
openID string No No Identifier that represents the identity of a HUAWEI ID user when using different types of products. The same user has different OpenIDs for different apps.
realName string No No Name on the ID card.
credentialID Uint8Array No No ID card number.
credentialType(deprecated) CredentialType No Yes ID card type.

StyleOption

Defines style information for the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Name Type Read-Only Optional Description
size SizeType No Yes Button size setting. The default value is functionalButtonComponentManager.SizeType.DEFAULT, with the font size 16 fp.
bgColor ColorType No Yes Button color type. The default value is functionalButtonComponentManager.ColorType.DEFAULT, indicating white text on a blue background.
plain boolean No Yes Indicates whether the button is hollow. The options are true (yes) and false (no). The default value is false.
disabled boolean No Yes Indicates whether the button is disabled. The options are true (yes) and false (no). The default value is false.
loading boolean No Yes Indicates whether to display the loading icon before the button name. The options are true (yes) and false (no). The default value is false.
hoverClass HoverClassType No Yes Style of the button when being tapped. The default value is functionalButtonComponentManager.HoverClassType.HOVER_CLASS, indicating that the tapping effect is enabled.
hoverStartTime number No Yes

Delay before the pressed state appears upon pressing, in milliseconds.

The default value is 0.

Value range: [0, +∞)

NOTE

A value less than 0 evaluates to the value 0.

hoverStayTime number No Yes

Retention time of the pressed state after the finger is lifted, in milliseconds.

The default value is 0.

Value range: [0, +∞)

NOTE

A value less than 0 evaluates to the value 0.

styleConfig ButtonConfig No Yes

Button style settings.

NOTE

If any setting defined in styleConfig conflicts with that defined in StyleOption, the setting in styleConfig prevails.

FunctionalButtonParams

Defines button function and style parameters for the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Name Type Read-Only Optional Description
openType OpenType No No

Button function scenario. The default value is functionalButtonComponentManager.OpenType.GET_PHONE_NUMBER.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

label ResourceStr No No

Text displayed on the button. An empty character string is displayed by default.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

styleOption StyleOption No Yes

Button style.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

NOTE

- For a button, only the style settings defined by styleOption take effect.

- When buttonModifier, textModifier, and loadingProgressModifier are used to set the button style, the corresponding attributes will be overwritten.

appParam AppParam No Yes

Information about the app to be launched. Example format: {bundleName: "xxx", abilityName: "xxx"}

bundleName: bundle name.

abilityName: ability name.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

NOTE

This parameter is mandatory when openType is set to functionalButtonComponentManager.OpenType.LAUNCH_APP.

realNameAuthenticationInfo(deprecated) RealNameAuthenticationInfo No Yes

Information about the real-name information verification button.

Since: 5.0.0(12)

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

NOTE

This API is supported since version 5.0.0(12) and deprecated since version 6.0.2(22). No substitute is provided.

subscribeLiveViewParam SubscribeLiveViewParam No Yes

Information about the live view subscription button.

Since: 5.0.0(12)

permissionListParam Array<Permissions> No Yes

Permission settings button parameters.

Since: 5.0.2(14)

Atomic service API: This API can be used in atomic services since API version 5.0.2(14).

NOTE

For details about the names of the permissions to be set, please refer to Application Permissions.

subSceneId string No Yes

Sub-scenario ID, which is mandatory for obtaining a service updates authorization code. You need to pass the parameter by referring to Service Updates Scenario Templates.

Since: 6.0.0(20)

Atomic service API: This API can be used in atomic services since API version 6.0.0(20).

shareParam ShareParam No Yes

Share button parameters.

Since: 6.0.0(20)

Atomic service API: This API can be used in atomic services since API version 6.0.0(20).

buttonModifier ButtonModifier No Yes

Sets the attributes of a button, such as the style and color of the setup button.

Since: 5.1.0(18)

Atomic service API: This API can be used in atomic services since API version 5.1.0(18).

textModifier TextModifier No Yes

Modifier for setting text attributes, such as the font color, font size, and font weight.

Since: 5.1.0(18)

Atomic service API: This API can be used in atomic services since API version 5.1.0(18).

loadingProgressModifier LoadingProgressModifier No Yes

Modifier for setting loading effect attributes, such as the style, color, and custom content area.

Since: 5.1.0(18)

Atomic service API: This API can be used in atomic services since API version 5.1.0(18).

NOTE

The setting of loadingProgressModifier takes effect only when loading in styleOption is set to true.

GetPhoneNumberResult

Defines the success response for the mobile number quick verification function.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.

Since: 4.1.0(11)

Name Type Read-Only Optional Description
code string No Yes

Temporary sign-in credential (authorization code) of a user.

NOTE

It can be used to obtain the real mobile number upon temporary sign-in. The code is valid for five minutes. For details, please refer to Server-Side Development.

GetRealtimePhoneNumberResult

Defines the success response for the mobile number real-time verification function.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.

Since: 4.1.0(11)

Name Type Read-Only Optional Description
code string No Yes

Temporary sign-in credential (authorization code) of a user.

NOTE

It can be used to obtain the real mobile number upon temporary sign-in. The code is valid for five minutes. For details, please refer to Server-Side Development.

OpenSettingResult

Defines the app permission configuration response after the authorization setting page is opened and then the user is redirected to the app or the authorization setting is completed.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.

Since: 4.1.0(11)

Name Type Read-Only Optional Description
permissions Map<string, boolean> No Yes

Permission dictionary.

In the dictionary, key indicates a permission name, and value indicates whether the permission is enabled. The options of value include true (yes) and false (no).

ChooseAvatarResult

Defines the success response for the avatar selection function.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.

Since: 4.1.0(11)

Name Type Read-Only Optional Description
avatarUri string No Yes

Address of the selected avatar.

NOTE

The address of the cropped image is returned.

AppParam

Defines the bundle name of the app to be launched and the ability name when the FunctionalButton component is used to launch an app.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.

Since: 4.1.0(11)

Name Type Read-Only Optional Description
bundleName ResourceStr No No Bundle name.
abilityName ResourceStr No Yes Ability name. The default value is EntryAbility.

ChooseAddressResult

Defines the response body when the FunctionalButton component is used to select a shipping address.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.

Since: 5.0.0(12)

Name Type Read-Only Optional Description
userName string No No User name.
mobileNumber string No Yes Mobile number.
telNumber string No Yes Fixed-line phone number.
zipCode string No Yes Postal code.
countryCode string No Yes Country/Region code.
provinceName string No Yes Province name.
cityName string No Yes City name.
districtName string No Yes District name.
streetName string No Yes Street name.
detailedAddress string No No Detailed address.

ChooseInvoiceTitleResult

Defines the response body when the FunctionalButton component is used to select an invoice title.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.

Since: 5.0.0(12)

Name Type Read-Only Optional Description
type string No No Invoice type. The options are 0 (individual) and 1 (enterprise).
title string No No Invoice title.
taxNumber string No No Tax ID.
companyAddress string No Yes Company address.
telephone string No Yes Phone number.
bankName string No Yes Bank name.
bankAccount string No Yes Bank account.

RealNameAuthenticationResult

Defines the response body when the FunctionalButton component is used to verify real-name information.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 1001500003 for PCs/2-in-1 devices and returns error code 801 for TVs.

Since: 5.0.0(12)

Name Type Read-Only Optional Description
authCode string No Yes Temporary credential, which is valid for 5 minutes and can be used only once.
openID string No Yes Identifier that represents the identity of a HUAWEI ID user when using different types of products. The same user has different OpenIDs for different apps.

FaceAuthenticationResult

Defines the response body when the FunctionalButton component is used to verify identity information by face.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 1001500003 for PCs/2-in-1 devices and returns error code 801 for TVs.

Since: 5.0.0(12)

Name Type Read-Only Optional Description
authCode string No Yes Temporary credential, which is valid for 5 minutes and can be used only once.
openID string No Yes Identifier that represents the identity of a HUAWEI ID user when using different types of products. The same user has different OpenIDs for different apps.

FaceVerificationResult

Defines the response body when the FunctionalButton component is used to verify identity information by face.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 1001500003 for PCs/2-in-1 devices and returns error code 801 for TVs.

Since: 5.0.0(12)

Name Type Read-Only Optional Description
facialRecognitionVerificationToken string No Yes Token returned after verification success.
state string No Yes state parameter returned in the response body. The value is a string of digits (0-9), letters (a-z or A-Z), dots (.), colons (:), slashes (/), and underscores (). The length limit is 255 characters. The verification rule is ^[0-9a-zA-Z:/.-]{1,255}$. This parameter will be compared with the state parameter in the request body to prevent cross-site attacks.

ChooseLocationResult

Defines the response body when the FunctionalButton component is used to select a location on the map.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.

Since: 5.0.0(12)

Name Type Read-Only Optional Description
name string No No Location name.
longitude number No No Longitude. The value ranges from –180 to 180.
latitude number No No Latitude. The value ranges from –90 to 90.
address string No No Address.

SubscribeLiveViewParam

Defines the subscription event and timer when the FunctionalButton component is used to subscribe to live view messages.

Model restriction: This API can be used only in the stage model.

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 801.

Since: 5.0.0(12)

Name Type Read-Only Optional Description
event string No No

Subscribes to an event.

The value is always SUBSCRIBE_TIMER.

alertTime number No No

Reminder timestamp of the timer, in milliseconds.

NOTE

1. The parameter cannot be empty.

2. The value of startTime must be greater than or equal to alertTime.

3. The value of startTime and that of alertTime must be later than the current time.

4. The difference between startTime and alertTime must be less than or equal to 3600000 (which can be configured in Push Kit).

startTime number No No

Start timestamp of the timer, in milliseconds.

NOTE

1. The parameter cannot be empty.

2. The value of startTime must be greater than or equal to alertTime.

3. The value of startTime and that of alertTime must be later than the current time.

4. The difference between startTime and alertTime must be less than or equal to 3600000 (which can be configured in Push Kit).

SubscribeLiveViewResult

Defines the response body when the FunctionalButton component is used to subscribe to live view messages.

Model restriction: This API can be used only in the stage model.

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 801.

Since: 5.0.0(12)

Name Type Read-Only Optional Description
subscribeId string No No Subscription event ID.

PermissionSettingResult

Defines the response body returned when the FunctionalButton component is used for permission settings. The information is used for a UIAbility/UIExtensionAbility to display a permission settings pop-up the second time.

Before calling this API, call requestPermissionsFromUser first. If the user grants the permissions required when the authorization pop-up is displayed the first time, calling this API will not display the permission settings pop-up.

Only UIAbility/UIExtensionAbility is supported.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.2(14).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.

Since: 5.0.2(14)

Name Type Read-Only Optional Description
permissionResult Array<abilityAccessCtrl.GrantStatus> No No Permission settings result.

RequestSubscribeMessageResult

Defines the response body of the subscription request.

It is available only to atomic services. If the caller of the onRequestSubscribeMessage API is not an atomic service, error code 10008 will be returned.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 6.0.0(20).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.

Since: 6.0.0(20)

Name Type Read-Only Optional Description
code string No No Service updates authorization code, which is used to verify the service and service updates.

ShareParam

Defines atomic service sharing parameters.

It is available only to atomic services. If the caller of the onShare API is not an atomic service, error code 10008 will be returned.

Model restriction: This API can be used only in the stage model.

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.

Since: 6.0.0(20)

Name Type Read-Only Optional Description
description string No Yes

Atomic service description. The default description is used, and you can pass a custom value.

Atomic service API: This API can be used in atomic services since API version 6.0.0(20).

previewUri string No Yes

Preview image of an atomic service, which can be defined as a local file path or code package file path. You need to pass the parameter. If the parameter is left empty, the default atomic service icon will be returned.

Atomic service API: This API can be used in atomic services since API version 6.0.0(20).

uniformDataType uniformTypeDescriptor.UniformDataType No Yes

Atomic service data type. The value range is [HYPERLINK, IMAGE, VIDEO, TEXT, FILE]. The default value is HYPERLINK.

HYPERLINK: shares the current atomic service.

IMAGE: shares an image.

VIDEO: shares a video.

TEXT: shares text.

FILE: shares a file.

Since: 26.0.0

Atomic service API: This API can be used in atomic services since API version 26.0.0.

content string No Yes

Atomic service content to be shared. Content of the link (including links of App Linking created for an atomic service) and text types is passed through this parameter.

HYPERLINK: For this data type, a custom JSON string is used as the value of the content parameter. The string can contain 1 to 1024 characters.

IMAGE: For this data type, an image URI is used as the value of the content parameter.

VIDEO: For this data type, a video URI is used as the value of the content parameter.

TEXT: For this data type, a piece of text is used as the value of the content parameter.

FILE: For this data type, a file URI is used as the value of the content parameter.

Since: 26.0.0

Atomic service API: This API can be used in atomic services since API version 26.0.0.

title string No Yes

Atomic service content share title. If the content is a text or link, you are advised to set title to identify the title of the content. When this parameter is left empty, if the shared content is a piece of text, the text content is used as the value of title; if the shared content is a file, the file name is used as the value of title.

Since: 26.0.0

Atomic service API: This API can be used in atomic services since API version 26.0.0.

GetPhoneNumberAndRiskLevelResult

Defines the response of the request for obtaining the mobile number and risk level.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 6.0.2(22).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 6.0.2(22)

Name Type Read-Only Optional Description
code string No Yes Authorization code for obtaining a user's mobile number and the corresponding risk level, which is returned upon a retrieval success.
errCode number No Yes Error code, which is returned upon a retrieval failure.
errMsg string No Yes Error message, which is returned upon a retrieval failure.

Events

Common events are not supported. Only specific events are supported.

FunctionalButtonController

FunctionalButton component controller, which is used to receive click events of the component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

[h2]onGetPhoneNumber

onGetPhoneNumber(callback: AsyncCallback<GetPhoneNumberResult>): FunctionalButtonController

Registers click events of the FunctionalButton component for mobile number quick verification. An asynchronous callback is used to return the result.

This API depends on Account Kit. For details, please refer to createAuthorizationWithHuaweiIDRequest.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<GetPhoneNumberResult> Yes

Callback used to return the result. If the mobile number is successfully obtained, err is undefined, and data is the temporary sign-in credential (authorization code) of the current account. Otherwise, err is an error object.

NOTE

It can be used to obtain the real mobile number upon temporary sign-in. The code is valid for five minutes. For details, please refer to Server-Side Development.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Build an instance of the FunctionalButton component.
        FunctionalButton({
          params: {
            // OpenType.GET_PHONE_NUMBER indicates that the button is used to verify a mobile number quickly.
            openType: functionalButtonComponentManager.OpenType.GET_PHONE_NUMBER,
            label: 'Verify mobile number',
            // Adjust the button style.
            styleOption: {
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to GET_PHONE_NUMBER, the callback must be onGetPhoneNumber.
          controller: new functionalButtonComponentManager.FunctionalButtonController()
            .onGetPhoneNumber((err, data) => {
              if (err) {
                // Error processing.
                hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', err.code, err.message);
                return;
              }
              // Success processing.
              hilog.info(0x0000, 'testTag', 'succeeded in authenticating');
              // Obtain an authorization code.
              let authorizationCode = data.code;
            })
        })
      }.width('100%')
    }.height('100%')
  }
}

[h2]onGetRealtimePhoneNumber

onGetRealtimePhoneNumber(callback: AsyncCallback<GetRealtimePhoneNumberResult>): FunctionalButtonController

Registers click events of the FunctionalButton component for real-time mobile number verification. An asynchronous callback is used to return the result.

This API depends on Account Kit. For details, please refer to createAuthorizationWithHuaweiIDRequest.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<GetRealtimePhoneNumberResult> Yes

Callback used to return the result. If the mobile number is successfully obtained in real time, err is undefined, and data is the temporary sign-in credential (authorization code) of the current account. Otherwise, err is an error object.

NOTE

It can be used to obtain the real mobile number upon temporary sign-in. The code is valid for five minutes. For details, please refer to Server-Side Development.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Example:

import {FunctionalButton, functionalButtonComponentManager} from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Build an instance of the FunctionalButton component.
        FunctionalButton({
          params: {
            // OpenType.GET_REALTIME_PHONENUMBER indicates that the button is used to verify a mobile number in real time.
            openType: functionalButtonComponentManager.OpenType.GET_REALTIME_PHONENUMBER,
            label: 'Verify mobile number now',
            // Adjust the button style.
            styleOption: {
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to GET_REALTIME_PHONENUMBER, the callback must be onGetRealtimePhoneNumber.
          controller: new functionalButtonComponentManager.FunctionalButtonController()
            .onGetRealtimePhoneNumber((err, data) => {
              if (err) {
                // Error processing.
                hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', err.code, err.message);
                return;
              }
              // Success processing.
              hilog.info(0x0000, 'testTag', 'succeeded in authenticating');
              // Obtain an authorization code.
              let authorizationCode = data.code;
            })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

[h2]onLaunchApp

onLaunchApp(callback: AsyncCallback<void>): FunctionalButtonController

Registers click events of the FunctionalButton component for app launch. An asynchronous callback is used to return the result.

This API depends on Ability Kit. For details, please refer to startAbility.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<void> Yes Callback used to return the result. If the app is successfully launched, err is undefined; otherwise, err is an error object.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Build an instance of the FunctionalButton component.
        FunctionalButton({
          params: {
            // OpenType.LAUNCH_APP indicates that the button is used to launch an app.
            openType: functionalButtonComponentManager.OpenType.LAUNCH_APP,
            label: 'Open APP',
            // When OpenType is set to LAUNCH_APP, appParam is mandatory.
            appParam: {
              bundleName: 'xxx',
              abilityName: 'xxx'
            },
            // Adjust the button style.
            styleOption: {
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to LAUNCH_APP, the callback must be onLaunchApp.
          controller: new functionalButtonComponentManager.FunctionalButtonController().onLaunchApp((err) => {
            if (err) {
              // Error processing.
              hilog.error(0x0000, 'testTag', 'Failed to launch app, error: %{public}d %{public}s', err.code, err.message);
              return;
            }
            // Success processing. In this case, no value is returned.
            hilog.info(0x0000, 'testTag', 'succeeded in launching app');
          })
        })
      }.width('100%')
    }.height('100%')
  }
}

In the preceding information, bundleName indicates the bundle name and abilityName indicates the ability name.

[h2]onOpenSetting

onOpenSetting(callback: AsyncCallback<OpenSettingResult>): FunctionalButtonController

Registers click events of the FunctionalButton component for opening the authorization setting page. An asynchronous callback is used to return the result.

This API depends on Ability Kit. For details, please refer to startAbilityForResult.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<OpenSettingResult> Yes Callback used to return the result. If the authorization setting page is successfully opened, err is undefined, and data is the response returned. Otherwise, err is an error object.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Build an instance of the FunctionalButton component.
        FunctionalButton({
          params: {
            // OpenType.OPEN_SETTING indicates that the button is used to open the authorization setting page.
            openType: functionalButtonComponentManager.OpenType.OPEN_SETTING,
            label: 'Open authorization setting page',
            // Adjust the button style.
            styleOption: {
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to OPEN_SETTING, the callback must be onOpenSetting.
          controller: new functionalButtonComponentManager.FunctionalButtonController().onOpenSetting((err, data) => {
            if (err) {
              // Error processing.
              hilog.error(0x0000, 'testTag', 'Failed to open setting, error: %{public}d %{public}s', err.code, err.message);
              return;
            }
            // Success processing, which is triggered when the app process stops.
            hilog.info(0x0000, 'testTag', 'succeeded in opening setting');
            data.permissions!.forEach((value, key) => {
              hilog.info(0x0000, 'testTag', 'key: %{public}s value: %{public}s', String(key), value);
            });
          })
        })
      }.width('100%')
    }.height('100%')
  }
}

[h2]onChooseAvatar

onChooseAvatar(callback: AsyncCallback<ChooseAvatarResult>): FunctionalButtonController

Registers click events of the FunctionalButton component for avatar selection. An asynchronous callback is used to return the result.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<ChooseAvatarResult> Yes

Callback used to return the result. If the avatar selection is successful, err is undefined, and data is the path of the selected avatar image. Otherwise, err is an error object.

NOTE

The address of the cropped image is returned.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
  // Add the account.png file to the /resources/base/media/ directory. Otherwise, an error message will be displayed, indicating that the file cannot be found.
  @State url: ResourceStr = $r('app.media.account');

  build() {
    Column() {
      // Build an instance of the FunctionalButton component.
      FunctionalButton({
        params: {
          // OpenType.CHOOSE_AVATAR indicates that the button is used to select an avatar.
          openType: functionalButtonComponentManager.OpenType.CHOOSE_AVATAR,
          label: '',
          // Adjust the button style.
          styleOption: {
            styleConfig: new functionalButtonComponentManager.ButtonConfig()
              .type(ButtonType.Normal)
              .backgroundImage(this.url)
              .backgroundImageSize(ImageSize.Cover)
              .width(80)
              .height(80)
              .backgroundColor('#E5E5E5')
          }
        },
        // When OpenType is set to CHOOSE_AVATAR, the callback must be onChooseAvatar.
        controller: new functionalButtonComponentManager.FunctionalButtonController().onChooseAvatar((err, data) => {
          if (err) {
            // Error processing.
            hilog.error(0x0000, 'testTag', 'Failed to choose avatar, error: %{public}d %{public}s', err.code, err.message);
            return;
          }
          // Success processing.
          hilog.info(0x0000, 'testTag', 'succeeded in choosing avatar');
          this.url = data.avatarUri!;
        })
      })
    }
    .padding({ top: 200 })
    .height('100%')
    .width('100%')
  }
}

[h2]onChooseAddress

onChooseAddress(callback: AsyncCallback<ChooseAddressResult>): FunctionalButtonController

Registers click events of the FunctionalButton component for shipping address selection. An asynchronous callback is used to return the result.

This API depends on Account Kit. For details, please refer to chooseAddress.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.

Since: 5.0.0(12)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<ChooseAddressResult> Yes Callback used to return the result. If the shipping address selection is successful, err is undefined, and data is the shipping address selection result. Otherwise, err is an error object.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Build an instance of the FunctionalButton component.
        FunctionalButton({
          params: {
            // OpenType.CHOOSE_ADDRESS indicates that the button is used to select a shipping address.
            openType: functionalButtonComponentManager.OpenType.CHOOSE_ADDRESS,
            label: 'Select shipping address',
            // Adjust the button style.
            styleOption: {
              bgColor:functionalButtonComponentManager.ColorType.DEFAULT,
              size: functionalButtonComponentManager.SizeType.DEFAULT,
              plain: false,
              disabled:false,
              loading: false,
              hoverClass: functionalButtonComponentManager.HoverClassType.HOVER_CLASS,
              hoverStartTime: 0,
              hoverStayTime: 0,
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to CHOOSE_ADDRESS, the callback must be onChooseAddress.
          controller: new functionalButtonComponentManager.FunctionalButtonController()
            .onChooseAddress((err, data) => {
              if (err) {
                // Error processing.
                hilog.error(0x0000, 'testTag', 'Failed to choose address, error: %{public}d %{public}s', err.code, err.message);
                return;
              }
              // Success processing.
              hilog.info(0x0000, 'testTag', 'succeeded in choosing address');
              // Obtain address information.
              let userName: string = data.userName;
              let mobileNumber: string = data.mobileNumber as string;
              let countryCode: string = data.countryCode as string;
              let provinceName: string = data.provinceName as string;
              let cityName: string = data.cityName as string;
              let districtName: string = data.districtName as string;
              let streetName: string = data.streetName as string;
              let detailedAddress: string = data.detailedAddress;
            })
        })
      }.width('100%')
    }.height('100%')
  }
}

[h2]onChooseInvoiceTitle

onChooseInvoiceTitle(callback: AsyncCallback<ChooseInvoiceTitleResult>): FunctionalButtonController

Registers click events of the FunctionalButton component for invoice title selection. An asynchronous callback is used to return the result.

This API depends on Account Kit. For details, please refer to selectInvoiceTitle.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.

Since: 5.0.0(12)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<ChooseInvoiceTitleResult> Yes Callback used to return the result. If the invoice title selection is successful, err is undefined, and data is the invoice title selection result. Otherwise, err is an error object.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Build an instance of the FunctionalButton component.
        FunctionalButton({
          params: {
            // OpenType.CHOOSE_INVOICE_TITLE indicates that the button is used to select an invoice title.
            openType: functionalButtonComponentManager.OpenType.CHOOSE_INVOICE_TITLE,
            label: 'Select invoice title',
            // Adjust the button style.
            styleOption: {
              bgColor:functionalButtonComponentManager.ColorType.DEFAULT,
              size: functionalButtonComponentManager.SizeType.DEFAULT,
              plain: false,
              disabled:false,
              loading: false,
              hoverClass: functionalButtonComponentManager.HoverClassType.HOVER_CLASS,
              hoverStartTime: 0,
              hoverStayTime: 0,
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to CHOOSE_INVOICE_TITLE, the callback must be onChooseInvoiceTitle.
          controller: new functionalButtonComponentManager.FunctionalButtonController()
            .onChooseInvoiceTitle((err, data) => {
              if (err) {
                // Error processing.
                hilog.error(0x0000, 'testTag', 'Failed to obtain invoice title, error: %{public}d %{public}s', err.code, err.message);
                return;
              }
              // Success processing.
              hilog.info(0x0000, 'testTag', 'succeeded in obtaining invoice title');
              // Obtain invoice information.
              let type: string = data.type;
              let title: string = data.title;
              let taxNumber: string = data.taxNumber;
              let companyAddress: string | undefined = data.companyAddress;
              let telephone: string | undefined = data.telephone;
              let bankName: string | undefined = data.bankName;
              let bankAccount: string | undefined = data.bankAccount;
            })
        })
      }.width('100%')
    }.height('100%')
  }
}

[h2]onRealNameAuthentication

onRealNameAuthentication(callback: AsyncCallback<RealNameAuthenticationResult>): FunctionalButtonController

Registers click events of the FunctionalButton component for real-name information verification. An asynchronous callback is used to return the result.

This API depends on Account Kit. For details, please refer to createAuthorizationWithHuaweiIDRequest, AuthenticationController, and executeRequest.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 1001500003 for PCs/2-in-1 devices and returns error code 801 for TVs.

Since: 5.0.0(12)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<RealNameAuthenticationResult> Yes Callback used to return the result. If the real-name information verification is successful, err is undefined, and data is the verification response body that contains authCode and openID. Otherwise, err is an error object.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { http } from '@kit.NetworkKit';
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';

interface Result {
  state?: number;
  realNameLevel?: number;
  verifyResult?: number;
  verifyToken?: string;
}

@Entry
@Component
struct SecondPage {

  obtainRealNameDataInfo(authCode: string, sceneID: number, openID: string, realName: string, idNo: string,
    callback: AsyncCallback<Result>) {
    // Each httpRequest corresponds to an HTTP request task and cannot be reused.
    let httpRequest = http.createHttp();
    // Listen for HTTP response header events. Such events are returned earlier than HTTP responses. You can determine whether to listen for them.
    httpRequest.on('headersReceive', (header) => {
      hilog.info(0x0000, 'testTag', 'header: %{public}s', header as string);
    });
    httpRequest.request(
      // Define EXAMPLE_URL in extraData based on your service needs. You can add parameters to the URL as required.
      'EXAMPLE_URL',
      {
        method: http.RequestMethod.POST,
        // Add header fields based on your service needs.
        header: {
          'Content-Type': 'application/json'
        },
        // Use this field to pass information in a POST request.
        extraData: {
          'authCode': authCode,
          'sceneID': sceneID,
          'openID': openID,
          'realname': realName,
          'idNo': idNo
        },
        expectDataType: http.HttpDataType.STRING,
        usingCache: true,
        priority: 1,
        connectTimeout: 60000,
        readTimeout: 60000,
        usingProtocol: http.HttpProtocol.HTTP1_1
      }, (err, data) => {
      if (!err) {
        let res: Result = JSON.parse(data.result as string);
        callback(undefined, res);
      } else {
        let error: BusinessError = {code: err.code, message: err.message, name: ''};
        callback(error, undefined);
        // Unsubscribe from HTTP Response Header events.
        httpRequest.off('headersReceive');
        // Call destroy() after an HTTP request is complete to release resources.
        httpRequest.destroy();
      }
    });
  }

  build() {
    Row() {
      Column() {
        FunctionalButton({
          params: {
            // OpenType.REAL_NAME_AUTHENTICATION indicates that the button is used for real-name information verification.
            openType: functionalButtonComponentManager.OpenType.REAL_NAME_AUTHENTICATION,
            label: 'Verify real name',
            // Adjust the button style.
            styleOption: {
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to REAL_NAME_AUTHENTICATION, the callback must be onRealNameAuthentication.
          controller: new functionalButtonComponentManager.FunctionalButtonController()
            .onRealNameAuthentication((err, data) => {
              if (err) {
                // Error processing.
                hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', err.code, err.message);
                return;
              }
              // Success processing.
              hilog.info(0x0000, 'testTag', 'succeeded in authenticating');
              // Obtain an authorization code.
              let authCode: string = data.authCode as string;
              let openID: string = data.openID as string;
              // sceneid indicates the scenario ID. The options are as follows: 0 (real-name information verification), 1 (face-based identity verification, which verifies the name, certificate type, certificate number, and face), and 2 (face-based identity verification, which verifies the face only).
              this.obtainRealNameDataInfo(authCode, 0, openID, 'name', 'idNo', (err, data) => {
                if (err) {
                  hilog.error(0x0000, 'testTag', 'Failed to verify, error: %{public}d %{public}s', err.code, err.message);
                  return;
                }
                let state = data.state;
                let realNameLevel = data.realNameLevel;
                let verifyResult = data.verifyResult;
                let verifyToken = data.verifyToken;
                hilog.info(0x0000, 'testTag', 'succeeded in verifying');
              });
            })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

[h2]onFaceAuthentication

onFaceAuthentication(callback: AsyncCallback<FaceAuthenticationResult>): FunctionalButtonController

Registers click events of the FunctionalButton component for performing identity verification by face. An asynchronous callback is used to return the result.

This API depends on Account Kit. For details, please refer to createAuthorizationWithHuaweiIDRequest, AuthenticationController, and executeRequest.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 1001500003 for PCs/2-in-1 devices and returns error code 801 for TVs.

Since: 5.0.0(12)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<FaceAuthenticationResult> Yes Callback used to return the result. If the face-based identity verification is successful, err is undefined, and data is the verification response body that contains authCode and openID. Otherwise, err is an error object.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { http } from '@kit.NetworkKit';
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';

interface Result {
  state?: number;
  realNameLevel?: number;
  verifyResult?: number;
  verifyToken?: string;
}

@Entry
@Component
struct SecondPage {
  obtainFaceVerifyDataInfo(authCode: string, sceneID: number, openID: string, realName: string, idNo: string,
    callback: AsyncCallback<Result>) {
    // Each httpRequest corresponds to an HTTP request task and cannot be reused.
    let httpRequest = http.createHttp();
    // Listen for HTTP response header events. Such events are returned earlier than HTTP responses. You can determine whether to listen for them.
    httpRequest.on('headersReceive', (header) => {
      hilog.info(0x0000, 'testTag', 'header: %{public}s', header as string);
    });
    httpRequest.request(
      // Define EXAMPLE_URL in extraData based on your service needs. You can add parameters to the URL as required.
      'EXAMPLE_URL',
      {
        method: http.RequestMethod.POST,
        // Add header fields based on your service needs.
        header: {
          'Content-Type': 'application/json'
        },
        // Use this field to pass information in a POST request.
        extraData: {
          'authCode': authCode,
          'sceneID': sceneID,
          'openID': openID,
          'realname': realName,
          'idNo': idNo
        },
        expectDataType: http.HttpDataType.STRING,
        usingCache: true,
        priority: 1,
        connectTimeout: 60000,
        readTimeout: 60000,
        usingProtocol: http.HttpProtocol.HTTP1_1
      }, (err, data) => {
      if (!err) {
        let res: Result = JSON.parse(data.result as string);
        callback(undefined, res);
      } else {
        let error: BusinessError = { code: err.code, message: err.message, name: '' };
        callback(error, undefined);
        // Unsubscribe from HTTP Response Header events.
        httpRequest.off('headersReceive');
        // Call destroy() after an HTTP request is complete to release resources.
        httpRequest.destroy();
      }
    });
  }

  build() {
    Row() {
      Column() {
        FunctionalButton({
          params: {
            // OpenType.FACE_AUTHENTICATION indicates that the button is used for face-based identity verification.
            openType: functionalButtonComponentManager.OpenType.FACE_AUTHENTICATION,
            label: 'Verify identity by face',
            // Adjust the button style.
            styleOption: {
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to FACE_AUTHENTICATION, the callback must be onFaceAuthentication.
          controller: new functionalButtonComponentManager.FunctionalButtonController()
            .onFaceAuthentication((err, data) => {
              if (err) {
                // Error processing.
                hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', err.code, err.message);
                return;
              }
              // Success processing.
              hilog.info(0x0000, 'testTag', 'succeeded in authenticating');
              // Obtain an authorization code.
              let authCode: string = data.authCode as string;
              let openID: string = data.openID as string;
              hilog.info(0x0000, 'testTag', 'succeeded in authCode');
              // sceneid indicates the scenario ID. The options are as follows: 0 (real-name information verification), 1 (face-based identity verification, which verifies the name, certificate type, certificate number, and face), and 2 (face-based identity verification, which verifies the face only).
              this.obtainFaceVerifyDataInfo(authCode, 2, openID, '', '', (err, data) => {
                if (err) {
                  hilog.error(0x0000, 'testTag', 'error: %{public}d %{public}s', err.code, err.message);
                  return;
                }
                let verifyToken: string = data.verifyToken as string;
                new functionalButtonComponentManager.FunctionalButtonController().onFaceVerification(verifyToken,
                  (error, data) => {
                    if (error) {
                      // Error processing.
                      hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', error.code, error.message);
                      return;
                    }
                    let facialRecognitionVerificationToken = data.facialRecognitionVerificationToken;
                    let state = data.state;
                    hilog.info(0x0000, 'testTag', 'auth result success');
                  });
              });
            })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

[h2]onFaceVerification

onFaceVerification(verifyToken: string, callback: AsyncCallback<FaceVerificationResult>): void

Registers click events of the FunctionalButton component for performing facial authentication. An asynchronous callback is used to return the result.

This API depends on Account Kit. For details, please refer to createAuthorizationWithHuaweiIDRequest, AuthenticationController, and executeRequest.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 1001500003 for PCs/2-in-1 devices and returns error code 801 for TVs.

Since: 5.0.0(12)

Parameters

Parameter Type Mandatory Description
verifyToken string Yes ID token passed to HMS Core (APK) when an app launches the facial authentication page of HMS Core (APK) for successful authentication result verification. For details, please refer to FacialRecognitionVerificationRequest.
callback AsyncCallback<FaceVerificationResult> Yes Callback used to return the result. If the facial recognition is successfully triggered, err is undefined, and data is the facial recognition result. Otherwise, err is an error object.

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { http } from '@kit.NetworkKit';
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';

interface Result {
  state?: number;
  realNameLevel?: number;
  verifyResult?: number;
  verifyToken?: string;
}

@Entry
@Component
struct SecondPage {
  obtainFaceVerifyDataInfo(authCode: string, sceneID: number, openID: string, realName: string, idNo: string,
    callback: AsyncCallback<Result>) {
    // Each httpRequest corresponds to an HTTP request task and cannot be reused.
    let httpRequest = http.createHttp();
    // Listen for HTTP response header events. Such events are returned earlier than HTTP responses. You can determine whether to listen for them.
    httpRequest.on('headersReceive', (header) => {
      hilog.info(0x0000, 'testTag', 'header: %{public}s', header as string);
    });
    httpRequest.request(
      // Define EXAMPLE_URL in extraData based on your service needs. You can add parameters to the URL as required.
      'EXAMPLE_URL',
      {
        method: http.RequestMethod.POST,
        // Add header fields based on your service needs.
        header: {
          'Content-Type': 'application/json'
        },
        // Use this field to pass information in a POST request.
        extraData: {
          'authCode': authCode,
          'sceneID': sceneID,
          'openID': openID,
          'realname': realName,
          'idNo': idNo
        },
        expectDataType: http.HttpDataType.STRING,
        usingCache: true,
        priority: 1,
        connectTimeout: 60000,
        readTimeout: 60000,
        usingProtocol: http.HttpProtocol.HTTP1_1
      }, (err, data) => {
      if (!err) {
        let res: Result = JSON.parse(data.result as string);
        callback(undefined, res);
      } else {
        let error: BusinessError = { code: err.code, message: err.message, name: '' };
        callback(error, undefined);
        // Unsubscribe from HTTP Response Header events.
        httpRequest.off('headersReceive');
        // Call destroy() after an HTTP request is complete to release resources.
        httpRequest.destroy();
      }
    });
  }

  build() {
    Row() {
      Column() {
        FunctionalButton({
          params: {
            // OpenType.FACE_AUTHENTICATION indicates that the button is used for face-based identity verification.
            openType: functionalButtonComponentManager.OpenType.FACE_AUTHENTICATION,
            label: 'Verify identity by face',
            // Adjust the button style.
            styleOption: {
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to FACE_AUTHENTICATION, the callback must be onFaceAuthentication.
          controller: new functionalButtonComponentManager.FunctionalButtonController()
            .onFaceAuthentication((err, data) => {
              if (err) {
                // Error processing.
                hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', err.code, err.message);
                return;
              }
              // Success processing.
              hilog.info(0x0000, 'testTag', 'succeeded in authenticating');
              // Obtain an authorization code.
              let authCode: string = data.authCode as string;
              let openID: string = data.openID as string;
              hilog.info(0x0000, 'testTag', 'succeeded in authCode');
              // sceneid indicates the scenario ID. The options are as follows: 0 (real-name information verification), 1 (face-based identity verification, which verifies the name, certificate type, certificate number, and face), and 2 (face-based identity verification, which verifies the face only).
              this.obtainFaceVerifyDataInfo(authCode, 2, openID, '', '', (err, data) => {
                if (err) {
                  hilog.error(0x0000, 'testTag', 'error: %{public}d %{public}s', err.code, err.message);
                  return;
                }
                let verifyToken: string = data.verifyToken as string;
                new functionalButtonComponentManager.FunctionalButtonController().onFaceVerification(verifyToken,
                  (error, data) => {
                    if (error) {
                      // Error processing.
                      hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', error.code, error.message);
                      return;
                    }
                    let facialRecognitionVerificationToken = data.facialRecognitionVerificationToken;
                    let state = data.state;
                    hilog.info(0x0000, 'testTag', 'auth result success');
                  });
              });
            })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

[h2]onChooseLocation

onChooseLocation(callback: AsyncCallback<ChooseLocationResult>): FunctionalButtonController

Registers click events of the FunctionalButton component for map location selection. An asynchronous callback is used to return the result.

This API depends on Map Kit. For details, please refer to chooseLocation.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.0(12).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.

Since: 5.0.0(12)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<ChooseLocationResult> Yes Callback used to return the result. If location selection on the map is successful, err is undefined, and data is the location selection result. Otherwise, err is an error object.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Build an instance of the FunctionalButton component.
        FunctionalButton({
          params: {
            // OpenType.CHOOSE_LOCATION indicates that the button is used to select a location on the map.
            openType: functionalButtonComponentManager.OpenType.CHOOSE_LOCATION,
            label: 'Select map location',
            // Adjust the button style.
            styleOption: {
              bgColor:functionalButtonComponentManager.ColorType.DEFAULT,
              size: functionalButtonComponentManager.SizeType.DEFAULT,
              plain: false,
              disabled:false,
              loading: false,
              hoverClass: functionalButtonComponentManager.HoverClassType.HOVER_CLASS,
              hoverStartTime: 0,
              hoverStayTime: 0,
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to CHOOSE_LOCATION, the callback must be onChooseLocation.
          controller: new functionalButtonComponentManager.FunctionalButtonController()
            .onChooseLocation((err, data) => {
              if (err) {
                // Error processing.
                hilog.error(0x0000, 'testTag', 'Failed to choose location, error: %{public}d %{public}s', err.code, err.message);
                return;
              }
              // Success processing.
              hilog.info(0x0000, 'testTag', 'succeeded in choosing location');
              let name: string = data.name;
              let address: string = data.address;
              let longitude: number = data.longitude;
              let latitude: number = data.latitude;
            })
        })
      }.width('100%')
    }.height('100%')
  }
}

[h2]onSubscribeLiveView

onSubscribeLiveView(callback: AsyncCallback<SubscribeLiveViewResult>): FunctionalButtonController

Registers click events of the FunctionalButton component for live view subscription. An asynchronous callback is used to return the result.

Model restriction: This API can be used only in the stage model.

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 801.

Since: 5.0.0(12)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<SubscribeLiveViewResult> Yes Callback used to return the result. If live view subscription is successfully triggered, err is undefined, and data is the subscription result. Otherwise, err is an error object.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Error codes

For details about the error codes, please refer to ArkTS Component Error Codes.

ID Error Message
1003500012 The number of subscription times exceeds the upper limit of 2000.
1003500013 Invalid event type.
1003500014 Time exceeds valid period.
1003500015 Subscribe failed.
1003500016 Request subscribe liveView exceed.

Example:

import { hilog } from '@kit.PerformanceAnalysisKit';
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Build an instance of the FunctionalButton component.
        FunctionalButton({
          params: {
            // OpenType.SUBSCRIBE_LIVE_VIEW indicates that the button is used for live view subscription.
            openType: functionalButtonComponentManager.OpenType.SUBSCRIBE_LIVE_VIEW,
            label: 'Reserve purchase',
            // Adjust the button style.
            styleOption: {
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            },
            subscribeLiveViewParam: {
              event: 'SUBSCRIBE_TIMER',
              alertTime: 172178838111,
              startTime: 172170198111
            }
          },
          // When OpenType is set to SUBSCRIBE_LIVE_VIEW, the callback must be onSubscribeLiveView.
          controller: new functionalButtonComponentManager.FunctionalButtonController().onSubscribeLiveView((err,
            data) => {
            if (err) {
              // Error processing.
              hilog.error(0x0000, 'testTag', `Failed to subscribe LiveView, error code is: ${err?.code} message is ${err?.message}`);
              return;
            }
            let subscribeId = data.subscribeId;
            // Success processing.
            hilog.info(0x0000, 'testTag', 'succeeded in subscribing LiveView');
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

[h2]onPermissionSetting

onPermissionSetting(callback: AsyncCallback<PermissionSettingResult>): FunctionalButtonController

Registers click events of the FunctionalButton component for permission settings. An asynchronous callback is used to return the result.

This API depends on Ability Kit. For details, please refer to requestPermissionOnSetting.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 5.0.2(14).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.

Since: 5.0.2(14)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<PermissionSettingResult> Yes Callback used to return the result. If permission setting is triggered successfully, err is undefined, and data is the permission setting result. Otherwise, err is an error object.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { abilityAccessCtrl, common, PermissionRequestResult } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({ space: 3 }) {
        // Call the Button API of requestPermissionsFromUser.
        Button('Request user authorization')
          .fontSize(20)
          .onClick(() => {
            let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
            let context: Context = this.getUIContext().getHostContext() as common.UIAbilityContext;
            try {
              // Add the ohos.permission.READ_CALENDAR and ohos.permission.WRITE_CALENDAR permissions to the module.json5 file.
              atManager.requestPermissionsFromUser(context,
                ['ohos.permission.READ_CALENDAR', 'ohos.permission.WRITE_CALENDAR'],
                (err: BusinessError, data: PermissionRequestResult) => {
                  if (err) {
                    hilog.error(0x0000, 'testTag', 'failed in requesting Permissions from user : %{public}d %{public}s',
                      err.code, err.message);
                  } else {
                   hilog.info(0x0000, 'testTag', 'data permissions: %{public}s', data.permissions?.join(','));
                   hilog.info(0x0000, 'testTag', 'data authResults: %{public}s', data.authResults?.join(','));
                   hilog.info(0x0000, 'testTag', 'data dialogShownResults: %{public}s', data.dialogShownResults?.join(','));
                  }
                });
            } catch (err) {
              hilog.error(0x0000, 'testTag', 'error: %{public}d %{public}s', err.code, err.message);
            }
          })

        // Build an instance of the FunctionalButton component.
        FunctionalButton({
          params: {
            // OpenType.PERMISSION_SETTING indicates that the button is used to set permissions.
            openType: functionalButtonComponentManager.OpenType.PERMISSION_SETTING,
            label: 'Permission settings',
            permissionListParam: ['ohos.permission.READ_CALENDAR', 'ohos.permission.WRITE_CALENDAR'],
            // Adjust the button style.
            styleOption: {
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to PERMISSION_SETTING, the callback must be onPermissionSetting.
          controller: new functionalButtonComponentManager.FunctionalButtonController().onPermissionSetting((err,
            data) => {
            if (err) {
              // Error processing.
              hilog.error(0x0000, 'testTag', 'Failed to set permission, error: %{public}d %{public}s', err.code, err.message);
              return;
            }
            // Success processing.
            hilog.info(0x0000, 'testTag', 'succeeded in setting permission ');
            let result = data.permissionResult;
            result.forEach(res => {
              hilog.info(0x0000, 'testTag', 'data: %{public}s', String(res));
            });
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

[h2]onRequestSubscribeMessage

onRequestSubscribeMessage(callback: AsyncCallback<RequestSubscribeMessageResult>): FunctionalButtonController

Registers click events of the FunctionalButton component for the service updates authorization code button. An asynchronous callback is used to return the result.

This API can be used in atomic services. If the caller is not an atomic service, error code 10008 will be returned.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 6.0.0(20).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.

Since: 6.0.0(20)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<RequestSubscribeMessageResult> Yes Callback used to return the result. If the service updates authorization code button is successfully tapped, err is undefined, and data is the code that is returned. Otherwise, err is an error object.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Error codes

For details about the error codes, please refer to ArkTS Component Error Codes.

ID Error Message
10004 Internal error.
10008 Not atomic service.

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Build an instance of the FunctionalButton component.
        FunctionalButton({
          params: {
            // OpenType.REQUEST_SUBSCRIBE_MESSAGE indicates that the button is used to obtain a service updates authorization code.
            openType: functionalButtonComponentManager.OpenType.REQUEST_SUBSCRIBE_MESSAGE,
            label: 'Get service updates by authorization code',
            // The subSceneId parameter is mandatory to obtain a service updates authorization code.
            subSceneId: '',
            // Adjust the button style.
            styleOption: {
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to REQUEST_SUBSCRIBE_MESSAGE, the callback must be onRequestSubscribeMessage.
          controller: new functionalButtonComponentManager.FunctionalButtonController()
            .onRequestSubscribeMessage((err, data) => {
              if (err) {
                // Error processing.
                hilog.error(0x0000, 'testTag', 'Failed to request subscribe message, error: %{public}d %{public}s', err.code, err.message);
                return;
              }
              // Success processing.
              hilog.info(0x0000, 'testTag', 'succeeded in requesting subscribe message');
              // Process the service updates code.
              let code = data.code;
            })
        })
      }.width('100%')
    }.height('100%')
  }
}

[h2]onShare

onShare(callback: AsyncCallback<void>): FunctionalButtonController

Registers click events of the FunctionalButton component for atomic service sharing. An asynchronous callback is used to return the result.

This API can be used in atomic services. If the caller is not an atomic service, error code 10008 will be returned.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 6.0.0(20).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.

Since: 6.0.0(20)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<void> Yes Callback used to return the result. If the share button is successfully tapped, err is undefined. Otherwise, err is an error object.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Error codes

For details about the error codes, please refer to ArkTS Component Error Codes.

ID Error Message
10004 Internal error.
10006 Failed to get data.
10008 Not atomic service.
1007601001

Invalid share parameter value. Possible causes: 1. The uniformDataType parameter verification failed; 2. Invalid content parameter format.

Applicable versions: 26.0.0+

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Build an instance of the FunctionalButton component.
        FunctionalButton({
          params: {
            // OpenType.SHARE indicates that the button is used to display the sharing page.
            openType: functionalButtonComponentManager.OpenType.SHARE,
            label: 'Share atomic service',
            shareParam: {
              previewUri: '',
              description: ''
            },
            // Adjust the button style.
            styleOption: {
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to SHARE, the callback must be onShare.
          controller: new functionalButtonComponentManager.FunctionalButtonController()
            .onShare((err) => {
              if (err) {
                // Error processing.
                hilog.error(0x0000, 'testTag', 'Failed to pull up the sharing page, error: %{public}d %{public}s', err.code, err.message);
                return;
              }
              // Success processing.
              hilog.info(0x0000, 'testTag', 'succeeded in pulling up the sharing page');
            })
        })
      }.width('100%')
    }.height('100%')
  }
}

[h2]onFeedback

onFeedback(callback: AsyncCallback<void>): FunctionalButtonController

Registers click events of the FunctionalButton component for feedback. An asynchronous callback is used to return the result.

This API can be used in atomic services. If the caller is not an atomic service, error code 10008 will be returned.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 6.0.0(20).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.

Since: 6.0.0(20)

Parameters

Parameter Type Mandatory Description
callback AsyncCallback<void> Yes Callback used to return the result. If the feedback button is successfully tapped, err is undefined. Otherwise, err is an error object.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Error codes

For details about the error codes, please refer to ArkTS Component Error Codes.

ID Error Message
10008 Not atomic service.

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Build an instance of the FunctionalButton component.
        FunctionalButton({
          params: {
            // OpenType.FEEDBACK indicates that the button is used to open the feedback page.
            openType: functionalButtonComponentManager.OpenType.FEEDBACK,
            label: 'Feedback and complain',
            // Adjust the button style.
            styleOption: {
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to FEEDBACK, the callback must be onFeedback.
          controller: new functionalButtonComponentManager.FunctionalButtonController()
            .onFeedback((err) => {
              if (err) {
                // Error processing.
                hilog.error(0x0000, 'testTag', 'Failed to pull up the feedback page, error: %{public}d %{public}s', err.code, err.message);
                return;
              }
              // Success processing.
              hilog.info(0x0000, 'testTag', 'succeeded in pulling up the feedback page');
            })
        })
      }.width('100%')
    }.height('100%')
  }
}

[h2]onGetPhoneNumberAndRiskLevel

onGetPhoneNumberAndRiskLevel(callback: Callback<GetPhoneNumberAndRiskLevelResult>): FunctionalButtonController

Registers click events of the FunctionalButton component for obtaining a user's mobile number and the corresponding risk level. A synchronous callback is used to return the result.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 6.0.2(22).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 6.0.2(22)

Parameters

Parameter Type Mandatory Description
callback Callback<GetPhoneNumberAndRiskLevelResult> Yes Callback function, which is used to return the authorization code for obtaining a user's mobile number and the corresponding risk level.

Returns

Type Description
FunctionalButtonController FunctionalButton component controller.

Example:

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Build an instance of the FunctionalButton component.
        FunctionalButton({
          params: {
            // OpenType.GET_PHONE_NUMBER_AND_RISK_LEVEL indicates that the button is used to obtain a user's mobile number and the corresponding risk level.
            openType: functionalButtonComponentManager.OpenType.GET_PHONE_NUMBER_AND_RISK_LEVEL,
            label: 'Obtain mobile number and risk level',
            // Adjust the button style.
            styleOption: {
              styleConfig: new functionalButtonComponentManager.ButtonConfig()
                .fontSize(20)
            }
          },
          // When OpenType is set to GET_PHONE_NUMBER_AND_RISK_LEVEL, the callback must be onGetPhoneNumberAndRiskLevel.
          controller: new functionalButtonComponentManager.FunctionalButtonController()
            .onGetPhoneNumberAndRiskLevel((data) => {
              if (data?.errCode) {
                // Error processing.
                hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', data?.errCode, data?.errMsg);
                return;
              }
              // Success processing.
              hilog.info(0x0000, 'testTag', 'succeeded in authentication');
              // Authorization code processing.
              let authorizationCode = data?.code;
            })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

ButtonConfig

Provides methods for implementing custom attributes of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

[h2]type

type(value: ButtonType): ButtonConfig

Sets the display style attribute of FunctionalButton.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value ButtonType Yes

Button type.

The default value is ButtonType.Capsule.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]stateEffect

stateEffect(value: boolean): ButtonConfig

Specifies whether to enable the pressed state effect when the FunctionalButton component is tapped.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value boolean Yes

Indicates whether to display a visual effect when the button is tapped. The options are true (yes) and false (no).

The default value is true.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]fontColor

fontColor(value: ResourceColor): ButtonConfig

Sets the font color attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value ResourceColor Yes

Sets the font color.

The default value is #ffffff.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]fontSize

fontSize(value: Length): ButtonConfig

Sets the font size attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Length Yes

Font size. If Length is of the number type, the unit fp is used.

The default value is 16, in fp. The value cannot be a percentage.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]fontWeight

fontWeight(value: string | number | FontWeight): ButtonConfig

Sets the font weight attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value string | number | FontWeight Yes

Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is 400. A larger value indicates a larger font weight. For the string type, only strings that represent a number, for example, 400, and the following enumerated values of FontWeight are supported: bold, bolder, lighter, regular, medium, and normal.

The default value is FontWeight.Normal.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]fontStyle

fontStyle(value: FontStyle): ButtonConfig

Sets the font style attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value FontStyle Yes

Sets the font style.

The default value is FontStyle.Normal.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]fontFamily

fontFamily(value: string | Resource): ButtonConfig

Sets the font attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value string | Resource Yes Font list. The default font is HarmonyOS Sans. The HarmonyOS Sans font and registered custom fonts are supported.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]width

width(value: Length): ButtonConfig

Sets the width attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Length Yes Width of the component. By default, the width required to fully hold the component content is used.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]height

height(value: Length): ButtonConfig

Sets the height attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Length Yes Height of the component. By default, the height required to fully hold the component content is used.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]size

size(value: SizeOptions): ButtonConfig

Sets the size attribute (width and height) of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value SizeOptions Yes

Sets the size of the component. Example:

{

width: 20,

height: 50

}

The unit is vp.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]constraintSize

constraintSize(value: ConstraintSizeOptions): ButtonConfig

Sets the constraint size attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value ConstraintSizeOptions Yes

Constraint size of the component, which is used to limit the size range during component layout. constraintSize takes precedence over width and height. For details about the value, please refer to constraintSize.

Default value:

{

minWidth: 0,

maxWidth: Infinity,

minHeight: 0,

maxHeight: Infinity

}

The unit is vp.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]padding

padding(value: Length | Padding): ButtonConfig

Sets the padding attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Length | Padding Yes

Padding of the component.

When the parameter is of the Length type, the setting takes effect for all four paddings.

The default value is {left: 16, right: 16}.

The unit is vp.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]margin

margin(value: Length | Padding): ButtonConfig

Sets the margin attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Length | Padding Yes

Margin.

When the parameter is of the Length type, the setting takes effect for all four margins.

The default value is 0.

The unit is vp.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]backgroundColor

backgroundColor(value: ResourceColor): ButtonConfig

Sets the background color attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value ResourceColor Yes

Background color of a component.

The default value is #ff007dff.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]backgroundImage

backgroundImage(src: ResourceStr, repeat?: ImageRepeat): ButtonConfig

Sets the background image attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
src ResourceStr Yes Image address, which can be the address of an online or local image. SVG images are not supported.
repeat ImageRepeat No Indicates whether the background image is repeated. By default, the background image is not repeated. If the set image has a transparent background and backgroundColor is set, the image is overlaid on the background color.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]backgroundImageSize

backgroundImageSize(value: SizeOptions | ImageSize): ButtonConfig

Width and height of the background image of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value SizeOptions | ImageSize Yes

Width and height of the background image. If the input is a {width: Length, height: Length} object and only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.

The value range of width and height is [0, +∞).

The default value is ImageSize.Auto.

NOTE

A value less than 0 evaluates to the value 0. If height is set but width is not, the image width is adjusted based on the original aspect ratio of the image.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]backgroundImagePosition

backgroundImagePosition(value: Position | Alignment): ButtonConfig

Sets the display position attribute of the background image of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Position | Alignment Yes

Position of the background image in the component, that is, the coordinates relative to the upper left corner of the component. The unit is vp.

Default value:

{

x: 0,

y: 0

}

When x and y are set in percentage, the offset is calculated based on the width and height of the component.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]opacity

opacity(value: number | Resource): ButtonConfig

Sets the opacity of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value number | Resource Yes

Opacity of a component. The value ranges from 0 to 1. The value 1 means opaque and is the default value, and 0 means completely transparent.

NOTE

A component can inherit the opacity setting from its parent component.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]border

border(value: BorderOptions): ButtonConfig

Sets the width, color, rounded corner radius, and style attributes of boarders for the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value BorderOptions Yes

Unified border style.

- width: border width.

- color: border color.

- radius: radius of the rounded corner of the border.

- style: border style.

NOTE

The default value is 0, indicating that the border is not displayed.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]borderStyle

borderStyle(value: BorderStyle | EdgeStyles): ButtonConfig

Sets the border style attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value BorderStyle | EdgeStyles Yes

Border style.

The default value is BorderStyle.Solid.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]borderWidth

borderWidth(value: Length | EdgeWidths): ButtonConfig

Sets the border width attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Length | EdgeWidths Yes

Border width of the component. This parameter cannot be set in percentage.

The default value is 1, in vp.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]borderColor

borderColor(value: ResourceColor | EdgeColors): ButtonConfig

Sets the border color attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value ResourceColor | EdgeColors Yes

Border color.

The default value is #000000.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]borderRadius

borderRadius(value: Length | BorderRadiuses): ButtonConfig

Sets the border rounded corner radius attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Length | BorderRadiuses Yes Border radius. The percentage format is not supported.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]borderImage

borderImage(value: BorderImageOption): ButtonConfig

Sets the border image attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value BorderImageOption Yes

Border image or border gradient.

This API is supported in ArkTS widgets.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]scale

scale(value: ScaleOptions): ButtonConfig

Sets the zoom attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value ScaleOptions Yes

Scale ratio along the X axis, Y axis, and Z axis. The default value is 1.0. centerX and centerY are used to set the scale center point.

Default value:

{

x: 1.0,

y: 1.0,

z: 1.0,

centerX:'0.5',

centerY:'0.5'

}

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]align

align(value: Alignment): ButtonConfig

Sets the alignment attribute of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Alignment Yes

Alignment mode of the component content. This attribute is valid only when the configured width or height exceeds the component size.

The default value is Alignment.Center.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]markAnchor

markAnchor(value: Position): ButtonConfig

Sets the anchor for locating the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Position Yes

Anchor of the component for moving the component with its top start edge as the reference point. The unit is vp.

Default value:

{

x: 0,

y: 1

}

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]offset

offset(value: Position): ButtonConfig

Sets the offset coordinates of the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Position Yes

Anchor of the component for moving the component with its top start edge as the reference point. The unit is vp.

Default value:

{

x: 0,

y: 1

}

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]enabled

enabled(value: boolean): ButtonConfig

Sets whether to disable the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value boolean Yes

Indicates whether the security component is interactive. true: The component is interactive and responds to operations such as clicks.

false: The component is non-interactive and does not respond to operations such as clicks.

The default value is true.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]loadingColor

loadingColor(value: ResourceColor): ButtonConfig

Sets the color attribute of the LoadingProgress icon for the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value ResourceColor Yes

Loading progress icon color. The default value is #FFFFFF.

NOTE

If this parameter is set to an abnormal value, the value #ff666666 is used.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]loadingWidth

loadingWidth(value: Length): ButtonConfig

Sets the width attribute of the LoadingProgress icon for the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Length Yes

Icon width. The default value is 20, in vp.

Value range: (-∞, +∞)

If this parameter is set to a negative value, the width cannot exceed the button area. If this parameter is set to a positive value, the width is not limited by the button area. Enter a proper value.

NOTE

The icon in LoadingProgress is always a square. The edge length is the smaller value between loadingWidth and loadingHeight.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]loadingHeight

loadingHeight(value: Length): ButtonConfig

Sets the height attribute of the LoadingProgress icon for the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Length Yes

Icon height. The default value is 20, in vp.

Value range: (-∞, +∞)

If this parameter is set to a negative value, the height cannot exceed the button area. If this parameter is set to a positive value, the height is not limited by the button area. Enter a proper value.

NOTE

The icon in LoadingProgress is always a square. The edge length is the smaller value between loadingWidth and loadingHeight.

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]loadingPadding

loadingPadding(value: Length | Padding): ButtonConfig

Sets the padding attribute of the LoadingProgress icon for the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Length | Padding Yes

Padding of the icon. The unit is vp.

The default value is 0.

Value range: (-∞, +∞)

Returns

Type Description
ButtonConfig ButtonConfig object.

[h2]loadingMargin

loadingMargin(value: Length | Padding): ButtonConfig

Sets the margin attribute of the LoadingProgress icon for the FunctionalButton component.

Model restriction: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 4.1.0(11).

System capability: SystemCapability.AtomicserviceComponent.UIComponent

Since: 4.1.0(11)

Parameters

Parameter Type Mandatory Description
value Length | Padding Yes

Margin of the icon. The unit is vp.

The default value is {left: -2, right: 2}.

Value range: (-∞, +∞)

Returns

Type Description
ButtonConfig ButtonConfig object.

Examples

[h2]Example 1 (Using a Custom Modifier to Set the Style for a Scenario-Specific Button)

import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { ButtonModifier, LoadingProgressModifier, TextModifier } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Build an instance of the FunctionalButton component.
        FunctionalButton({
          params: {
            // OpenType.GET_PHONE_NUMBER indicates that the button is used to verify a mobile number quickly.
            openType: functionalButtonComponentManager.OpenType.GET_PHONE_NUMBER,
            label: 'Verify mobile number',
            // Adjust the button style.
            styleOption: {
              loading: true
            },
            textModifier: new TextModifier().fontColor(Color.Pink),
            buttonModifier: new ButtonModifier().backgroundColor(Color.Green),
            loadingProgressModifier: new LoadingProgressModifier().width(20).height(20)
          },
          // When OpenType is set to GET_PHONE_NUMBER, the callback must be onGetPhoneNumber.
          controller: new functionalButtonComponentManager.FunctionalButtonController()
            .onGetPhoneNumber((err, data) => {
              if (err) {
                // Error processing.
                hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', err.code, err.message);
                return;
              }
              // Success processing.
              hilog.info(0x0000, 'testTag', 'succeeded in authenticating');
              // Process the authorization code.
              let authorizationCode = data.code;
            })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}