1# AutoFillExtensionContext (System API)
2
3The **AutoFillExtensionContext** module, inherited from [ExtensionContext](js-apis-inner-application-extensionContext.md), provides the context environment for the AutoFillExtensionAbility.
4
5> **NOTE**
6>
7> The initial APIs of this module are supported since API version 11. Newly added APIs will be marked with a superscript to indicate their earliest API version.
8> The APIs of this module can be used only in the stage model.
9> The APIs provided by this module are system APIs.
10
11## Usage
12
13Before using the **AutoFillExtensionContext** module, you must define a child class that inherits from **AutoFillExtensionAbility**.
14
15```ts
16import { AutoFillExtensionAbility } from '@kit.AbilityKit';
17
18class MyAutoFillExtensionAbility extends AutoFillExtensionAbility {
19  onCreate() {
20    let AutoFillExtensionContext = this.context;
21  }
22}
23```
24
25## AutoFillExtensionContext.reloadInModal<sup>12+</sup>
26
27reloadInModal(customData: CustomData): Promise\<void>
28
29Starts a modal page.
30
31**System capability**: SystemCapability.Ability.AbilityRuntime.AbilityCore
32
33**Parameters**
34
35| Name    | Type                                                     | Mandatory | Description                        |
36| ---------- | --------------------------------------------------------- | ---- | ---------------------------- |
37| customData | [CustomData](js-apis-inner-application-customData-sys.md) | Yes  | Custom information for starting the modal page. |
38
39**Return value**
40
41| Type               | Description                     |
42| ------------------- | ------------------------- |
43| Promise&lt;void&gt; | Promise that returns no value. |
44
45**Error codes**
46
47For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [Ability Error Codes](errorcode-ability.md).
48
49| ID | Error Message                                                    |
50| -------- | ------------------------------------------------------------ |
51| 202      | Not System App. Interface caller is not a system app.        |
52| 401      | If the input parameter is not valid parameter.               |
53| 16000011 | The context does not exist.                                  |
54| 16000050 | Internal error.                                              |
55
56**Example**
57
58The autofill service is triggered when a user touches the account and password text box, and an account selection page is displayed in the **onFillRequest** lifecycle of the [AutoFillExtensionAbility](js-apis-app-ability-autoFillExtensionAbility-sys.md).
59
60When an account is selected, **reloadInModal** is called to trigger the autofill service again, and a modal page is started in the** onFillRequest** lifecycle of the AutoFillExtensionAbility.
61
62```ts
63// AutoFillAbility.ts
64import { AutoFillExtensionAbility, autoFillManager, UIExtensionContentSession } from '@kit.AbilityKit';
65import { hilog } from '@kit.PerformanceAnalysisKit';
66
67export default class AutoFillAbility extends AutoFillExtensionAbility {
68  // ...
69  onFillRequest(session: UIExtensionContentSession,
70                request: autoFillManager.FillRequest,
71                callback: autoFillManager.FillRequestCallback) {
72    hilog.info(0x0000, 'testTag', '%{public}s', 'autofill onFillRequest');
73    try {
74      let storage_fill: LocalStorage = new LocalStorage(
75        {
76          'session': session,
77          'message': "AutoFill Page",
78          'fillCallback': callback,
79          'viewData': request.viewData,
80          'autoFillExtensionContext': this.context,
81          'customData': request.customData
82        });
83      if (request.customData == undefined) {
84        // Load the autofill processing page.
85        session.loadContent('pages/AccountPage', storage_fill);
86      } else {
87        // Start a modal page.
88        session.loadContent('pages/ReloadInModal', storage_fill);
89      }
90    } catch (err) {
91      hilog.error(0x0000, 'testTag', '%{public}s', 'autofill failed to load content');
92    }
93  }
94}
95```
96
97When the user selects an account on the account selection page, the **reloadInModal** API is called.
98
99```ts
100// AccountPage.ets
101import { autoFillManager, common } from '@kit.AbilityKit';
102import { BusinessError } from '@kit.BasicServicesKit';
103
104let storage: LocalStorage = LocalStorage.getShared();
105let viewData: autoFillManager.ViewData | undefined = storage.get<autoFillManager.ViewData>('viewData');
106let context: common.AutoFillExtensionContext | undefined = storage.get<common.AutoFillExtensionContext>('autoFillExtensionContext');
107
108@Entry
109@Component
110struct AccountPage {
111  build() {
112    Row() {
113      Column() {
114        List({ space: 10, initialIndex: 0 }) {
115          ListItem() {
116            Text('HelloWorld789456')
117              .width('100%')
118              .height(40)
119              .fontSize(16)
120              .textAlign(TextAlign.Center)
121              .borderRadius(5)
122          }
123          .onClick(() => {
124            if (viewData != undefined) {
125              if (context != undefined) {
126                context.reloadInModal({ data: { viewData: 20, text: 'HelloWorld789456' } }).then(() => {
127                  console.info('reloadInModal successfully.')
128                }).catch((err: BusinessError) => {
129                  console.error('reloadInModal failed.')
130                })
131              }
132            }
133          })
134        }
135        // ...
136      }
137      .width('100%')
138      .shadow(ShadowStyle.OUTER_FLOATING_SM)
139    }
140    .height('100%')
141    .shadow(ShadowStyle.OUTER_FLOATING_SM)
142  }
143}
144```
145