That Thing Called columnMap

With Salesforce’s Spring 18 release they introduced a new parameter in the Dashboard JSON called columnMap. While Salesforce has good reasons to introduce this – more on this is still to come – then it can cause a little conflict in your Dashboards when you try to customize it behind the scenes. One thing I always use when I design dashboard is static steps, they are amazing and you can read more about it here and here. The static step is a typical example where you have to use bindings with grouping and measures and this is where the columnMap parameter often is acting up throwing errors. The error might not tell you exactly what is wrong or that it has to to with columnMap, but you’ll get a “lovely” little error indication and no results on your dashboard.

So if you are doing bindings is a dashboard that is created after Spring18 there is a good chance the columnMap parameter is to blame. Now I am sure you are asking how do we fix this? It’s actually relatively simple.

If we look at the dashboard above I have two steps in it; one that shows a waterfall graph (or should when it is working) and one toggle. The toggle step is a static step that is bound to the waterfall graph. In case you want to see how it looks behind the scene here are the details of my two steps “BindingStep_1” and “Static_1” (you can get the same view by hitting command+E or control+E):

"steps": {
 "BindingStep_1": {
 "type": "aggregateflex",
 "visualizationParameters": {
 "options": {},
 "type": "chart",
 "parameters": {
 "visualizationType": "waterfall",
 "theme": "wave",
 "title": {
 "label": "",
 "fontSize": 14,
 "subtitleLabel": "",
 "subtitleFontSize": 11,
 "align": "center"
 },
 "showValues": true,
 "dimensionAxis": {
 "showAxis": true,
 "showTitle": true,
 "title": ""
 },
 "measureAxis1": {
 "sqrtScale": false,
 "showAxis": true,
 "customDomain": {
 "showDomain": false
 },
 "showTitle": true,
 "title": ""
 },
 "tooltip": {
 "customizeTooltip": false,
 "showDimensions": true,
 "dimensions": "",
 "showMeasures": true,
 "measures": "",
 "showPercentage": true,
 "showBinLabel": true
 },
 "trellis": {
 "enable": false,
 "showGridLines": true,
 "flipLabels": false,
 "type": "x",
 "chartsPerLine": 4,
 "size": [
 100,
 100
 ]
 },
 "columnMap": {
 "trellis": [],
 "dimensionAxis": [
 "StageName"
 ],
 "measureAxis1": [
 "sum_Amount"
 ]
 },
 "totalValue": "computeTotal",
 "totalLabel": "",
 "positiveColor": "#0BA976",
 "negativeColor": "#E41E42",
 "startColor": "#1674D9",
 "totalColor": "#1674D9"
 }
 },
 "datasets": [
 {
 "id": "0Fb0N000000bmLLSAY",
 "name": "Oppty",
 "label": "Oppty",
 "url": "/services/data/v42.0/wave/datasets/0Fb0N000000bmLLSAY"
 }
 ],
 "useGlobal": true,
 "isGlobal": false,
 "query": {
 "measures": [
 [
 "sum",
 "Amount"
 ]
 ],
 "groups": "{{column(Static_1.selection, [\"value\"]).asObject()}}"
 },
 "label": "BindingStep",
 "broadcastFacet": true,
 "receiveFacet": true,
 "selectMode": "single"
 },
 "Static_1": {
 "type": "staticflex",
 "numbers": [],
 "strings": [],
 "groups": [],
 "broadcastFacet": true,
 "selectMode": "singlerequired",
 "label": "Static",
 "values": [
 {
 "display": "Type",
 "value": "Type"
 },
 {
 "display": "Stage",
 "value": "StageName"
 }
 ]
 }
 },

Now what we need to focus on is the BindingStep_1, cause this is where we have the troublemaker columnMap, you can see the details highlighted below.

