Skip to content

Commit 8598a94

Browse files
Update article about a flow that isn't solution-aware (SharePoint#10322)
* Learn Editor: Update formatting-advanced.md * Learn Editor: Update formatting-advanced.md * fix grammar, typos, markdown formatting --------- Co-authored-by: Andrew Connell <[email protected]>
1 parent 9cc569e commit 8598a94

File tree

1 file changed

+50
-49
lines changed

1 file changed

+50
-49
lines changed

docs/declarative-customization/formatting-advanced.md

Lines changed: 50 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
---
22
title: Advanced formatting concepts
33
description: Advanced formatting concepts
4-
ms.date: 08/24/2022
4+
ms.date: 07/16/2025
55
ms.localizationpriority: high
66
---
77
# Advanced formatting concepts
88

9-
You can use some of the following features to make your view and column formatting more information rich and interactable.
9+
You can use some of the following features to make your view and column formatting more information-rich and interactive.
1010

1111
## Create a button to launch a Flow
1212

1313
The following screenshot shows a list with a Flow button added to the Action column:
1414

1515
![screenshot of the sample](../images/sp-columnformatting-flow.png)
1616

17-
You can use column formatting to create buttons that, when selected, run Flows on the corresponding list item. For flows that are [solution-aware](/power-automate/overview-solution-flows), the Flow Launch Panel will be displayed after choosing the button and you must select Run Flow to start the flow. For flows that aren't solution-aware, The Flow Launch Panel will be displayed after choosing the button and the Flow will just run.
17+
You can use column formatting to create buttons that, when selected, run Flows on the corresponding list item. For flows that are [solution-aware](/power-automate/overview-solution-flows), the Flow Launch Panel will be displayed after choosing the button, and you must select Run Flow to start the flow. For flows that aren't solution-aware, the Flow Launch Panel will be displayed after selecting the button, and the Flow will just run.
1818

1919
To use the sample below, you must substitute the ID of the Flow you want to run. This ID is contained within the `actionParams` property of the `customRowAction` attribute inside the `button` element.
2020

@@ -30,43 +30,44 @@ To obtain the ID of a flow that is solution-aware:
3030

3131
To obtain the ID of a flow that isn't solution-aware:
3232

33-
1. Select **Flow > See your flows** in the SharePoint list where the Flow is configured.
33+
1. Switch to the environment in which the Flow is hosted.
3434
1. Select the Flow you want to run.
35-
1. Copy the ID from the end of the URL.
35+
1. Select Export > Get flow identifier.
36+
1. Copy the ID.
3637

37-
```JSON
38-
{
39-
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
40-
"elmType": "button",
41-
"customRowAction": {
42-
"action": "executeFlow",
43-
"actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}"
44-
},
45-
"attributes": {
46-
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
47-
},
48-
"style": {
49-
"border": "none",
50-
"background-color": "transparent",
51-
"cursor": "pointer"
52-
},
53-
"children": [
38+
```JSON
5439
{
55-
"elmType": "span",
40+
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
41+
"elmType": "button",
42+
"customRowAction": {
43+
"action": "executeFlow",
44+
"actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}"
45+
},
5646
"attributes": {
57-
"iconName": "Flow"
47+
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
5848
},
5949
"style": {
60-
"padding-right": "6px"
61-
}
62-
},
63-
{
64-
"elmType": "span",
65-
"txtContent": "Send to Manager"
50+
"border": "none",
51+
"background-color": "transparent",
52+
"cursor": "pointer"
53+
},
54+
"children": [
55+
{
56+
"elmType": "span",
57+
"attributes": {
58+
"iconName": "Flow"
59+
},
60+
"style": {
61+
"padding-right": "6px"
62+
}
63+
},
64+
{
65+
"elmType": "span",
66+
"txtContent": "Send to Manager"
67+
}
68+
]
6669
}
67-
]
68-
}
69-
```
70+
```
7071

