Forum Discussion
Chiclet slicer shows only 1000 values
- 7 years ago
I think the issue would be that you're using a version of the tools that is too new for the visual. I suggest trying the following (I have tested these steps on my machine and they work for me):
Cloning And Setup
- Clone the repository as normal.
- Run: npm i -g [email protected] (version number is important)
- You'll need to re-generate the certificate as the tooling has changed version. First run pbiviz --create-cert and then pbiviz --install-cert (it's two steps on the older tooling).
- Run npm i from the root folder of the project to make sure that the correct dependencies are installed (these are specified in package.json; using npm i to install packages manually will install the latest and not necessarily the correct ones for the code you're working with).
Verification
At this point, before making any changes, it's worth confirming that the code is in a ready state. The quickest way to do this is by using the development visual in the Power BI Surface as per the tutorial instructions. You can skip this section if you just want to compile the visual but it will be harder and more cumbersome to debug changes.
- Run pbiviz start from the project folder. This should compile as expected.
- Enable the developer visual as per the steps in the linked tutorial above.
- Add the Developer Visual to the canvas of your report.
- At this point, if the Developer Visual is blank (and not shaded grey with an error message) then the certificate is correctly allowing access to your code on your machine.
- Drag you desired field(s) into the visual and check it's doing what you expect.
Modifying Source Code and Testing
Now, you can make the changes you want. In your code, change the capabilities.json values, as well as the hard-coded settings previously linked from chicletSlicer.ts. When you save a file, the tooling should print the following in the console:
When you've made all your changes, refresh the visual in the service to confirm they work. You do this by clicking the reload button on the visual toolbar, e.g.:
Then, you should be able to make changes to the properties. For example, I changed my limit to 2000, so if I type 2001, the visual will cap it as follows:
Packaging
Once the code has been confirmed working, you can create the visual package:
- Change guid in pbiviz.json to a new value (adding 1 to the last number should be enough, as you were doing previously).
- Bonus points: it might also be worth changing the vales of name and displayName to indicate that this is your personalised Chiclet Slicer, so that if you have the marketplace version and your version loaded then you can confirm which is which by hovering over it, e.g.:
- Run pbiviz package from the root of your folder.
- Load the generated package into Desktop or the service as normal.
This will make the changes you want. If you need specific help with concepts such as console.log (which is one of the most fundamental debugging tools you can use) then it will be worth investing some time in becoming familiar with JavaScript - there are quite a few sites that can help with this. Once you have JavaScript concepts, down, then learning TypeScript (which is what the majority of custom visuals are written in) is a fairly natural extension, and actually a bit nicer.
Of course a good way to learn is to maybe have something like this visual working in the developer environment and them making changes and seeing what happens when you refresh the developer visual ;)
Good luck,
Daniel
I think the issue would be that you're using a version of the tools that is too new for the visual. I suggest trying the following (I have tested these steps on my machine and they work for me):
Cloning And Setup
- Clone the repository as normal.
- Run: npm i -g [email protected] (version number is important)
- You'll need to re-generate the certificate as the tooling has changed version. First run pbiviz --create-cert and then pbiviz --install-cert (it's two steps on the older tooling).
- Run npm i from the root folder of the project to make sure that the correct dependencies are installed (these are specified in package.json; using npm i to install packages manually will install the latest and not necessarily the correct ones for the code you're working with).
Verification
At this point, before making any changes, it's worth confirming that the code is in a ready state. The quickest way to do this is by using the development visual in the Power BI Surface as per the tutorial instructions. You can skip this section if you just want to compile the visual but it will be harder and more cumbersome to debug changes.
- Run pbiviz start from the project folder. This should compile as expected.
- Enable the developer visual as per the steps in the linked tutorial above.
- Add the Developer Visual to the canvas of your report.
- At this point, if the Developer Visual is blank (and not shaded grey with an error message) then the certificate is correctly allowing access to your code on your machine.
- Drag you desired field(s) into the visual and check it's doing what you expect.
Modifying Source Code and Testing
Now, you can make the changes you want. In your code, change the capabilities.json values, as well as the hard-coded settings previously linked from chicletSlicer.ts. When you save a file, the tooling should print the following in the console:
When you've made all your changes, refresh the visual in the service to confirm they work. You do this by clicking the reload button on the visual toolbar, e.g.:
Then, you should be able to make changes to the properties. For example, I changed my limit to 2000, so if I type 2001, the visual will cap it as follows:
Packaging
Once the code has been confirmed working, you can create the visual package:
- Change guid in pbiviz.json to a new value (adding 1 to the last number should be enough, as you were doing previously).
- Bonus points: it might also be worth changing the vales of name and displayName to indicate that this is your personalised Chiclet Slicer, so that if you have the marketplace version and your version loaded then you can confirm which is which by hovering over it, e.g.:
- Run pbiviz package from the root of your folder.
- Load the generated package into Desktop or the service as normal.
This will make the changes you want. If you need specific help with concepts such as console.log (which is one of the most fundamental debugging tools you can use) then it will be worth investing some time in becoming familiar with JavaScript - there are quite a few sites that can help with this. Once you have JavaScript concepts, down, then learning TypeScript (which is what the majority of custom visuals are written in) is a fairly natural extension, and actually a bit nicer.
Of course a good way to learn is to maybe have something like this visual working in the developer environment and them making changes and seeing what happens when you refresh the developer visual ;)
Good luck,
Daniel