Skip to content

Commit 702564a

Browse files
committed
Updates to content and adding isSettingsPayload example
1 parent e54ccaf commit 702564a

File tree

1 file changed

+51
-2
lines changed

1 file changed

+51
-2
lines changed

hub/apps/design/widgets/widgets-create-a-template.md

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ The third text editor is labeled **Sample Host Data Editor**. Note that this edi
4545
| host.isUserContextAuthenticated | true or false | When this value is false, the only action that is supported is [Action.OpenUrl](https://adaptivecards.io/explorer/Action.OpenUrl.html). The value of *isUserContextAuthenticated* can be used to adjust widget content appropriately, given the interactivity limitations. |
4646

4747

48-
such as the Widgets Board two properties that indicate the size and theme of your widget. These properties are named *host.widgetSize* and *host.hostTheme*. The supported sizes are "small", "medium", and "large". The supported themes are "light" and "dark". Your widget template can dynamically display different content based on the current value of these properties. To see how your widget responds to changes in size and theme, you can adjust the values for these properties in the editor, or you can also set these values in the **Container size** and **Theme** dropdowns next to the **Select host app** dropdown at the top of the page.
48+
The **Container size** and **Theme** dropdowns next to the **Select host app** dropdown at the top of the page allow you to set these properties without manually editing the sample host JSON in the editor.
4949

5050
## Create a new card
5151

@@ -169,4 +169,53 @@ The following code listing shows the final version of the JSON payload.
169169
}
170170
]
171171
}
172-
```
172+
```
173+
174+
## Settings payload example
175+
176+
The following code listing shows a simple example of a JSON payload that uses the **host.isSettingsPayload** property to display different
177+
content when the user has clicked the **Customize widget** button.
178+
179+
```json
180+
{
181+
"type": "AdaptiveCard",
182+
"body": [
183+
{
184+
"type": "Container",
185+
"items":[
186+
{
187+
"type": "TextBlock",
188+
"text": "Content payload",
189+
"$when": "${!$host.isSettingsPayload}"
190+
}
191+
]
192+
},
193+
{
194+
"type": "Container",
195+
"items":[
196+
{
197+
"type": "TextBlock",
198+
"text": "Settings payload",
199+
"$when": "${$host.isSettingsPayload}"
200+
}
201+
]
202+
}
203+
],
204+
"actions": [
205+
{
206+
"type": "Action.Submit",
207+
"title": "Increment",
208+
"verb": "inc",
209+
"$when": "${!$host.isSettingsPayload}"
210+
},
211+
{
212+
"type": "Action.Submit",
213+
"title": "Update Setting",
214+
"verb": "setting",
215+
"$when": "${$host.isSettingsPayload}"
216+
}
217+
],
218+
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
219+
"version": "1.6"
220+
}
221+
```

0 commit comments

Comments
 (0)