---
title: "Crear y editar sinópticos con API Javascript"
canonical: "https://onesaitplatform-es.refined.site/space/DOC/2216830961/Crear%20y%20editar%20sin%C3%B3pticos%20con%20API%20Javascript"
format: markdown
---
## INTRODUCCIÓN

Nos apoyamos en el api Javascript de los dashboards, en el siguiente enlace vemos como usarla, por lo que aqui describiremos los mensajes necesarios para dar el contenido a los elementos del sinóptico

[https://onesaitplatform.atlassian.net/l/c/cAMRAsgJ](https://onesaitplatform.atlassian.net/l/c/cAMRAsgJ) 


## ABRIR SINÓPTICO

Al abrir el sinóptico en modo edición, nos aparecerá el editor del sinóptico donde podremos añadir elementos y modificar sus propiedades.

![image](media://5ee5123c-376c-4ddd-bec7-b48de306c8c4)

## OCULTAR EDITOR

En primer lugar veremos el mensaje para mostrar y ocultar el editor.

```javascript
var message = ' {"command":"hideShowSynopticEditor", "authorization":"' + token + '", "information":{"dashboard":"' + ide + '"}}';

iframeEl.contentWindow.postMessage(message, "*");

```

donde **ide** es el identificador del dashboard, **token** el token de seguridad

## TIPOS DE ELEMENTOS

Podemos crear tres tipos de elementos:

**Label**: texto que será remplazado por el valor del campo del datasource que se indique, se puede indicar los colores para el valor de corte, el texto inicial y las unidades.

**Progress bar**: barra de progreso le podemos asignar los colores para el valor de corte, y los valores max , min y el tipo para indicar como debe crecer

**Indicator**: a un elemento circulo, rectángulo, … le indicamos los colores para el valor de corte así cambiará de color dependiendo del valor.

El tipo se indica en esta propiedad "classType":

Pueden ser "label", "progress_bar" o "indicator"           

Para añadir funcionalidad a los elementos, como indicar que muestre el valor de un parámetro de un datasource lo que tenemos que hacer es clicar un elemento.

Esto nos envía los siguientes mensajes:


```json
//Ejemplo datos devueltos al seleccionar un elemento con datos

//dashboardMessageHandler getSynopticElementDataSource{
	"command": "getSynopticElementDataSource",
	"information": {
		"refresh": 20,
		"ontology": "HelsinkiPopulation",
		"dataSource": "synopticdatasource_administrator_1568885107792",
		"synopticElement": {
			"id": "svg_2",
			"aggregationType": "MAX",
			"aggregationField": "Helsinki.year",
			"projectionField": "Helsinki.year",
			"where": null,
			"classType": "label",
			"color": {
				"colorOn": "#006400",
				"colorOff": "#DC143C",
				"cutValue": "2000"
			},
			"condition": {
				"maxValue": "100",
				"minValue": "20",
				"orgSize": null,
				"type": "vertical"
			},
			"typeElement": "text",
			"classTypeList": ["indicator", "label"],
			"aggregationList": ["NONE", "COUNT", "SUM", "MIN", "MAX", "AVG", "LASTVALUE"]
		}
	}
}
//Ejemplo datos devueltos al seleccionar un elemento sin datos

//dashboardMessageHandler getSynopticElementDataSource

{
	"command": "getSynopticElementDataSource",
	"information": {
		"synopticElement": {
			"id": "svg_1",
			"typeElement": "rect",
			"classTypeList": ["indicator", "progress_bar"],
			"aggregationList": ["NONE", "COUNT", "SUM", "MIN", "MAX", "AVG", "LASTVALUE"]
		}
	}
}
```

Con esta información podremos confeccionar los mensajes devuelta con la funcionalidad que precisemos.

Podemos asignar datos a un elemento seleccionado enviando este mensaje ejemplo tipo label:


```javascript
var message = `{
    "command": "setSynopticElementDataSource",
    "authorization": "${token}",
    "information": {
        "dashboard": "identificationDashboard",       
        "ontology": "HelsinkiPopulation",
        "refresh": 20,
        "synopticElement": {
            "aggregationType":"MAX",
            "aggregationField":"Helsinki.year",
            "projectionField":"Helsinki.year",
            "classType":"label",
            "color":{
                    "colorOn":"#006400",
                    "colorOff":"#DC143C",
                    "cutValue":"2000"
            },
            "unitsOfMeasure":"MW"
            }
    }
}`;
iframeEl.contentWindow.postMessage(message, "*");


```

Aqui cabe destacar :

**aggregationType**, que puede ser “MAX”, “MIN”, “NONE”, “SUM”, “AVG”, ”COUNT”, ”LASTVALUE”

**aggregationField **campo por el que se realiza la agregación

**projectionField **campo que devolverá los datos

**color **en este objeto ponemos los colores y el valor de corte

**unitsOfMeasure **si añadimos una unidad de medida como kg lo añadirá detrás del valor

Podemos asignar datos a un elemento seleccionado si es un progress bar enviando este mensaje:


```javascript
var message = `{
    "command": "setSynopticElementDataSource",
    "authorization": "${token}",
    "information": {
        "dashboard": "identificationDashboard",
var message = `{
"ontology": "HelsinkiPopulation",
        "refresh": 20,
        "synopticElement": {
            "aggregationType": "MAX",
            "aggregationField": "Helsinki.year",
            "projectionField": "Helsinki.year",
            "classType": "progress_bar",
            "color": {
                "colorOn": "#006400",
                "colorOff": "#DC143C",
                "cutValue": "2000"
            },
            "condition": {
                "maxValue": "2500",
                "minValue": "1000",
                "type": "vertical"
            }
        }
    }

}`;
iframeEl.contentWindow.postMessage(message, "*");

```

la diferencia principal con el mensaje anterior es el classType y que se añade esta propiedad

condition aquí pondremos los valores min, max y el tipo de crecimiento en vertical o en horizontal.

 

Podemos definir que código se lanzará para un evento definido de un elemento:


```javascript
var message = `{
    "command": "setSynopticElementDataSource",
    "authorization": "${token}",
    "information": {
        "dashboard": "identificationDashboard",

        "synopticElement": {
            "classType":"indicator",            
            "events": [{
                "trigger": "click",
                "content": "alert('Hello')"
            }]
        }
    }

}`;
iframeEl.contentWindow.postMessage(message, "*");

```

Podemos dar un límite y un orden a los datos devueltos por el datasource para el elemento:


```javascript
var message = `{
    "command": "setSynopticElementDataSource",
    "authorization": "${token}",
    "information": {
        "dashboard": "identificationDashboard",       
        "ontology": "HelsinkiPopulation",
        "refresh": 20,
        "synopticElement": {
            "aggregationType":"NONE",            
            "projectionField":"Helsinki.year",
            "classType":"label",
            "color":{
                    "colorOn":"#006400",
                    "colorOff":"#DC143C",
                    "cutValue":"2000"
            },
            
            "limit":"1",
            "orderBy":[
                {"field":"Helsinki.year",
                "operator":"DESC"}
            ]
            }
    }
}`;
iframeEl.contentWindow.postMessage(message, "*");

```