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 43This example demonstrates how to set custom properties on a **Column** component and obtain these properties from its corresponding FrameNode. 44 45```ts 46// xxx.ets 47import { FrameNode, UIContext } from '@kit.ArkUI'; 48 49@Entry 50@Component 51struct CustomPropertyExample { 52 build() { 53 Column() { 54 Text('text') 55 Button('print').onClick(() => { 56 const uiContext: UIContext = this.getUIContext(); 57 if (uiContext) { 58 const node: FrameNode | null = uiContext.getFrameNodeById("Test_Column") || null; 59 if (node) { 60 for (let i = 1; i < 4; i++) { 61 const key = 'customProperty' + i; 62 const property = node.getCustomProperty(key); 63 console.log(key, JSON.stringify(property)); 64 } 65 } 66 } 67 }) 68 } 69 .id('Test_Column') 70 .customProperty('customProperty1', { 71 'number': 10, 72 'string': 'this is a string', 73 'bool': true, 74 'object': { 75 'name': 'name', 76 'value': 100 77 } 78 }) 79 .customProperty('customProperty2', {}) 80 .customProperty('customProperty2', undefined) 81 .width('100%') 82 .height('100%') 83 } 84} 85``` 86