"BindingStep_1": {
 "type": "aggregateflex",
 "visualizationParameters": {
 "options": {},
 "type": "chart",
 "parameters": {
 "visualizationType": "waterfall",
 "theme": "wave",
 "title": {
 "label": "",
 "fontSize": 14,
 "subtitleLabel": "",
 "subtitleFontSize": 11,
 "align": "center"
 },
 "showValues": true,
 "dimensionAxis": {
 "showAxis": true,
 "showTitle": true,
 "title": ""
 },
 "measureAxis1": {
 "sqrtScale": false,
 "showAxis": true,
 "customDomain": {
 "showDomain": false
 },
 "showTitle": true,
 "title": ""
 },
 "tooltip": {
 "customizeTooltip": false,
 "showDimensions": true,
 "dimensions": "",
 "showMeasures": true,
 "measures": "",
 "showPercentage": true,
 "showBinLabel": true
 },
 "trellis": {
 "enable": false,
 "showGridLines": true,
 "flipLabels": false,
 "type": "x",
 "chartsPerLine": 4,
 "size": [
 100,
 100
 ]
 },
 "columnMap": {
 "trellis": [],
 "dimensionAxis": [
 "StageName"
 ],
 "measureAxis1": [
 "sum_Amount"
 ]
 },
 "totalValue": "computeTotal",
 "totalLabel": "",
 "positiveColor": "#0BA976",
 "negativeColor": "#E41E42",
 "startColor": "#1674D9",
 "totalColor": "#1674D9"
 }
 },
 "datasets": [
 {
 "id": "0Fb0N000000bmLLSAY",
 "name": "Oppty",
 "label": "Oppty",
 "url": "/services/data/v42.0/wave/datasets/0Fb0N000000bmLLSAY"
 }
 ],
 "useGlobal": true,
 "isGlobal": false,
 "query": {
 "measures": [
 [
 "sum",
 "Amount"
 ]
 ],
 "groups": "{{column(Static_1.selection, [\"value\"]).asObject()}}"
 },
 "label": "BindingStep",
 "broadcastFacet": true,
 "receiveFacet": true,
 "selectMode": "single"
 },

So what do we do? Well, remove the highlighted bit and replace it with “columnMap”: null, – it should look something like this:

"BindingStep_1": {
 "type": "aggregateflex",
 "visualizationParameters": {
 "options": {},
 "type": "chart",
 "parameters": {
 "visualizationType": "waterfall",
 "theme": "wave",
 "title": {
 "label": "",
 "fontSize": 14,
 "subtitleLabel": "",
 "subtitleFontSize": 11,
 "align": "center"
 },
 "showValues": true,
 "dimensionAxis": {
 "showAxis": true,
 "showTitle": true,
 "title": ""
 },
 "measureAxis1": {
 "sqrtScale": false,
 "showAxis": true,
 "customDomain": {
 "showDomain": false
 },
 "showTitle": true,
 "title": ""
 },
 "tooltip": {
 "customizeTooltip": false,
 "showDimensions": true,
 "dimensions": "",
 "showMeasures": true,
 "measures": "",
 "showPercentage": true,
 "showBinLabel": true
 },
 "trellis": {
 "enable": false,
 "showGridLines": true,
 "flipLabels": false,
 "type": "x",
 "chartsPerLine": 4,
 "size": [
 100,
 100
 ]
 },
 "columnMap": null,
 "totalValue": "computeTotal",
 "totalLabel": "",
 "positiveColor": "#0BA976",
 "negativeColor": "#E41E42",
 "startColor": "#1674D9",
 "totalColor": "#1674D9"
 }
 },
 "datasets": [
 {
 "id": "0Fb0N000000bmLLSAY",
 "name": "Oppty",
 "label": "Oppty",
 "url": "/services/data/v42.0/wave/datasets/0Fb0N000000bmLLSAY"
 }
 ],
 "useGlobal": true,
 "isGlobal": false,
 "query": {
 "measures": [
 [
 "sum",
 "Amount"
 ]
 ],
 "groups": "{{column(Static_1.selection, [\"value\"]).asObject()}}"
 },
 "label": "BindingStep",
 "broadcastFacet": true,
 "receiveFacet": true,
 "selectMode": "single"
 },

Now if you are quick and go back to view your dashboard you would have noticed you still get the error. Why? Well, there is one more columnMap in the widget section we need to go back to. I know that my step is called BindingStep_1, so I need to find the widget that is referring to that and again you’ll need to find the parameter columnMap as I’ve highlighted. By the way, if you are unsure how to find the correct widget have a look at the step parameter within the widget, which I’ve also highlighted below it’s very easy to find using command+F or control+F (which opens up the search bar).

"chart_1": {
 "type": "chart",
 "parameters": {
 "visualizationType": "waterfall",
 "title": {
 "label": "",
 "fontSize": 14,
 "subtitleLabel": "",
 "subtitleFontSize": 11,
 "align": "center"
 },
 "theme": "wave",
 "showValues": true,
 "dimensionAxis": {
 "showAxis": true,
 "showTitle": true,
 "title": ""
 },
 "measureAxis1": {
 "sqrtScale": false,
 "showAxis": true,
 "customDomain": {
 "showDomain": false
 },
 "showTitle": true,
 "title": ""
 },
 "tooltip": {
 "customizeTooltip": false,
 "showDimensions": true,
 "dimensions": "",
 "showMeasures": true,
 "measures": "",
 "showPercentage": true,
 "showBinLabel": true
 },
 "trellis": {
 "enable": false,
 "showGridLines": true,
 "flipLabels": false,
 "type": "x",
 "chartsPerLine": 4,
 "size": [
 100,
 100
 ]
 },
 "exploreLink": true,
 "totalValue": "computeTotal",
 "totalLabel": "",
 "positiveColor": "#0BA976",
 "negativeColor": "#E41E42",
 "startColor": "#1674D9",
 "totalColor": "#1674D9",
 "columnMap": {
 "trellis": [],
 "dimensionAxis": [
 "StageName"
 ],
 "measureAxis1": [
 "sum_Amount"
 ]
 },
 "step": "BindingStep_1"
 }
 }
