SharePoint List - Custom JSON Column Formatting - Office UI Fabric Icon for Any Selected Value?

%3CLINGO-SUB%20id%3D%22lingo-sub-1241323%22%20slang%3D%22en-US%22%3ESharePoint%20List%20-%20Custom%20JSON%20Column%20Formatting%20-%20Office%20UI%20Fabric%20Icon%20for%20Any%20Selected%20Value%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1241323%22%20slang%3D%22en-US%22%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHi%20all%20-%20first%20post%20of%20hopefully%20not%20%3CEM%3Etoo%3C%2FEM%3E%20many!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20manage%20a%20number%20of%20SharePoint%20lists%20and%20am%20familar%20with%20using%20basic%20JSON%20formatting%20to%20display%20custom%20colours%20and%20icons%20from%20the%20Office%20UI%20Fabric.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20I%20have%20a%20choice%20field%2C%20I%20know%20how%20to%20show%20a%20given%20icon%20from%20the%20Office%20UI%20Fabric%2C%20but%20is%20there%20a%20way%20to%20show%20the%20same%20icon%20regardless%20of%20the%20value%20displayed%20in%20the%20field%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFor%20example%2C%20if%20you%20had%20a%20choice%20field%20called%20'Location'%20and%20you%20had%20100%20locations%20to%20choose%20from%2C%20you%20might%20want%20the%20'POI'%20or%20'MapPin'%20icon%20to%20display%20regardless%20of%20which%20option%20is%20chosen%3F%20To%20write%20the%20JSON%20for%20each%20and%20every%20option%20just%20seems%20so%20long!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHope%20somebody%20can%20help!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EMany%20thanks%20in%20advance%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1241323%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EJson%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1242034%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20List%20-%20Custom%20JSON%20Column%20Formatting%20-%20Office%20UI%20Fabric%20Icon%20for%20Any%20Selected%20Value%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1242034%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F357604%22%20target%3D%22_blank%22%3E%40badamsSP%3C%2FA%3E%2C%20you%20can%20use%20the%20following%20JSON%20to%20format%20your%20column%20so%20that%20each%20item%20shows%20the%20same%20icon%2C%20for%20example%20the%20MapPin%3A%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CPRE%3E%7B%0A%20%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%22%2C%0A%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%22class%22%3A%20%22sp-field-severity--good%22%0A%20%20%7D%2C%0A%20%20%22children%22%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22elmType%22%3A%20%22span%22%2C%0A%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22display%22%3A%20%22inline-block%22%2C%0A%20%20%20%20%20%20%20%20%22padding%22%3A%20%2212px%204px%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22iconName%22%3A%20%22MapPin%22%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22elmType%22%3A%20%22span%22%2C%0A%20%20%20%20%20%20%22txtContent%22%3A%20%22%40currentField%22%0A%20%20%20%20%7D%0A%20%20%5D%0A%7D%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22sameIconAllItems.png%22%20style%3D%22width%3A%20371px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F178478iEA9231A192BC1A15%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22sameIconAllItems.png%22%20alt%3D%22sameIconAllItems.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3CBR%20%2F%3E%3CFONT%20size%3D%222%22%20color%3D%22%233366FF%22%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FFONT%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Visitor

 

Hi all - first post of hopefully not too many!

 

I manage a number of SharePoint lists and am familar with using basic JSON formatting to display custom colours and icons from the Office UI Fabric. 

 

If I have a choice field, I know how to show a given icon from the Office UI Fabric, but is there a way to show the same icon regardless of the value displayed in the field?

 

For example, if you had a choice field called 'Location' and you had 100 locations to choose from, you might want the 'POI' or 'MapPin' icon to display regardless of which option is chosen? To write the JSON for each and every option just seems so long!

 

Hope somebody can help!

 

Many thanks in advance

1 Reply
Highlighted

Hi @badamsSP, you can use the following JSON to format your column so that each item shows the same icon, for example the MapPin:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "sp-field-severity--good"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "12px 4px"
      },
      "attributes": {
        "iconName": "MapPin"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

 

sameIconAllItems.png

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User