Back to column formats
Column formattingSharePoint Online

Demote News to Site Page

This sample demonstrates how to use the setValue action to update the value of the Promoted State column to 0 and demote the news to a page.

Demote News to Site Page formatting preview
Sample preview · View original animation

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-wrap": "nowrap",
    "display": "flex",
    "flex-direction": "row"
  },
  "children": [
    {
      "elmType": "div",
      "txtContent": "=if(@currentField == 0 ,'0 : Page' , if(@currentField == 1, '1 : News (Unpublished)' , if(@currentField == 2 , '2 : News','') ) )",
      "style": {
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "display": "flex",
        "border-radius": "16px",
        "align-items": "center",
        "overflow": "hidden",
        "margin": "4px 4px 4px 4px",
        "border": "1px solid"
      },
      "attributes": {
        "class": "=if(@currentField == 0 ,'ms-fontColor-themePrimary ms-borderColor-themePrimary ms-bgColor-white' , if(@currentField == 1, 'ms-fontColor-themePrimary ms-borderColor-themePrimary ms-bgColor-themeLighter' , if(@currentField == 2 , 'ms-fontColor-white ms-borderColor-themePrimary ms-bgColor-themePrimary','') ) )"
      }
    },
    {
      "elmType": "div",
      "style": {
        "font-size": "18px",
        "cursor": "pointer",
        "padding": "10px",
        "border-radius": "50%"
      },
      "attributes": {
        "iconName": "MoreVertical",
        "class": "ms-fontColor-themePrimary ms-bgColor-themeLighter--hover"
      },
      "customCardProps": {
        "openOnEvent": "click",
        "directionalHint": "rightCenter",
        "isBeakVisible": true,
        "formatter": {
          "elmType": "div",
          "txtContent": "=if(@currentField == 0, 'Promote (Change to 2:News)', 'Demote (Change to 0:Page)')",
          "style": {
            "padding": "10px 20px 10px 20px",
            "cursor": "pointer"
          },
          "attributes": {
            "class": "ms-bgColor-themeLighter--hover"
          },
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "PromotedState": "=if(@currentField == 0, 2, 0)"
            }
          }
        }
      }
    }
  ]
}

From the contributor

How to use this sample

Summary

In the Site Pages library, there is a Promoted State column. Depending on the value stored in this column, you can identify whether it is a site page or a news page. The correspondence between the value and page type is as follows.

Promoted State Page Type
0 Site page
1 News page not yet published
2 News page

Once a page is created as news page, it cannot be demoted to a site page under normal circumstances.

This sample demonstrates how to use the setValue action to update the value of the Promoted State column to 0 and demote the news page to a site page.

screenshot of the sample

After demoting it, please republish it. Otherwise, view-only users will not reflect the change and the page will remain displayed as a news page.

screenshot of how to republish

Prerequisites

The Promoted State column needs to be displayed in the view. The following is how to display it.

  1. Click any column.
  2. Hover Column Settings
  3. Click Show/hide Columns
  4. Check Promoted State
  5. Click Apply

screenshot to show the promoted state

View requirements

This format can be applied to a Promoted State column.

Sample

Solution Author(s)
promotedstate-demote-news.json Tetsuya Kawahara & Cory Schwartz

Version history

Version Date Comments
1.0 December 11, 2021 Initial release
1.1 January 2, 2024 Added ability to promote back into page
1.2 January 6, 2024 Fixed the more icon not to wrap

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.