topic Creating custom Chiclet Slicer in Developer

Creating custom Chiclet Slicer

Anonymous — Thu, 31 Oct 2019 15:28:55 GMT

Hi!

I have been using the Chiclet Slicer in my report, but need to comply with certain coloring and formatting conventions. The text color needs to be white, and the text within the chiclets needs to be left-aligned, to name a few. Now I know the chiclet slicers are open-sources, so I cloned the code and went to edit it. Now, I am trying to re-package the files so that I can import them as custom visuals in Power BI online.

My issue is that the 'pbiviz' command is not able to successfully run, despite very little being changed in the code itself. I have followed a number of tutorials that explain making custom visuals, but cannot package this one.

What is the issue I am having?

Any help or tips would be appreciated. Thanks!

Re: Creating custom Chiclet Slicer

dm-p — Thu, 31 Oct 2019 21:57:23 GMT

Hi @Anonymous,

Without getting detail of the output for your pbiviz command, it's hard to provide targeted help. Are you running pbiviz package or pbiviz start when you get the error?

Here's my guess as to what you might need to get started correctly:

I presume that you have the latest version of the custom visuals SDK (3.1.x) installed?

If so, from looking at the pbiviz.json in the GitHub repo, the visual is using version 1.13 of the SDK/API. So, instead of installing the latest version of the SDK (which is 2 versions higher than this and there are some breaking changes), you'll need to install the target version the visual was developed on. Instead of using this command to install the SDK:

npm i power-bi-visuals-tools -g

Run this:

npm i power-bi-visuals-tools@1.13 -g

You will then need to re-initialise your certificate as per setup instructions, as the version has changed from the one you had installed.

If you haven't updated the Node.js packages required for the visual then run this afterwards:

npm i

Provided that these two pre-requisites have been fulfillled, you should be able to run pbiviz start or pbiviz package successfully.

If you're still having trouble getting this to run, please come back with your output and I'll try and have a look for you.

Good luck!

Daniel

Re: Creating custom Chiclet Slicer

Anonymous — Mon, 04 Nov 2019 20:11:01 GMT

Hi @DM ,

I was able to 'downgrade' by running the script:

npm install -g powerbi-visuals-tools@1.13

I couldn't get the exact one that you suggested to run, but I rearranged and ran again with apparent success.

After navigating to the visual folder, my attempt to run the

pbiviz package

Was the following:

Re: Creating custom Chiclet Slicer

dm-p — Mon, 04 Nov 2019 20:24:11 GMT

Hi @LC

Sorry, I forgot to mention to run this after updating the SDK:

pbiviz update

To ensure that the SDK downloads the correct version of the API code into the .api folder (which is how the older version stores the API locally... the newer version uses the node_modules folder).

This will potentially require another refresh of the certificate if you want to use pbiviz start afterwards.

You should then be able to run pbiviz package.

One other thing to consider if you're packaging:

The Chiclet Slicer is a published visual, so if you try to load it into either Power BI Desktop or the Power BI Service, the version in the marketplace will always be loaded.
This is to ensure that for visuals in the marketplace, the current version is always served, so that you don't have to worry about manually updating your reports.
You will need to assign a new guid if you're rolling your own visual so that you can test it.
Open pbiviz.json, and find the guid field under the visual object key. For reference, here's the corresponding line in the Chiclet Slicer source code.
Modify this number to something unique - you can probably add a '1' to it and that should be sufficient.
You might also want to change other parts of the file, e.g. the displayName, so that you know the visual is not the original Chiclet Slicer when you see it in the visual palette (particularly if you have the original loaded in there too).

Hopfully this should be the rest of what you need. Apologies for missing that out originally.

Good luck!

Daniel