• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Creating an ArkTS Widget
2
3You can create a widget in either of the following modes:
4
5- When creating a project, select **Application**, and then right-click a module folder and choose **New** > **Service Widget** to create a widget.
6- When creating a project, select **Atomic Service**, and then right-click a module folder and choose **New** > **Service Widget** to create a widget.
7
8![WidgetCreateProject](figures/WidgetCreateProject.png)
9>**NOTE**
10>
11>The UI may be different in DevEco Studio of a different version.
12
13To create an ArkTS widget in an existing project, perform the following steps:
14
151. Right-click a module folder and choose **New** > **Service Widget**.
16   ![WidgetProjectCreate1](figures/WidgetProjectCreate1.png)
17>**NOTE**
18>
19>For a project developed using API version 10 or later based on the stage model, you can create a dynamic or static widget from the **Service Widget** menu. You can also change the widget type by setting the **isDynamic** parameter in the [form_config.json file](arkts-ui-widget-configuration.md) of the widget. If **isDynamic** is left unspecified or set to **true**, the widget is a [dynamic widget](./arkts-ui-widget-configuration.md#isdynamic-field). If **isDynamic** is set to **false**, the widget is a [static widget](./arkts-ui-widget-configuration.md#isdynamic-field).
20
212. Select a widget template based on the actual service scenario.
22   ![WidgetProjectCreate2](figures/WidgetProjectCreate2.png)
23
243. Set **Language** to **ArkTS** and click **Finish**.
25   ![WidgetProjectCreate3](figures/WidgetProjectCreate3.png)
26
27   You are advised to name the widget based on the actual scenario. After an ArkTS widget is created, the following widget-related files are automatically added to the project directory: **EntryFormAbility.ets** (widget lifecycle management file), **WidgetCard.ets** (widget page file), and **form_config.json** (widget configuration file).
28   ![WidgetProjectView](figures/WidgetProjectView.png)
29