Skip to content

Update article about a flow that isn't solution-aware #10322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 50 additions & 49 deletions docs/declarative-customization/formatting-advanced.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
title: Advanced formatting concepts
description: Advanced formatting concepts
ms.date: 08/24/2022
ms.date: 07/16/2025
ms.localizationpriority: high
---
# Advanced formatting concepts

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

## Create a button to launch a Flow

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

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

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.
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.

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.

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

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

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

```JSON
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
```JSON
{
"elmType": "span",
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "button",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}"
},
"attributes": {
"iconName": "Flow"
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "Send to Manager"
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Flow"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "Send to Manager"
}
]
}
]
}
```
```

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.

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

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

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

This example uses `customCardProps`, `openOnEvent`, `directionalHint` and `isBeakVisible`:
This example uses `customCardProps`, `openOnEvent`, `directionalHint`, and `isBeakVisible`:

```JSON
{
Expand All @@ -110,20 +111,20 @@ This example uses `customCardProps`, `openOnEvent`, `directionalHint` and `isBea

## Default cards on hover

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

1. Profile card or File Hover card on any column
1. Profile card or Hover card with view formatting
- Profile card or File Hover card on any column
- Profile card or Hover card with view formatting

Hover on a filename with formatting with default file card:
Hover on a filename with formatting with the default file card:

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

Hover on a person column with formatting with default Profile card:
Hover on a person column with formatting with the default Profile card:

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

Both the example uses defaultHoverField
This example uses `defaultHoverField`:

```JSON
{
Expand Down Expand Up @@ -257,9 +258,9 @@ The following image shows a list with a Gallery layout referencing the Category
## Inline Editing

With inline editing, formatters have the ability to load field editors to edit field data on an item.
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.
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.

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

```json
{
Expand Down Expand Up @@ -287,7 +288,7 @@ List of supported field types for inline editing:

### Hover Borders and Customizations

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`.
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`.

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

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.

The below JSON will set value of `FieldInternalName_1`, `FieldInternalName_2`, and `FieldInternalName_3`with the values provided:
The below JSON will set the value of `FieldInternalName_1`, `FieldInternalName_2`, and `FieldInternalName_3`with the values provided:

```json
{
Expand Down Expand Up @@ -361,15 +362,15 @@ The below JSON will set value of `FieldInternalName_1`, `FieldInternalName_2`, a
- `addDays` and `addMinutes`, two new functions to support [expressions](./formatting-syntax-reference.md#expressions) like seven days from today
- an empty string `""` clears the field value
- Multi-Choice and Multi-Person:
- Multi value fields are special, as they need an array value to save multiple values.
- Multi-value fields are special, as they need an array value to save multiple values.
- `appendTo`, `removeFrom`, and `replace`, three functions that can operate on multivalue fields.
- `appendTo([$MultiChoiceField], 'MyValue')`
- `removeFrom([$MultiUserField], @me)`: removes all occurrences that match the second parameter
- `replace([$MultiChoiceField], 'Choice 1', 'Choice 3')`: replaces all occurrences of second parameter with third.
- `replace([$MultiChoiceField], 'Choice 1', 'Choice 3')`: replaces all occurrences of the second parameter with the third.
- Person field values:
- user name or email
- An empty string `""` clears the field value
- an [expression](./formatting-syntax-reference.md#expressions) which returns these values

> [!NOTE]
> A query runs with the string value provided on people column and the first person in the returned results is used.
> [!NOTE]
> A query runs with the string value provided on the people column, and the first person in the returned results is used.