1# Custom Property
2
3You can set custom properties on components. These custom properties can be obtained on their corresponding FrameNodes, allowing for more flexible component management.
4
5>  **NOTE**
6>
7>  The initial APIs of this module are supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8
9## customProperty
10
11customProperty(name: string, value: Optional\<Object>)
12
13Sets a custom property for this component. This API does not work for [custom components](../../../quick-start/arkts-create-custom-components.md#creating-a-custom-component).
14
15**Widget capability**: This API can be used in ArkTS widgets since API version 12.
16
17**Atomic service API**: This API can be used in atomic services since API version 12.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21**Parameters**
22
23| Name | Type                                                | Mandatory | Description                                                        |
24| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ |
25| name  | string | Yes  | Name of the custom property. |
26| value  | Optional\<Object> | Yes  | Value of the custom property. |
27
28
29## Optional<sup>12+</sup>
30
31Optional\<T>
32
33Defines the Optional type. The value can be **undefined**.
34
35**Atomic service API**: This API can be used in atomic services since API version 12.
36
37**System capability**: SystemCapability.ArkUI.ArkUI.Full
38
39**Widget capability**: This API can be used in ArkTS widgets since API version 12.
40
41## Example
42```ts
43// xxx.ets
44import { FrameNode, UIContext } from '@kit.ArkUI';
45
46@Entry
47@Component
48struct CustomPropertyExample {
49  build() {
50    Column() {
51      Text('text')
52      Button('print').onClick(() => {
53        const uiContext: UIContext = this.getUIContext();
54        if (uiContext) {
55          const node: FrameNode | null = uiContext.getFrameNodeById("Test_Column") || null;
56          if (node) {
57            for (let i = 1; i < 4; i++) {
58              const key = 'customProperty' + i;
59              const property = node.getCustomProperty(key);
60              console.log(key, JSON.stringify(property));
61            }
62          }
63        }
64      })
65    }
66    .id('Test_Column')
67    .customProperty('customProperty1', {
68      'number': 10,
69      'string': 'this is a string',
70      'bool': true,
71      'object': {
72        'name': 'name',
73        'value': 100
74      }
75    })
76    .customProperty('customProperty2', {})
77    .customProperty('customProperty2', undefined)
78    .width('100%')
79    .height('100%')
80  }
81}
82```
83