1. Open the fragment's Variables editor.
2. Select the variable or constant you want to customize.
3. Open the variable or constant's Design Time tab in the Properties pane.
4. Select properties to customize how the component for editing the variable will look in the Page Designer.

   The properties you see in the Design Time tab will depend upon the variable's type, and the Subtype property you select in the tab. For example, if Date is selected as the Subtype for a string-type variable, you'll see fields for setting the date's Minimum and Maximum limits:
   
   Description of the illustration fragment-variable-custompi.png
   

   Here are steps for some common customization options for string-, object-, and number-type variables and constants:

   Note:

   When working with string variables and constants, you have the option of adding translation metadata if you want a particular variable (or constant) to display the translation icon on the Page Designer's Properties pane to support translation.

   Customization Option	Steps in Design Time Tab	Result in Page Designer
   To display a color picker:	For a string-type variable or constant: In the Design Time tab, select the Subtype as Color. Optional: In the Placeholder field, specify a hint text for the variable; for example, Choose a color. Optional: Switch to the General tab and set these additional properties: In the Label field, enter a user-friendly name for the variable. In the Default Value property, use the color picker to set a default color.	Description of the illustration fragment-variable-custompropertiespane.png
   To display a date or date-and-time picker:	For a string-type variable or constant: In the Design Time tab, select the Subtype as Date or Date Time. Optional: In the Placeholder field, specify a hint text for the variable; for example, Select a date. Optional: In the Minimum field, set the bottom (inclusive) limit of a date or date-and-time range for the value in the Properties pane. Optional: In the Maximum field, set the top (inclusive) limit of a date or date-and-time range for the value in the Properties pane. Optional: Switch to the General tab, then in the Label field, enter a user-friendly name for the variable.	Description of the illustration fragment-variable-date.png
   To display an endpoint picker:	For an object-type variable or constant: In the Design Time tab, select the Subtype as Endpoint. Optional: To filter endpoints available in the endpoint picker by REST action type, for example, to only list Get One REST calls, select one or more of the predefined filters in Endpoint Action Hint. Optional: To filter endpoints available in the endpoint picker by service connection type, for example, to only list service connections using an ADF Describe, select one or more of the predefined filters in Service Type. Optional: Switch to the General tab, then in the Label field, enter a user-friendly name for the variable. Note: The Placeholder field does not take effect in the Properties pane when you use the Endpoint subtype.	Description of the illustration fragment-variable-endpoint.png Clicking Select launches a Configure Endpoint wizard in which fragment users can select a suitable endpoint and choose its URI parameters. Tip: If you cannot find the endpoint you want or prefer to manually set up your endpoint, click the Manual Setup of Endpoint icon () in the wizard, then select from the available endpoints and confgure its URI parameters.
   To display a drop-down menu containing an array of possible values:	For a string-type variable or constant: In the Design Time tab, select the Subtype as Enum Values. Optional: In the Placeholder field, specify a hint text for the variable; for example, Select the default browser. Click next to Enum Values, enter the Label, Value, and Description for your first value. For example, you might enter Chrome as the label, ch as the value, and Google Browser as the description. Click Create. If you want to make changes, click , update the values, and click Save. Click to delete a value. To reorder your list, drag the next to the value and drop it where you want it. Repeat step c to create your entire list of values. Optional: Switch to the General tab, then in the Label field, enter a user-friendly name for the variable.	Description of the illustration fragment-variable-enumvaluepng.png
   To display a time picker:	For a string-type variable or constant: In the Design Time tab, select the Subtype as Time. Optional: In the Placeholder field, specify a hint text for the variable; for example, Select a time. Optional: In the Minimum property, set the bottom (inclusive) limit of a time range for the value in the Properties pane. Optional: In the Maximum property, set the top (inclusive) limit of a time range for the value in the Properties pane. Optional: Switch to the General tab, then in the Label field, enter a user-friendly name for the variable.	Description of the illustration fragment-variable-time.png
   To display a drop-down menu with a list of time zones:	For a string-type variable or constant: In the Design Time tab, select the Subtype as Time Zone. Optional: In the Placeholder field, specify a hint text for the variable; for example, Select a time zone. Optional: Switch to the General tab, then in the Label field, enter a user-friendly name for the variable.	Description of the illustration fragment-variable-timezone.png
   To limit the input values to a number in a range:	For a number-type variable or constant: In the Design Time tab, specify a hint text for the variable, for example, Enter Quantity, in the Placeholder field. Optional: In the Minimum and Maximum properties, set the inclusive bottom and top limits of a range for the value in the Properties pane; for example, to limit the input value to a number in the range 0 - 99. Optional: Switch to the General tab, then in the Label field, enter a user-friendly name for the variable.	Description of the illustration fragment-variable-number.png

"variables": {
    "hireDate": {
      "type": "string",
      "input": "fromCaller",
   "@dt": {
        "label": "Date of Hire"
        "subtype": "date",
        "valueOptions": {
          "placeholder": "Select a date"
     }
   }   
},

1. Open the fragment's JSON editor.
2. Update the variable or constant's definition by setting the @dt element, then use the subtype property to specify the component you want displayed in the Page Designer. The JSON editor displays a hint to help you select the value for the subtype property:
   
   
   Description of the illustration fragment-variable-json.png
   
   
   For example, here's how you can show a component for selecting a business object by setting the subtype property to businessObject:

   "myObject": {
      "type": "string",
      "input": "fromCaller",   
      "@dt": {
            "subtype": "businessObject",
            "label": "Related Object"
       }
    },

   You can also use the label property to change the variable's display name in the Properties pane.

   The Properties pane in the Page Designer will now show a component for selecting a business object and the new display name for the variable wherever the fragment is used.
   
   Description of the illustration fragment-variable-bo.png