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