Need help in setting up Indicators from a SharePoint List to a SharePoint Page

[JerryZ1977]

I have a SharePoint list set up that currently has indicators of the status of deployment for systems (Deployed, In Development, Will not be Deployed, etc...) and a previous colleague had set this up to correspond to colored indicators in PowerApps, however that person left the company and I have no idea how to, or if its possible, replicate this on a standard SharePoint page... Can someone with more knowledge than I in SharePoint help me out with this? Pics Below for reference:

SharePoint List:

PowerApps:

[#2]

@JerryZ1977 

Check SharePoint Online JSON column and view formatting capabilities once. I may help for your requirements. Here are the related Microsoft official documentations:

1. Use column formatting to customize SharePoint 
2. Use view formatting to customize SharePoint 

OR if you have access to this Power App, you can add it on SharePoint page using Power Apps web part 

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#3]

@JerryZ1977  further to @ganeshsanap 's post, a simple bit of JSON column formatting is shown below and you would format each column with it. You then add a list web part to your page:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "padding-left": "8px",
    "color": "white",
    "background-color": "=if(@currentField == 'Not Started', '#ff0000', if(@currentField == 'Deployed', '#008080', if(@currentField == 'In Development', '#ff7400', if(@currentField == 'Will Not Be Deployed', '#8d8f90', ''))))"
  }
}

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)