Docs: Update custom properties page for 2.1 tab redesign

v2.1.x-SNAPSHOT/how-to-guides/guide-for-data-users/custom.mdx

@@ -1,55 +1,142 @@
 ---
-title: How to Create a Custom Property for a Data Asset
+title: Create a Custom Property for a Data Asset
 description: Customize data asset pages by configuring fields, tabs, and layouts to match your organization’s metadata strategy.
 sidebarTitle: How to Create a Custom Property for a Data Asset
 ---
 
-# How to Create a Custom Property for a Data Asset
+# Create a Custom Property for a Data Asset
 
 OpenMetadata uses a schema-first approach, and that's why we support custom properties for all types of data assets. Organizations can extend the attributes as required to capture custom metadata. You can view the Custom Properties tab in the detailed view for all types of data assets.
 
-Supported types:
+## Supported Types
 
-- Date
-- Date Time
-- Duration
-- Email
-- Entity Reference
-- Entity Reference List
-- Enum
-- Integer
-- Markdown
-- Number
-- SQL Query
-- String
-- Table
-- Time
-- Time Interval
-- Timestamp
+Custom properties support the following types.
 
-To create a Custom Property in OpenMetadata:
-- Navigate to **Settings** >> **Custom Properties**
-- Click on the type of data asset you would like to create a custom property for.
-- Click on **Add Property**
+| Type | Description |
+|:--- |:--- |
+| **Date** | A calendar date, such as `2018-11-13`. |
+| **Date Time** | A date and time, such as `2018-11-13T20:20:39+00:00`. |
+| **Duration** | A length of time in ISO 8601 format, such as `P23DT23H`. |
+| **Email** | An email address. |
+| **Entity Reference** | A link to one other OpenMetadata entity. You choose which entity types are allowed when you create the property. |
+| **Entity Reference List** | A link to several other OpenMetadata entities. You choose which entity types are allowed when you create the property. |
+| **Enum** | A value chosen from a fixed list that you define. You can allow one or several selections when you create the property. |
+| **Hyperlink** | A URL with optional display text. |
+| **Integer** | A whole number. |
+| **Markdown** | Formatted text written in Markdown. |
+| **Number** | A number that can have decimals. |
+| **SQL Query** | A SQL statement, such as `select * from orders`. |
+| **String** | Plain text. |
+| **Table** | Rows and columns of text values. |
+| **Time** | A time of day, such as `20:20:39`. |
+| **Time Interval** | A start time and an end time. |
+| **Timestamp** | A point in time as Unix epoch milliseconds. |
 
-<img src="/public/images/how-to-guides/discovery/custom1.png" alt="Create a Custom Property" />
+## Create a Custom Property
 
-- Enter the required details: `Name`, `Type`, and `Description`. You can lookup for the details of the information asked on the right side panel.
-  - **Name:** The name must start with a lowercase letter, as preferred in the camelCase format. Uppercase letters and numbers can be included in the field name; but spaces, underscores, and dots are not supported.
-  - **Type:** Type of custom property like `entityReference`, `email`, etc.
-  - **Description:** Describe your custom property to provide more information to your team.
-- Click on **Create**.
+To create a Custom Property:
 
-<img src="/public/images/how-to-guides/discovery/custom2.png" alt="Define a Custom Property" />
+1. Navigate to **Settings** > **Custom Properties**.
 
-Once the custom property has been created for a type of data asset, you can add the values for the custom property from the Custom Property tab in the detailed view of the data assets.
+    <img src="/public/images/how-to-guides/discovery/custom-property-settings.png" alt="Settings page with the Custom Properties card highlighted" />
 
-<img src="/public/images/how-to-guides/discovery/custom3.png" alt="Enter the Value for a Custom Property" />
+2. Click the type of data asset you want to create a custom property for.
+3. Click **Add Property**.
 
-To delete a Custom Property for a particular asset, such as tables, navigate to **Settings >> Custom Properties >> Tables** and
- click on **Delete Property**
+    <img src="/public/images/how-to-guides/discovery/custom-property-add-property.png" alt="Custom properties page for Tables with the Add Property button highlighted" />
 
