jquery-contextmenu en visualización personalizada

Hola,

En su fragmento vinculado, tiene lo siguiente, que carga las bibliotecas JS de interés:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>

Utilizando npm para importar paquetes los configura como una dependencia, pero no los carga; tienes que hacer algo similar en tu código cuando/dónde quieras usarlos.

Si está utilizando ES6, eche un vistazo a cómo funcionan las importaciones de ES6. Verá declaraciones similares en la parte superior de su visual.ts para el material estándar que se está cargando el visual, por ejemplo:

import '@babel/polyfill';
import './../style/visual.less';
import powerbi from 'powerbi-visuals-api';
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
...

Los dos inferiores son extensiones de la tercera línea, pero uno cuya dependencia se ha importado y luego se puede hacer referencia para especificar otros como variables más simples.

Hay instrucciones sobre cómo incluir jQuery en su proyecto en el sitio NPM de jQuery. La sección que desea estará bajo Babel (observe que importar ‘@babel/polyfill’ arriba?), específicamente:

Babel es un compilador de JavaScript de próxima generación. Una de las funciones es la capacidad de usar módulos ES6/ES2015 ahora, aunque los navegadores aún no admiten esta función de forma nativa.

import $ from "jquery";

---

A continuación, puede acceder PS como un objeto en tu visual.ts.

Recomiendo cambiar esto ligeramente, como si instalara los tipos para jQuery (npm i @tipos/jquery) entonces no le gusta PS como referencia (el módulo exporta una variable llamada jQuery en vez de PS), y generalmente es recomendable usar lo siguiente:

import * as jQuery from 'jquery';
import 'jquery-contextmenu';

… y luego refiriéndose a jQuery en vez de PS en su código, por ejemplo:

jQuery(function () {
    jQuery.contextMenu({
        ...
    })
});

Revisé esto y las bibliotecas se cargan (y lo probé jQuery.contextMenu existe), por lo que ya no obtendrá los errores que estaba recibiendo. Sin embargo, en realidad no uso esta biblioteca, así que no puedo aconsejarte más sobre cómo la usarás en tu visual, pero espero que esto te ayude un poco.

Cabe destacar que la API también admite un menú contextual, por lo que también puede probar esto (personalmente aún no lo he usado).

¡Buena suerte!

Daniel

Hola,

En su fragmento vinculado, tiene lo siguiente, que carga las bibliotecas JS de interés:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>

Utilizando npm para importar paquetes los configura como una dependencia, pero no los carga; tienes que hacer algo similar en tu código cuando/dónde quieras usarlos.

Si está utilizando ES6, eche un vistazo a cómo funcionan las importaciones de ES6. Verá declaraciones similares en la parte superior de su visual.ts para el material estándar que se está cargando el visual, por ejemplo:

import '@babel/polyfill';
import './../style/visual.less';
import powerbi from 'powerbi-visuals-api';
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
...

Los dos inferiores son extensiones de la tercera línea, pero uno cuya dependencia se ha importado y luego se puede hacer referencia para especificar otros como variables más simples.

Hay instrucciones sobre cómo incluir jQuery en su proyecto en el sitio NPM de jQuery. La sección que desea estará bajo Babel (observe que importar ‘@babel/polyfill’ arriba?), específicamente:

Babel es un compilador de JavaScript de próxima generación. Una de las funciones es la capacidad de usar módulos ES6/ES2015 ahora, aunque los navegadores aún no admiten esta función de forma nativa.

import $ from "jquery";

---

A continuación, puede acceder PS como un objeto en tu visual.ts.

Recomiendo cambiar esto ligeramente, como si instalara los tipos para jQuery (npm i @tipos/jquery) entonces no le gusta PS como referencia (el módulo exporta una variable llamada jQuery en vez de PS), y generalmente es recomendable usar lo siguiente:

import * as jQuery from 'jquery';
import 'jquery-contextmenu';

… y luego refiriéndose a jQuery en vez de PS en su código, por ejemplo:

jQuery(function () {
    jQuery.contextMenu({
        ...
    })
});

Revisé esto y las bibliotecas se cargan (y lo probé jQuery.contextMenu existe), por lo que ya no obtendrá los errores que estaba recibiendo. Sin embargo, en realidad no uso esta biblioteca, así que no puedo aconsejarte más sobre cómo la usarás en tu visual, pero espero que esto te ayude un poco.

Cabe destacar que la API también admite un menú contextual, por lo que también puede probar esto (personalmente aún no lo he usado).

¡Buena suerte!

Daniel