Update the existing code to incorporate icons into the column formatting

I'm seeking assistance from someone knowledgeable in JSON or coding as this is not my area of expertise.

In my sharepoint online list, I have customized the display to show different colors based on the text content in each item. Now, I am looking to incorporate icons into the columns as well. For instance, if the status is "New", I want it to display the chosen color as well as a + icon from the Office UI Fabric.

Below are the two separate codes that I have utilized, both of which work independently. My goal is to combine them together seamlessly.

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Completed', 'CheckMark', if(@currentField == 'Draft phase', 'Forward', if(@currentField == 'Approval phase', 'Error', if(@currentField == 'On hold', 'Warning', 'ErrorBadge'))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

   {
  "elmType": "div",
  "style": {
    "padding": "0 4px"
  },
  "attributes": {
    "class": {
      "operator": ":",
      "operands": [
        {
          "operator": "==",
          "operands": [
            {
              "operator": "toLowerCase",
              "operands": [
                "@currentField"
              ]
            },
            {
              "operator": "toLowerCase",
              "operands": [
                "New"
              ]
            }
          ]
        },
        "sp-css-backgroundColor-blueBackground07",
        {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                {
                  "operator": "toLowerCase",
                  "operands": [
                    "@currentField"
                  ]
                },
                {
                  "operator": "toLowerCase",
                  "operands": [
                    "Draft phase"
                  ]
                }
              ]
            },
            "sp-css-backgroundColor-warningBackground",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    {
                      "operator": "toLowerCase",
                      "operands": [
                        "@currentField"
                      ]
                    },
                    {
                      "operator": "toLowerCase",
                      "operands": [
                        "Approval phase"
                      ]
                    }
                  ]
                },
                "sp-css-backgroundColor-successBackground",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        {
                          "operator": "toLowerCase",
                          "operands": [
                            "@currentField"
                          ]
                        },
                        {
                          "operator": "toLowerCase",
                          "operands": [
                            "Ready for upload"
                          ]
                        }
                      ]
                    },
                    "sp-css-backgroundColor-blockingBackground",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            {
                              "operator": "toLowerCase",
                              "operands": [
                                "@currentField"
                              ]
                            },
                            {
                              "operator": "toLowerCase",
                              "operands": [
                                "Completed"
                              ]
                            }
                          ]
                        },
                        "sp-css-backgroundColor-neutralBackground",
                        {
                          "operator": ":",
                          "operands": [
                            {
                              "operator": "==",
                              "operands": [
                                {
                                  "operator": "toLowerCase",
                                  "operands": [
                                    "@currentField"
                                  ]
                                },
                                {
                                  "operator": "toLowerCase",
                                  "operands": [
                                    "On hold"
                                  ]
                                }
                              ]
                            },
                            "sp-css-backgroundColor-errorBackground",
                            ""
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "txtContent": "@currentField"
}
javascriptjsonsharepoint-online

Answer №1

Give this a try.

https://i.sstatic.net/BKziN.png

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "padding": "0 4px"
  },
  "attributes": {
    "class": {
      "operator": ":",
      "operands": [
        {
          "operator": "==",
          "operands": [
            {
              "operator": "toLowerCase",
              "operands": [
                "@currentField"
              ]
            },
            {
              "operator": "toLowerCase",
              "operands": [
                "New"
              ]
            }
          ]
        },
        "sp-css-backgroundColor-blueBackground07",
        {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                {
                  "operator": "toLowerCase",
                  "operands": [
                    "@currentField"
                  ]
                },
                {
                  "operator": "toLowerCase",
                  "operands": [
                    "Draft phase"
                  ]
                }
              ]
            },
            "sp-css-backgroundColor-warningBackground",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    {
                      "operator": "toLowerCase",
                      "operands": [
                        "@currentField"
                      ]
                    },
                    {
                      "operator": "toLowerCase",
                      "operands": [
                        "Approval phase"
                      ]
                    }
                  ]
                },
                "sp-css-backgroundColor-successBackground",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        {
                          "operator": "toLowerCase",
                          "operands": [
                            "@currentField"
                          ]
                        },
                        {
                          "operator": "toLowerCase",
                          "operands": [
                            "Ready for upload"
                          ]
                        }
                      ]
                    },
                    "sp-css-backgroundColor-blockingBackground",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            {
                              "operator": "toLowerCase",
                              "operands": [
                                "@currentField"
                              ]
                            },
                            {
                              "operator": "toLowerCase",
                              "operands": [
                                "Completed"
                              ]
                            }
                          ]
                        },
                        "sp-css-backgroundColor-neutralBackground",
                        {
                          "operator": ":",
                          "operands": [
                            {
                              "operator": "==",
                              "operands": [
                                {
                                  "operator": "toLowerCase",
                                  "operands": [
                                    "@currentField"
                                  ]
                                },
                                {
                                  "operator": "toLowerCase",
                                  "operands": [
                                    "On hold"
                                  ]
                                }
                              ]
                            },
                            "sp-css-backgroundColor-errorBackground",
                            ""
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Completed', 'CheckMark', if(@currentField == 'Draft phase', 'Forward', if(@currentField == 'Approval phase', 'Error', if(@currentField == 'On hold', 'Warning', 'ErrorBadge'))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The offspring of a React component

How can I select a specific div in children using React without passing it as a prop? I want to transform the code snippet from: <Pane label="Tab 1"> <div>This is my tab 1 contents!</div> </Pane> to: <Pane> <div&g ...

javascriptreactjs

Troubleshooting bitrate and quality issues in AWS MediaConvert

Whenever I attempt to initiate a MediaConvert job in CBR, VBR, or QVBR mode with Bitrate or MaxBitrate exceeding 250,000, an error occurs. The message reads: "Unable to write to output file [s3:///videos//***/original.mp4]: [Failed to write data: Access D ...

javascriptnode.jsamazon-web-servicesaws-media-convert

What exactly does a 'hoisted manifest' mean when it comes to using Yarn?

Encountering an issue while attempting to install a package using yarn, I am receiving the error message: expected hoisted manifest for \"myPackage#@material-ui/core#react-dom\" However, the concept of a 'hoisted manifest' is not entir ...

javascriptnpmyarnpkg

Obtaining values from multi-dimensional arrays with JavaScript and node.js

I have a data structure like this: let arr = [ ['animal','lion'], ['plant','rose'], ['tree','coconut'], ] I want to reformat it to look like this: ['animal','lion' ...

javascriptnode.jsarrays

How to Call a Nested Object in JavaScript Dynamically?

var myObj = { bar_foo : "test", bar : { foo : "hi there"; }, foo : { bar : { foo: "and here we go!" } } } How can we achieve the following: var arr = [["bar", "foo"], ...

javascriptobjectdynamicreturn

"I am sending a JSON object to a PHP script and extracting the

I have created a form with PHP like this: <?php include '../db/baza.php'; ?> <?php include 'vrh.php' ?> <div id="page"> <div id="pageFrame"> <form action="up ...

javascriptphpmysqlajaxjson

When utilizing the built-in filter in Angular 2 ag-grid, the Clear Filter button efficiently removes any text from the filter box without needing to refresh the

When using ag-Grid's default filter feature, I noticed that the clear filter button only clears the text box and does not automatically refresh the column, even when the 'clearButton' and 'applyButton' parameters are set to true. T ...

javascriptangularangular2-directivesag-gridag-grid-ng2

Validation Error: Google OAuth Token JSON is Invalid

I have encountered an issue while attempting to validate an access token received from the Android SDK on the server side. I am making a call to the following API endpoint for validation: https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=<tok ...

jsonnode.jsoauthgoogle-oauth

Iterate over the contents within the div tag

I need help with looping through the data in this specific div container. My goal is to extract row by row data from it. <div id="result" runat=server> <div id="gvResult" class="RowGroup"> <div class="Row RowBg" tabindex="99"> ...

javascriptjquery

Encountering an issue with the npm start command in my React application

After using npx create-react-app basic to create a React app, I navigated to the basic folder and attempted to start it with npm start. However, I encountered the following error: npm start <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

javascriptreactjsnpmweb-development-servernpm-start

What is the best way to send a JSON array within another JSON array to a

Hey there, I need to send a JSON array containing two arrays of integers to the server using JsonObject. "job_experiences": [ { "job_category": [Integer], "experience_level": [Integer] } ] JsonArray list = ...

androidjsonpost

What is the best way to clear the cache in AngularJS?

It is crucial for the cache to be cleared consistently. However, no matter if a client is created, updated, or deleted, the same result always occurs. Only when I manually delete the cache (Ctrl+Shift+Supr), am I able to view the new data. .factory(' ...

javascriptangularjscachingresources

Guide on creating an empty ArrayList in JSON using Rest Assured

When serializing the JSON from a POJO class, I encountered an issue where passing null or empty values to the properties in the POJO class resulted in getting [""] in the array list instead of []. Expected: "Key": [] But Received: "Key":[""] This is how ...

jsonapiseleniumautomationrest-assured

Does Transclude eliminate tr and td elements from the content?

I'm encountering an issue with my angularjs application where the tr and td tags are mysteriously disappearing. angular.module('transcludeExample', []) .directive('pane', function() { return { restrict: 'E' ...

javascriptangularjs

Choose the currently active md-tab within the md-dialog's md-tab-group

I need to create a dynamic md-dialog with an md-tab-group that has two tabs. The md-dialog should open based on the button clicked, displaying the corresponding tab content. The initial template where the md-dialog is triggered: <button md-button class ...

javascriptangularangular-materialangular-material2

unexpected alteration of text sizing in mathjax within reveal.js presentations

Something strange is happening with the font size in my slides. The code for each slide is the same, but there is an unexpected change between the 3rd and 4th slide. I cannot figure out what is causing this discrepancy. Oddly enough, when I remove the tit ...

javascripthtmlcssmathjaxreveal.js

The plugin "react" encountered a conflict while trying to sync with both the "package.json" and the "BaseConfig" files

Whenever I open Terminal in my react folder and try to start the react app using npm start, I always end up encountering an error on the browser. The error message states that the "react" plugin is conflicting between two paths: "package.json » eslint ...

javascriptreactjs

Send a PHP object to JavaScript using AJAX

I have a PHP script that successfully uploads a video to the Microsoft Azure service using an API. The API returns a StdObject file, which I then want to send back to JavaScript via AJAX. However, when I try to access the "asset" object in JavaScript, it a ...

javascriptphpjqueryjsonajax

Displaying information on an Angular user interface grid

I am facing an issue with displaying data in a UI grid table. I have set up an API through which I can access the data in my browser, but I am encountering difficulties when it comes to rendering the data. Below is my Angular controller where I have defin ...

javascriptangularjsjsonangular-ui-grid

When Ajax responseText and echo fail, the header file contents are sent back instead

I have a section of code in my PHP file called thePhpFile.php that is used to handle an Ajax call: <?php require_once('usefulStuff.php'); // includes useful functions if (isset($_GET['zer'])) { $bFound = false; if(! $bF ...

phpjavascriptajaxecho