Crear widgets personalizados

Utilizando las funciones siguientes, puede configurar el archivo frontend.js para que devuelva un objeto:

init(context)

Esta función se ejecuta al inicializar un widget. El parámetro context incluye dos propiedades: element y scope. La propiedad element indica el objeto jQuery que contiene el nodo DOM de su widget. La propiedad scope indica el contexto angular de tu widget. También puedes cambiar el elemento DOM de tu widget con jQuery o cambiar el ámbito con AngularJS.

update(data, context)

Esta función se ejecuta cada vez que se recarga el cuadro de mandos. El objeto data contiene los datos que pueden vincularse al ámbito para su visualización. El objeto context es similar al parámetro utilizado en la función init . Ejemplo:

 javascript
 update: function(data, context) {
 // set your data in scope so you can use it where you need
 context.scope.data = data;}

También puede utilizar jQuery o Underscore.js para modificar sus datos como se indica en el siguiente ejemplo. Ejemplo:

javascript
update: function(data, context) {
// set your data in scope after transforming it so you can use it where you need
context.scope.data = _.map(data, function(element) {
  return {
      name: element.id,
      text: element.value }; });}

resize(size, context)

Esta función se ejecuta cada vez que se cambia el tamaño del widget. El objeto size debe incluir las direcciones width y height del widget. El objeto context es similar al parámetro utilizado en la función init .

El siguiente código es un ejemplo de cómo se pueden recuperar datos de un widget de tabla de otro cuadro de mando:

return {
  init: function (context) {
    var org = context.scope.utils.organizationKey;
    //context.scope.utils.organizationKey makes it possible to retrieve the organization of the current dashboard.
    var pId = context.scope.utils.projectName;
    //context.scope.utils.projectName makes it possible to retrieve the project name of the current dashboard.
    var dSlug = 'beautiful-dashboard';
    var wId = 'simpletable';
    //wId is the widget's name.
    
    var callback = function(data){
      console.info('Data: ',data);
      //Here you can process the data get by the API.
      return data;
    }
    context.scope.utils.loadWidgetData('dataFromWidget', dSlug, wId,pId, org, callback);
    //dataFromWidget is the name of the attribute from which the data of the widget view can be retrieved. 
  },
  update: function (data, context) {},
  resize: function (size, context) {}
};

También puede utilizar un código compactado sin argumentos opcionales:

  init: function (context) {
    var dSlug = 'beautiful-dashboard';
    var wId = 'simpletable';
    context.scope.utils.loadWidgetData('dataFromWidget', dSlug, wId);
  },
//In the compacted code, organization and processId are retrieved from the currently chosen dashboard.

El slug del cuadro de mandos puede recuperarse del modelo de información del cuadro de mandos:

El archivo view.html contiene el contenido del widget.

Puedes utilizar los siguientes helpers de angular para mostrar tus datos y cambiar elementos HTML basados en el contenido sin modificar el DOM con JavaScript:

• Expresiones

• Interpolación

• Filtros

• Puede utilizar el siguiente código para configurar su widget en el archivo view.html :

<div>
  <p>widgetId: {{ widgetId }}</p>
  <p>utils.organizationKey: {{ utils.organizationKey }}</p>
  <p>utils.projectName: {{ utils.projectName }}</p>

  <table class="table table-striped table-condensed">
    <tr ng-repeat=" row in dataFromWidget " >
      <td>{{ row['attr-process']}}</td>
      <td>{{ row['attr-activity']}}</td>
      <td>{{ row['NOW']}}</td>
    </tr>
  </table>
</div>

Ejemplo El ejemplo siguiente describe el contenido de un archivo view.html basado en un archivo frontend.js .

Supongamos que el archivo frontend.js del widget personalizado incluye el script siguiente:

javascript
init: function(context) {
    context.scope.myVariable = 'Plugin widget test';
    context.scope.myIntVariable = 8;
}

Puede utilizar los scripts siguientes para crear un archivo view.html correspondiente:

<p>{{myVariable}}</p>


<p ng-if="myIntVariable > 5">{{myIntVariable | number}}</p>

Para obtener más información sobre la secuencia de comandos del archivo view.html , consulte la documentación de Angular.

Además de los filtros angulares, puede utilizar el siguiente filtro personalizado en función de sus requisitos.

• formatMeasure: parám

La tabla siguiente describe los diversos parámetros que puede utilizar con el filtro personalizado:

El ejemplo siguiente describe cómo utilizar los filtros personalizados en el archivo view.html .

<p>{{myDateVariable | formatMeasure:'datetime'}}</p>

El archivo style.css contiene la hoja de estilo para el widget. Por ejemplo, el archivo style.css incluye el contenido:

p {
    font-size: 14px;
    color: red;
}

La tabla schema contiene parámetros opcionales que puede establecer en las opciones de widget.

Puede utilizar cualquiera de los tipos siguientes para definir parámetros en schema:

• string
• dimension

Para obtener más información sobre funciones, objetos y parámetros, consulte los enlaces siguientes:

• AngularJS
• jQuery
• Underscore.js
• Programa de arranque
• d3.js
• dc.js
• Filtro cruzado