Why does developer visual work in one report but not in another?

[emmasaunders]

Hi, I have built a double-histogram as a custom visual. I can preview fine using the developer visual in Power BI Service. 

Now I try to pull the same developer visual into a different report, with the server serving the same visual from the same location. I'm using the same browser (Chrome). I've tried logging in and out etc. But the visual won't work properly. The Formatting pane doesn't show any of my "objects" from capabilities.json, for example. And the data roles in the Fields pane show, but won't let me drag and drop any fields into them. Initially I got an error saying "The visual isn't configured correctly to render the visual". But this error no longer displays.

The second report has an updated data model. However I'm not even getting to the point where I can pull altered data into the report. I'm getting no particular errors in the console, apart from some 404 and 500 server errors when I switch reports (which i think is normal).

The visual compiles fine and I have packaged to a pbiviz file. When imported, this file won't work in either report.

Does anyone have any idea what the cause can be? I'm really confused.

[dm-p]

Hi @emmasaunders,

I see you're checking the console, but have you added any logging to your visual to see if it completes (or starts) rendering?  When you create a new visual with pbiviz new, there are some boilerplate console.log statements for the constructor and the update methods - are these still in your code and appearing at all? If you're not even getting this far than it could well be something with the capabilites, or possibly something else in the code - it is possible to break the formatting pane if you're using an enumerateObjectInstances method and manipulating objects, for instance.

Are you able to share any code? I can take a look and see if I can offer some help for you if so.

Regards,

Daniel

[emmasaunders]

Hi Daniel 

Where do I put the logExceptions code? It throws an error wherever I try.

I have tried to post code in reply to you several times but either my replies get removed (marked as spam!) or the code itself is too long. 

Thanks

Emma

[dm-p]

Hi @emmasaunders,

If you're referring to this article, I've never found it particularly handy as it doesn't work for the latest versions of the SDK. There is supposedly a working version in the Git repo issues but I haven't perservered with it so YMMV.

Personally, I just use a simple try/catch block with my code to quickly diagnose anything obvious:

            public update(options: VisualUpdateOptions) {

                /** Handle main update flow */
                    try {
                        console.log('Visual update', options);
                        this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);

                        /** My actual code goes here ... */

                        console.log('Finished rendering');
                        return;

                    } catch(e) {
                        console.log(`Rendering failed: ${e}`);

                        /** Any user-facing stuff in here */

                    }
            }

In my production code I use something similar but create a simple set of static methods for logging, based on a global flag that I set to indicate whether I'm developing or not. That way, I can put telemetry all through my code that I can use to quickly debug when I'm developing, and then set this flag to false when I publish so that end-users aren't subjected to it.

Regarding sharing code, either a source repo link (e.g. Github) or a public OneDrive (or similar) share is usually the better way to get around file and forum limits. This way, we can attempt to reconstruct your entire project, incluing any NPM packages you might be using, just in case it's something there. See how you get on with the above to see if anything obvious falls out - if you want to forward on some code after that, feel free to try using one of the above methods, or feel free to PM me and I can provide you with an email address and we can arrange that way.

Good luck!

Daniel

[emmasaunders]

Hi Daniel @dm-p 

Thanks. I have tried previously to add the module powerbi.extensibility.visual function for logExceptions to my code but it throws multiple errors. E.g. "descriptor function not assignable to Method decorator" and "import declaration conflicts with local declaration of powerbi".

https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/how-to-debug/

Where do I put this code? Does it go inside the module powerbi.extensibility.visual in node_modules > powerbi-visuals-api > index.d.ts? Can it go anywhere in src/visual.ts? Both options throw errors.

The forum won't let me post visual.ts because it's > 20k characters. Here is capabilities.json