We will do the same thing here as we did for the step replace the “columnMap”: {…}, with “columnMap”: null,
"chart_1": {
 "type": "chart",
 "parameters": {
 "visualizationType": "waterfall",
 "title": {
 "label": "",
 "fontSize": 14,
 "subtitleLabel": "",
 "subtitleFontSize": 11,
 "align": "center"
 },
 "theme": "wave",
 "showValues": true,
 "dimensionAxis": {
 "showAxis": true,
 "showTitle": true,
 "title": ""
 },
 "measureAxis1": {
 "sqrtScale": false,
 "showAxis": true,
 "customDomain": {
 "showDomain": false
 },
 "showTitle": true,
 "title": ""
 },
 "tooltip": {
 "customizeTooltip": false,
 "showDimensions": true,
 "dimensions": "",
 "showMeasures": true,
 "measures": "",
 "showPercentage": true,
 "showBinLabel": true
 },
 "trellis": {
 "enable": false,
 "showGridLines": true,
 "flipLabels": false,
 "type": "x",
 "chartsPerLine": 4,
 "size": [
 100,
 100
 ]
 },
 "exploreLink": true,
 "totalValue": "computeTotal",
 "totalLabel": "",
 "positiveColor": "#0BA976",
 "negativeColor": "#E41E42",
 "startColor": "#1674D9",
 "totalColor": "#1674D9",
 "columnMap":null,
 "step": "BindingStep_1"
 }
 }
Now you can return to your dashboard and it should look great!
Note that I previously had “columns”: [] instead of “columnMap”: null. You can use both but the latter should be more future proof of the further changes there may very well come to columnMap.

8 thoughts on “That Thing Called columnMap”

  • 1
    Mark on April 24, 2018 Reply

    Thanks, Rikke!

  • 2
    Jagan on May 22, 2018 Reply

    Thanks for updating the modifications in accordance with Spring18. Its working like magic.

  • 3
    Simon on February 4, 2019 Reply

    This blog just saved my life at a customer – yet again!

    • 4
      Rikke on February 4, 2019 Reply

      Happy to help. Also easy trick when selecting is using ctrl+P to – if you are at a starting bracket it will find the matching ending bracket.

  • 5
    Pirouz on May 3, 2019 Reply

    Hi
    what about vise versa, what if the user clicks on a segment of a stackbar chart the colums and the data of a table changes (both stack chart and the table are from the same dataset), i can control the table with a toggle button (selection function in json) but how can i get the selection event from the chart ?
    is it related to “columnMap” thing ??
    thanks

  • 6
    Sarah on May 23, 2019 Reply

    Hi, one thing I’m running into that I cannot figure out with this. My chart uses columns where I have derived a value using values from other columns. When creating the chart I’ve hidden the columns I do not want to see when the chart is displayed in the dashboard, however, when I go through the binding steps the fields I did not want to see reappear. I’ve tried to figure out a way to get that piece back in the json (Out of columns A, B, C, D, E I only want to display columns A, C, E), but without luck. Is it possible to do this? Thank you.

  • 7
    Sarah on May 23, 2019 Reply

    Hi, I’m having an issue I’m running into that I’m hoping you might be able to help with. I’ve created a chart where I’m deriving some values using other column data and then hiding the columns I don’t want displayed on the chart in the dashboard. However, when I go through the binding steps, the columns I don’t want to see reappear (I only want to see columns A, C, E, but columns A, B, C, D, E are shown). I’ve attempted to try and figure out how to add back into the json the piece that tells it what columns to display, but without luck. Is it possible to do this? Thanks ~

  • 8
    Jacob Varghese on August 9, 2019 Reply

    Rikke, Thank you for your Awesome blog. Super helpful. I couldn’t limit the columns using columnMap when I added a group binding. I needed to add a columns section into the widget json. Have you been able to specify the columns using columnMap with group binding?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.