• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Adding Widgets to the Home Screen
2
3You can add ArkTS widgets of an application to the home screen
4
5which manages widgets in a unified manner. Applications can call the [openFormManager](../reference/apis-form-kit/js-apis-app-form-formProvider.md#formprovideropenformmanager18) API provided by the [formProvider](../reference/apis-form-kit/js-apis-app-form-formProvider.md) module to start the widget management page where you can add a widget to the home screen by touching **Add to home screen**.
6
7## How to Develop
8
9Implement the [openFormManager](../reference/apis-form-kit/js-apis-app-form-formProvider.md#formprovideropenformmanager18) method provided by the [formProvider](../reference/apis-form-kit/js-apis-app-form-formProvider.md) API.
10
11```ts
12// entry/src/main/ets/pages/Index.ets
13
14import { formProvider } from '@kit.FormKit';
15import { BusinessError } from '@kit.BasicServicesKit';
16import { Want } from '@kit.AbilityKit';
17
18@Entry
19@Component
20struct Index {
21
22  build() {
23    Row() {
24      Column() {
25        // Add a button and call the openFormManager method to start the widget management page.
26        Button('Start the widget management page.')
27          .onClick(() => {
28            const want: Want = {
29              bundleName: 'com.example.formbutton',
30              abilityName: 'EntryFormAbility',
31              parameters: {
32                'ohos.extra.param.key.form_dimension': 2,
33                'ohos.extra.param.key.form_name': 'widget',
34                'ohos.extra.param.key.module_name': 'entry'
35              },
36            };
37            try {
38              formProvider.openFormManager(want);
39            } catch (error) {
40              console.error(`catch error, code: ${(error as BusinessError).code}, message: ${(error as BusinessError).message})`);
41            }
42          })
43          .margin({ top: 10, bottom: 10 })
44      }
45      .width('100%')
46    }
47    .height('100%')
48  }
49}
50```
51