-<img src="/public/images/how-to-guides/discovery/custom4.png" alt="Delete a Custom Property" />
+4. Enter the following details. Turn on **Show Help Text** at the top of the panel for an explanation of each field.
+    - **Name** (required): Start with a lowercase letter, preferably in camelCase. You can use uppercase letters and numbers. Spaces, underscores, and dots are not supported.
+    - **Display Name**: A friendlier label to show instead of the name.
+    - **Type** (required): Select the type of custom property, such as `entityReference` or `email`. For the full list, see [Supported Types](#supported-types).
+    - **Description** (required): Describe what the property is for, so your team knows how to use it.
+
+    <img src="/public/images/how-to-guides/discovery/custom-property-add-form.png" alt="Add Custom Property panel with Name, Display Name, Type, and Description fields" />
+
+5. Click **Create**.
+
+## Add and Edit Custom Property Values
+
+Once the custom property has been created for a type of data asset, you can add the values for the custom property from the **Custom Properties** tab in the detailed view of the data asset. The tab shows each property as a card.
+
+### Find a Property
+
+- **Search**: Type in the search box to filter the cards by name or description.
+- **Sort**: Use the **Sort** dropdown to order the cards by **Name**, **Type**, or **With value first**.
+
+Most cards sit in two columns. Properties with larger values (**Table**, **SQL Query**, **Markdown**, and **Time Interval**) take the full width and appear after the others.
+
+### Read a Card
+
+Each card shows an icon for the property type, the property name, a type badge, and the description.
+
+- **No value yet**: The card shows "No value yet", an example of a valid value, and a button to add one. The button label depends on the property type, such as **Add text**, **Add email**, **Add number**, **Add link**, **Add query**, **Add row**, **Choose value**, **Set date**, **Set time**, or **Set interval**.
+
+    <img src="/public/images/how-to-guides/discovery/custom-property-tab.png" alt="Custom Properties tab with cards for properties that have no value yet" />
+
+- **Has a value**: The card shows the value and an edit (pencil) icon.
+- **Long lists**: **Enum** and **Entity Reference List** values show the first few items. Click **+N more** to see the rest, and **Show less** to collapse them.
+
+### Add or Edit a Value
+
+1. Click the add button on a card with no value, or the edit (pencil) icon on a card that has one.
+2. Enter the value in the window that opens. The editor matches the property type:
+    - **String, Integer, Number, Email, Timestamp, Duration**: A text field. OpenMetadata checks the format before you can save.
+    - **Date, Date Time, Time**: Date and time pickers. Date Time and Time values keep seconds.
+    - **Enum and Entity Reference**: A list to select from.
+    - **Hyperlink**: A URL and optional display text. Only `http` and `https` links are accepted.
+    - **Table**: Editable rows.
+    - **SQL Query**: A code editor. Press `Cmd+Enter` (macOS) or `Ctrl+Enter` to save.
+    - **Markdown**: A rich text editor.
+    - **Time Interval**: A start and end time, with quick picks, a range calendar, and manual entry. Choose **Local** or **UTC** time. The end must be after the start.
+3. Click **Save**.
+
+If the save fails, the window stays open and shows an error, so you don't lose what you entered.
+
+<Note>
+You only see the add and edit controls if you have permission to edit the data asset. Other users can view the values but not change them.
+</Note>
+
+## Manage Custom Properties
+
+You can edit or delete a custom property from the same page where you create it.
+
+### Edit a Custom Property
+
+1. Navigate to **Settings** > **Custom Properties**.
+2. Click the type of data asset the property belongs to, such as **Tables**.
+3. Find the property in the list and click the edit (pencil) icon in the **Actions** column.
+
+    <img src="/public/images/how-to-guides/discovery/custom-property-edit-icon.png" alt="Custom properties list for Tables with the edit icon highlighted" />
+
+4. Update the details in the **Edit Property** window:
+    - **Display Name**: The label shown for the property.
+    - **Description** (required): What the property is for.
+    - **Type settings**: Settings specific to the property type. For an **Enum** property, you can change the **Enum Values** and turn **Multi Select** on or off.
+
+    <img src="/public/images/how-to-guides/discovery/custom-property-edit-form.png" alt="Edit Property window for an Enum property with Display Name, Description, Enum Values, and Multi Select" />
+
+5. Click **Save**. Click **Cancel** to close the window without saving.
+
+<Note>
+The **Edit Property** window doesn't include the name or type, so you can't change them after you create the property.
+</Note>
+
+### Delete a Custom Property
+
+1. Navigate to **Settings** > **Custom Properties**.
+2. Click the type of data asset the property belongs to, such as **Tables**.
+3. Find the property in the list and click the delete (trash can) icon in the **Actions** column.
+
+    <img src="/public/images/how-to-guides/discovery/custom-property-delete-icon.png" alt="Custom properties list for Tables with the delete icon highlighted" />
+
+4. In the **Delete Property** window, click **Confirm**. Click **Cancel** to keep the property.
+
+    <Warning>
+    Deleting a custom property can't be undone. OpenMetadata also removes the values stored for that property on every asset.
+    </Warning>
+
+    <img src="/public/images/how-to-guides/discovery/custom-property-delete-confirm.png" alt="Delete Property confirmation window with Cancel and Confirm buttons" />
 
 <Card title="Overview of Announcements" href="/v2.1.x-SNAPSHOT/how-to-guides/guide-for-data-users/announcements" >
     Learn more about the announcements in OpenMetadata