7172
Additionally, you can use `headerText` and `runFlowButtonText` options within the `actionParams` property to customize portions of the Flow panel itself! See the [button elements](./formatting-syntax-reference.md#customrowaction) portion of the Detailed syntax reference for more details.
7273

@@ -82,9 +83,9 @@ On hover - Metadata on the column "Status" is made available in column formattin
8283

8384
![Preview Image 2](../images/HoverImage-2.png)
8485

85-
You can use formatting to define custom call out that can be commissioned basis user-defined actions like click or hover.
86+
You can use formatting to define a custom callout that can be commissioned user-defined basis, actions like click or hover.
8687

87-
This example uses `customCardProps`, `openOnEvent`, `directionalHint` and `isBeakVisible`:
88+
This example uses `customCardProps`, `openOnEvent`, `directionalHint`, and `isBeakVisible`:
8889

8990
```JSON
9091
{
@@ -110,20 +111,20 @@ This example uses `customCardProps`, `openOnEvent`, `directionalHint` and `isBea
110111

111112
## Default cards on hover
112113

113-
Users can now have profile card or file hover card on formatters too, some of the things users can now do:
114+
Users can now have a profile card or a file hover card on formatters too. Some of the things users can now do:
114115

115-
1. Profile card or File Hover card on any column
116-
1. Profile card or Hover card with view formatting
116+
- Profile card or File Hover card on any column
117+
- Profile card or Hover card with view formatting
117118

118-
Hover on a filename with formatting with default file card:
119+
Hover on a filename with formatting with the default file card:
119120

120121
![Preview Image 3](../images/HoverImage-3.png)
121122

122-
Hover on a person column with formatting with default Profile card:
123+
Hover on a person column with formatting with the default Profile card:
123124

124125
![Preview Image 4](../images/HoverImage-4.png)
125126

126-
Both the example uses defaultHoverField
127+
This example uses `defaultHoverField`:
127128

128129
```JSON
129130
{
@@ -257,9 +258,9 @@ The following image shows a list with a Gallery layout referencing the Category
257258
## Inline Editing
258259

259260
With inline editing, formatters have the ability to load field editors to edit field data on an item.
260-
Users need to have edit permissions on the list item and the field type should belong to set of supported types for this feature to work.
261+
Users need to have edit permissions on the list item, and the field type should belong to a set of supported types for this feature to work.
261262

262-
A special json property `inlineEditField` is used with value as the field internal name __`[$FieldName]`__ at the target element in the json.
263+
A special JSON property `inlineEditField` is used with value as the field internal name __`[$FieldName]`__ at the target element in the JSON.
263264

264265
```json
265266
{
@@ -287,7 +288,7 @@ List of supported field types for inline editing:
287288

288289
### Hover Borders and Customizations
289290

290-
The inline editing adds a hover border on the elements to indicate these elements have an associated action. The default border is `neutralSecondary`, and on click, the editor appears with a `themePrimary` border. These border colors can be overridden via setting style on the same element with `inlineEditField` by using some special attributes - `--inline-editor-border-width`, `--inline-editor-border-style`, `--inline-editor-border-radius`, and `--inline-editor-border-color`.
291+
The inline editing adds a hover border on the elements to indicate that these elements have an associated action. The default border is `neutralSecondary`, and on click, the editor appears with a `themePrimary` border. These border colors can be overridden via setting style on the same element with `inlineEditField` by using some special attributes - `--inline-editor-border-width`, `--inline-editor-border-style`, `--inline-editor-border-radius`, and `--inline-editor-border-color`.
291292

292293
```json
293294
{
@@ -307,7 +308,7 @@ The inline editing adds a hover border on the elements to indicate these element
307308

308309
With the new `setValue` and `customRowAction` properties, formatters can render action buttons that modify the item internally without opening editors or forms. `setValue` also allows setting multiple field values of the item at once.
309310

310-
The below JSON will set value of `FieldInternalName_1`, `FieldInternalName_2`, and `FieldInternalName_3`with the values provided:
311+
The below JSON will set the value of `FieldInternalName_1`, `FieldInternalName_2`, and `FieldInternalName_3`with the values provided:
311312

312313
```json
313314
{
@@ -361,15 +362,15 @@ The below JSON will set value of `FieldInternalName_1`, `FieldInternalName_2`, a
361362
- `addDays` and `addMinutes`, two new functions to support [expressions](./formatting-syntax-reference.md#expressions) like seven days from today
362363
- an empty string `""` clears the field value
363364
- Multi-Choice and Multi-Person:
364-
- Multi value fields are special, as they need an array value to save multiple values.
365+
- Multi-value fields are special, as they need an array value to save multiple values.
365366
- `appendTo`, `removeFrom`, and `replace`, three functions that can operate on multivalue fields.
366367
- `appendTo([$MultiChoiceField], 'MyValue')`
367368
- `removeFrom([$MultiUserField], @me)`: removes all occurrences that match the second parameter
368-
- `replace([$MultiChoiceField], 'Choice 1', 'Choice 3')`: replaces all occurrences of second parameter with third.
369+
- `replace([$MultiChoiceField], 'Choice 1', 'Choice 3')`: replaces all occurrences of the second parameter with the third.
369370
- Person field values:
370371
- user name or email
371372
- An empty string `""` clears the field value
372373
- an [expression](./formatting-syntax-reference.md#expressions) which returns these values
373374
374-
> [!NOTE]
375-
> A query runs with the string value provided on people column and the first person in the returned results is used.
375+
> [!NOTE]
376+
> A query runs with the string value provided on the people column, and the first person in the returned results is used.

0 commit comments

Comments
 (0)