Cannot import my own custom visual

[ziyi]

Hello,

I created a custom visual with PowerBI Visuals Tools version 2.3.0.

It works fine at my local environment.

So I import it to PowerBI Online, PowerBI shows a error message.

And also JavaScript shows this.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://wabi-south-east-asia-redirect.analysis.windows.net/powerbi/content/visual. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]

How can I fix this ?

[v-evelk]

Hello,

Looks like your visual tries to communicate with the outer environment (outside iframe) by sending some events or so on.

If there is a possibility to provide access to your code, I can try to investigate the issue.

Thanks!

Evgenii Elkin,

Software Engineer

Microsoft Power BI Custom Visuals
[email protected]

[ziyi]

Hello,

I pushed my code to github.

https://github.com/sengokyu/ex-powerbi-and-igniteui

Following are parts of my code.

visuals.ts

module powerbi.extensibility.visual {
    'use strict';

    export class Visual implements IVisual {
        private table: JQuery<HTMLElement>; // ignite-ui grid
        // (snip)
        constructor(options: VisualConstructorOptions) {
            // (snip)
            try {
                this.table.igGrid(params);
            } catch (err) {
                console.log(err);
            }
        }
        // (snip)
    }
}

pbiviz.json

{
  /* (snip) */
  "externalJS": [
    "node_modules/jquery/dist/jquery.js",
    "src/jquery.adapter.js",
    "vendor/jquery-ui-1.12.1/jquery-ui.js",
    "vendor/ignite-ui/js/infragistics.core.js",
    "vendor/ignite-ui/js/infragistics.lob.js",
    "src/infragistics.adapter.js",
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js"
  ],
  /* (snip) */
}

igGrid is a component manufactured by Infragistics.

https://www.infragistics.com/products/ignite-ui

Thank you.

[v-evelk]

I tried to build it but it requires some files from "vendor" folder.

Is it possible to provide them?

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
[email protected]

[ziyi]

I zipped some files in vendor directory.

https://1drv.ms/f/s!AoOnXNteXYjpiQSsAS6l4wOfeDvP

Zip password: greatbi

I will delete this file after a day.

Thanks.

[v-evelk]

Thanks, I have downloaded them.

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
[email protected]

[v-evelk · Accepted solution]

The reason was found.

Your package has size of more than 3Mb but PowerBI Service alow to import packages of size no more than 2Mb.

In than case you should unpack a built package by any archivator and pack manually as zip file and then change the extension to PIVIZ. It must help to reduce the package size.

Also you can use new tools that let to use JS modules and import 3rd party libraries as modules without including external links to pbiviz.json. It must help to reduce a package size and simplify work with outer libraries.

Details you can find by the following link (https://community.powerbi.com/t5/Custom-Visuals-Community-Blog/New-Beta-version-of-powerbi-visual-to...)

[ziyi]

Thank you! You saved me.

I did unzip pbiviz and re-zip them.

unzip exGrid.pbiviz
zip -9 -r exGrid.zip package.json resources
mv exGrid.zip exGrid.rezip.pbiviz

I have imported my pbiviz successfully.

[Anujshaan]

Can you elaborate how you acheived this?

[v-viig]

We are integrating ZIP compression into PBIVIZ 3.x.x. It will be released soon once we are sure it works well.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]