{
  "dataRoles": [
    {
      "displayName": "Bucket (x axis)",
      "name": "category",
      "kind": "Grouping"
    },
    {
      "displayName": "Population frequency (y1 axis)",
      "name": "population",
      "kind": "Measure"
    },
    {
      "displayName": "Sample frequency (y2 axis)",
      "name": "sample",
      "kind": "Measure"
    }
  ],
  "objects": {
    "barsPop": {
      "displayName": "Population bars",
      "properties": {
        "fill": {
          "displayName": "Bar colour",
          "type": { "fill": { "solid": { "color": true } } }
        },
        "transparency": {
          "displayName": "Bar transparency",
          "type": { "numeric": true }
        }
 
      }
 
    },
    "barsSample": {
      "displayName": "Sample bars",
      "properties": {
        "fill": {
          "displayName": "Bar colour",
          "type": { "fill": { "solid": { "color": true } } }
        },
        "transparency": {
          "displayName": "Bar transparency",
          "type": { "numeric": true }
        }
 
      }
 
    },
    "xAxis": {
      "displayName": "X axis",
      "properties": {
        "show": {
          "displayName": "Show x axis",
          "type": {
            "bool": true
          }
        },
        "title": {
          "description": "Label to show under x axis",
          "displayName": "X axis label",
          "type": {
            "text": true
          }
        }
      }
 
    },
    "y1Axis": {
      "displayName": "Y1 axis (left)",
      "properties": {
        "show": {
          "displayName": "Show y1 axis",
          "type": {
            "bool": true
          }
        },
        "title": {
          "description": "Label to show on y1 axis",
          "displayName": "Y1 axis label",
          "type": {
            "text": true
          }
        },
        "units": {
          "displayName": "Units",
          "type": {
            "formatting": {
              "labelDisplayUnits": true
            }
          }
        }
      }
    },
    "section2": {
      "displayName": "SECTION TWO",
      "properties": {
        "displayUnits": {
          "displayName": "Display Units",
          "type": {
            "formatting": {
              "labelDisplayUnits": true
            }
          }
        },
        "alignment": {
          "displayName": "Alignment",
          "type": {
            "formatting": {
              "alignment": true
            }
          }
        },
        "fontSize": {
          "displayName": "fontSize",
          "type": {
            "formatting": {
              "fontSize": true
            }
          }
        }
      }
 
    },
    "section3": {
      "displayName": "SECTION THREE",
      "properties": {
        "filter": {
          "type": {
            "filter": true
          }
        },
        "selfFilter": {
          "type": {
            "filter": {
              "selfFilter": true
            }
          }
        },
        "selfFilterEnabled": {
          "type": {
            "operations": {
              "searchEnabled": true
            }
          }
        }
      }
    }
  },
  "suppressDefaultTitle": true,
  "dataViewMappings": [
    {
      "conditions": [
        {
          "category": {
            "min": 1,
            "max": 1
          },
          "population": {
            "min": 1,
            "max": 1
          },
          "sample": {
            "max": 1
          }
        }
      ],
   
      "categorical": {
        "categories": {
          "for": {
            "in": "category"
          }
        },
        "values": {
 
          "select": [
            { "bind": { "to": "population" } },
            { "bind": { "to": "sample" } }
          ]
 
        }
      }
    }
  ]
}

package.json

{
  "name": "visual",
  "scripts": {
    "pbiviz": "pbiviz",
    "start": "pbiviz start",
    "package": "pbiviz package",
    "lint": "tslint -c tslint.json -p tsconfig.json"
  },
  "dependencies": {
    "@babel/runtime": "7.6.0",
    "@babel/runtime-corejs2": "7.6.0",
    "@types/d3": "5.7.2",
    "core-js": "3.2.1",
    "d3": "5.12.0",
    "powerbi-visuals-api": "~2.6.1",
    "powerbi-visuals-utils-dataviewutils": "2.2.1",
    "powerbi-visuals-utils-tooltiputils": "2.3.1"
  },
  "devDependencies": {
    "ts-loader": "6.1.0",
    "tslint": "^5.18.0",
    "tslint-microsoft-contrib": "^6.2.0",
    "typescript": "3.6.3"
  }
}

 tsconfig.json

{
    "compilerOptions": {
        "allowJs": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es6",
        "sourceMap": true,
        "outDir": "./.tmp/build/",
        "moduleResolution": "node",
        "declaration": true,
        "lib": [
            "es2015",
            "dom"
        ]
    },
    "files": [
        "./src/visual.ts"
    ]
}

When the visual doesn't work, the constructor function runs, but not the update function. thanks for any help