Skip to content

Commit e2476eb

Browse files
Merge pull request #225405 from davidsmatlak/ds-dc-update-common-dropdown
Update microsoft-common-dropdown.md
2 parents fc63364 + 35cdcbb commit e2476eb

File tree

2 files changed

+77
-38
lines changed

2 files changed

+77
-38
lines changed
Loading
Lines changed: 77 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
title: DropDown UI element
3-
description: Describes the Microsoft.Common.DropDown UI element for Azure portal. Use to select from available options when deploying a managed application.
3+
description: Describes the Microsoft.Common.DropDown UI element for Azure portal. The element is used to select from the available options when deploying a managed application.
44
author: davidsmatlak
55

66
ms.topic: conceptual
7-
ms.date: 07/14/2020
7+
ms.date: 01/27/2023
88
ms.author: davidsmatlak
99

1010
---
@@ -15,60 +15,60 @@ A selection control with a dropdown list. You can allow selection of only a sing
1515

1616
## UI sample
1717

18-
The DropDown element has different options which determine its appearance in the portal.
18+
The DropDown element has different options that determine its appearance in the portal.
1919

2020
When only a single item is allowed for selection, the control appears as:
2121

22-
:::image type="content" source="./media/managed-application-elements/microsoft-common-dropdown-1.png" alt-text="Microsoft.Common.DropDown single selection":::
22+
:::image type="content" source="./media/managed-application-elements/microsoft-common-dropdown-1.png" alt-text="Screenshot of the Microsoft.Common.DropDown single selection.":::
2323

2424
When descriptions are included, the control appears as:
2525

26-
:::image type="content" source="./media/managed-application-elements/microsoft-common-dropdown-2.png" alt-text="Microsoft.Common.DropDown single selection with descriptions":::
26+
:::image type="content" source="./media/managed-application-elements/microsoft-common-dropdown-2.png" alt-text="Screenshot of the Microsoft.Common.DropDown single selection with descriptions.":::
2727

2828
When multi-select is enabled, the control adds a **Select all** option and checkboxes for selecting more than one item:
2929

30-
:::image type="content" source="./media/managed-application-elements/microsoft-common-dropdown-3.png" alt-text="Microsoft.Common.DropDown multi-select":::
30+
:::image type="content" source="./media/managed-application-elements/microsoft-common-dropdown-3.png" alt-text="Screenshot of the Microsoft.Common.DropDown multi-select.":::
3131

3232
Descriptions can be included with multi-select enabled.
3333

34-
:::image type="content" source="./media/managed-application-elements/microsoft-common-dropdown-4.png" alt-text="Screenshot that shows how descriptions can be included with multi-select enabled":::
34+
:::image type="content" source="./media/managed-application-elements/microsoft-common-dropdown-4.png" alt-text="Screenshot that shows how descriptions can be included with multi-select enabled.":::
3535

3636
When filtering is enabled, the control includes a text box for adding the filtering value.
3737

38-
:::image type="content" source="./media/managed-application-elements/microsoft-common-dropdown-5.png" alt-text="Microsoft.Common.DropDown multi-select with descriptions":::
38+
:::image type="content" source="./media/managed-application-elements/microsoft-common-dropdown-5.png" alt-text="Screenshot of the Microsoft.Common.DropDown multi-select with descriptions.":::
3939

4040
## Schema
4141

4242
```json
4343
{
44-
"name": "element1",
45-
"type": "Microsoft.Common.DropDown",
46-
"label": "Example drop down",
47-
"placeholder": "",
48-
"defaultValue": ["Value two"],
49-
"toolTip": "",
50-
"multiselect": true,
51-
"selectAll": true,
52-
"filter": true,
53-
"filterPlaceholder": "Filter items ...",
54-
"multiLine": true,
55-
"defaultDescription": "A value for selection",
56-
"constraints": {
57-
"allowedValues": [
58-
{
59-
"label": "Value one",
60-
"description": "The value to select for option 1.",
61-
"value": "one"
62-
},
63-
{
64-
"label": "Value two",
65-
"description": "The value to select for option 2.",
66-
"value": "two"
67-
}
68-
],
69-
"required": true
70-
},
71-
"visible": true
44+
"name": "element1",
45+
"type": "Microsoft.Common.DropDown",
46+
"label": "Example drop down",
47+
"placeholder": "",
48+
"defaultValue": ["Value two"],
49+
"toolTip": "",
50+
"multiselect": true,
51+
"selectAll": true,
52+
"filter": true,
53+
"filterPlaceholder": "Filter items ...",
54+
"multiLine": true,
55+
"defaultDescription": "A value for selection",
56+
"constraints": {
57+
"allowedValues": [
58+
{
59+
"label": "Value one",
60+
"description": "The value to select for option 1.",
61+
"value": "one"
62+
},
63+
{
64+
"label": "Value two",
65+
"description": "The value to select for option 2.",
66+
"value": "two"
67+
}
68+
],
69+
"required": true
70+
},
71+
"visible": true
7272
}
7373
```
7474

@@ -90,7 +90,46 @@ When filtering is enabled, the control includes a text box for adding the filter
9090
- The `defaultDescription` property is used for items that don't have a description.
9191
- The `placeholder` property is help text that disappears when the user begins editing. If the `placeholder` and `defaultValue` are both defined, the `defaultValue` takes precedence and is shown.
9292

93+
## Example
94+
95+
In the following example, the `defaultValue` is defined using the values of the `allowedValues` instead of the labels. The default value can contain multiple values when `multiselect` is enabled.
96+
97+
:::image type="content" source="./media/managed-application-elements/microsoft-common-dropdown-6.png" alt-text="Screenshot that shows how multiple default values can be included with multi-select enabled":::
98+
99+
```json
100+
{
101+
"name": "element1",
102+
"type": "Microsoft.Common.DropDown",
103+
"label": "Example drop down",
104+
"placeholder": "",
105+
"defaultValue": [{"value": "one"}, {"value": "two"}],
106+
"toolTip": "Multiple values can be selected",
107+
"multiselect": true,
108+
"selectAll": true,
109+
"filter": true,
110+
"filterPlaceholder": "Filter items ...",
111+
"multiLine": true,
112+
"defaultDescription": "A value for selection",
113+
"constraints": {
114+
"allowedValues": [
115+
{
116+
"label": "Value one",
117+
"description": "The value to select for option 1.",
118+
"value": "one"
119+
},
120+
{
121+
"label": "Value two",
122+
"description": "The value to select for option 2.",
123+
"value": "two"
124+
}
125+
],
126+
"required": true
127+
},
128+
"visible": true
129+
}
130+
```
131+
93132
## Next steps
94133

95-
* For an introduction to creating UI definitions, see [Getting started with CreateUiDefinition](create-uidefinition-overview.md).
96-
* For a description of common properties in UI elements, see [CreateUiDefinition elements](create-uidefinition-elements.md).
134+
- For an introduction to creating UI definitions, see [Getting started with CreateUiDefinition](create-uidefinition-overview.md).
135+
- For a description of common properties in UI elements, see [CreateUiDefinition elements](create-uidefinition-elements.md).

0 commit comments

Comments
 (0)