1# UIServiceExtensionAbility
2
3## Overview
4
5UIServiceExtensionAbility is an [ExtensionAbility](../reference/apis-ability-kit/js-apis-app-ability-extensionAbility.md) component of the UIService type. It provides UI pages (such as preview pages) and background service capabilities. This component internally holds a UIServiceExtensionContext, which provides a variety of APIs for external systems.
6
7In this document, the component that starts or connects to a UIServiceExtensionAbility is called the client, and the UIServiceExtensionAbility is called the server.
8
9An application can use a UIServiceExtensionAbility in two modes:
10- Call [startUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartuiserviceextensionability13) in the [UIExtensionContext](../reference/apis-ability-kit/js-apis-inner-application-uiExtensionContext.md) class to start a UIServiceExtensionAbility.
11- Call [connectUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextconnectuiserviceextensionability13) in the [UIAbilityContext](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) or [UIExtensionContext](../reference/apis-ability-kit/js-apis-inner-application-uiExtensionContext.md) class to connect to a UIServiceExtensionAbility.
12
13
14> **NOTE**
15>
16> 1. Third-party applications can use a UIServiceExtensionAbility but cannot implement a UIServiceExtensionAbility. (The implementation requires system permissions.)
17>
18> 2. Third-party applications can connect to a UIServiceExtensionAbility provided by a system application only when they gain focus in the foreground.
19>
20> 3. The UIServiceExtensionAbility lifecycle is closely related to the window it binds. It is destroyed once the window is destroyed.
21
22
23## Starting a UIServiceExtensionAbility
24
25An application (client) calls [startUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartuiserviceextensionability13) to start a UIServiceExtensionAbility. Once the UIServiceExtensionAbility is started, its lifecycle is independent of the client. Even if the client is destroyed, the background service remains alive. However, the service is destroyed if the window fails to be created or is destroyed.
26
27
28For details about how to obtain the context, see [Obtaining the Context of UIAbility](uiability-usage.md#obtaining-the-context-of-uiability).
29
30```ts
31import { common, Want } from '@kit.AbilityKit';
32import { BusinessError } from '@kit.BasicServicesKit';
33
34@Entry
35@Component
36struct Index {
37  build() {
38    Column() {
39      Row() {
40        // Create a Start button.
41        Button('start ability')
42          .enabled(true)
43          .onClick(() => {
44            let context = getContext(this) as common.UIAbilityContext;
45            let startWant: Want = {
46              bundleName: 'com.acts.uiserviceextensionability',
47              abilityName: 'UiServiceExtAbility',
48            };
49            try {
50              // Start the UIServiceExtensionAbility.
51              context.startUIServiceExtensionAbility(startWant).then(() => {
52                console.log('startUIServiceExtensionAbility success');
53              }).catch((error: BusinessError) => {
54                console.log('startUIServiceExtensionAbility error', JSON.stringify(error));
55              })
56            } catch (err) {
57              console.log('startUIServiceExtensionAbility failed', JSON.stringify(err));
58            }
59          })
60      }
61    }
62  }
63}
64```
65
66## Connecting to a UIServiceExtensionAbility
67
68The client connects to the server through [connectUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextconnectuiserviceextensionability13) and obtains a [UIServiceProxy](../reference/apis-ability-kit/js-apis-inner-application-uiserviceproxy.md) object. The client calls [sendData()](../reference/apis-ability-kit/js-apis-inner-application-uiserviceproxy.md#uiserviceproxysenddata) of the proxy object to send data to the server. The server calls the system API **onData()** of the UIServiceExtensionAbility class to receive data from the client.
69
70
71```ts
72import { common, Want } from '@kit.AbilityKit';
73import { BusinessError } from '@kit.BasicServicesKit';
74
75@Entry
76@Component
77struct Index {
78  comProxy: common.UIServiceProxy | null = null;
79  connectCallback : common.UIServiceExtensionConnectCallback = {
80    onData:(data: Record<string, Object>) => {
81      console.log("received data", JSON.stringify(data));
82    },
83    onDisconnect:() => {
84      console.log("onDisconnect ");
85    }
86  }
87
88  build() {
89    Column() {
90      Row() {
91        // Create a Connect button.
92        Button("connect ability")
93          .enabled(true)
94          .onClick(() => {
95            let context = getContext(this) as common.UIAbilityContext;
96            let startWant:Want = {
97              bundleName: 'com.acts.uiserviceextensionability',
98              abilityName: 'UiServiceExtAbility',
99            };
100            try {
101            // Connect to the UIServiceExtensionAbility.
102            context.connectUIServiceExtensionAbility(startWant, this.connectCallback).then((proxy: common.UIServiceProxy) => {
103                this.comProxy = proxy;
104                let formData: Record<string, string> = {
105                  'test': 'test'
106                };
107                try {
108                  this.comProxy.sendData(formData);
109                } catch (err) {
110                  console.log('sendData failed', JSON.stringify(err));
111                };
112              }).catch((err: BusinessError) => {
113                console.log("connectUIServiceExtensionAbility failed", JSON.stringify(err));
114              });
115            } catch(err) {
116              console.log("connectUIServiceExtensionAbility failed", JSON.stringify(err));
117            };
118      })
119      }
120  }
121}
122}
123```
124