Vignette JSON/HTML (portail)

Introduction

Les vignettes sdata sont des vignettes permettant de créer des contenus HTML riches utilisant des sources de données SDATA.

Typiquement vous utiliserez ces vignettes pour réaliser des tableaux de bords présentant les données de façon synthétique aux utilisateurs.

L'application Sage 1000 est livrée avec un exemple de vignette SDATA.

Cette exemple utilise les APIs Google pour présenter les données.

Adresse de la page locale HTML

Les vignettes SDATA utilisent une page HTML décrivant le contenu de la vignette. Cette page doit être accessible par le serveur HTTP.

Tip : Utilisez la variable (ROOT) pour référencer le répertoire de base du site.

Dans cet exemple la vignette utilise la page exemple livrée avec l'application.

Placer les pages HTML des vignettes SDATA dans le site est une solution simple mais qui peut poser à terme des problèmes de déploiement. Vous pouvez insérer ces pages comme objets du référentiel puis y faire référence via un service rest du Service 1000.

 (ROOT)/server/rpc.l1000/html/url.blob?uri=obj://TdbmObject/Name/<nom de la page dans le référentiel>/dbmobjectbinary.value

Par exemple :

 (ROOT)/server/rpc.l1000/html/url.blob?uri=obj://TdbmObject/Name/widget-immo-cumuldotationparcompte.html/dbmobjectbinary.value

Source de données JSON

Les vignettes SDATA utilisent des sources de données SDATA pour récupérer les données à afficher. Dans cet exemple, on utilise un fichier statique JSON contenant les données.

Les données seront injectées dans une variable "data" contenu sur l'élément iFrame contenant la vignette. Elles sont ensuite récupérées par le code JavaScript contenu dans la fonction render() de la page.

<source lang="javascript"> function render() { var data = null; if (window.parent && window.frameElement) { data = window.parent.$(window.frameElement).data("data"); }

       ...
       }

</source>

Tip : window.parent.$ référence l'objet JQuery contenu dans le parent de la IFrame

Le paramétrage suivant

{"agencies":"(ROOT)/.../agencies.html"}

définit la structure de l'objet data qui sera injecté.

Tip : Ce paramétrage peut combiner plusieurs sources de données : {"agencies":"...","cities":"...", ...}

Les données sont ensuite exploitées par les objets de rendu à travers des fonctions :

<source lang="javascript"> function _d_table1(data) {

               // Ce code crée une structure de données pour les widgets Google

var res = { cols: [ {"id":"city","label":"Ville","pattern":"","type":"string"},

                               ...

], rows: [] }; if (data && data.agencies && data.agencies.$resources) { data.agencies.$resources.forEach(function(value) { var r = {c:[]}; r.c.push({v:value.city});

                               ...

res.rows.push(r); }); } return res; }; </source>

<source lang="javascript">

function render() {

window._widgets.map("map_parent", adresses, function(map, markers) { /* map --> map object*/ var table1 = new google.visualization.Table(document.getElementById("t1")); var tdata = new google.visualization.DataTable(_d_table1(data)); var view = new google.visualization.DataView(tdata);

                       ....
               }

} </source>

Cet exemple utilise une source de données statique mais dans la réalité vous utiliserez une source de données SDATA.

Une source de données SDATA se configure ainsi :

<source lang="javascript">

 {"nom":"url sdata", ... }

</source>

L'url sdata doit être relative au site, utilisez la variable (ROOT) :

<source lang="javascript">

 {"nom":"(ROOT)/sdata/...", ... }

</source>

Par exemple :

<source lang="javascript">

 {"comptes":"(ROOT)/server/sdata/-/-/-/$queries/rind_immo_dotationcompte?_pSchemaAmortissement=$encodeURIComponent(#c1.caption)$encodeURIComponent(&)_pCategorieBien=$encodeURIComponent(#c2.value)"}

</source>

utilise une requête accédée via SDATA et paramétré par les sélections présentes sur la page.

Sélections

Il est possible de réaliser des sélections riches à partir de données métier.

• Sélections colonnes

Nombre de colonne de la bande de sélection.

• Sélection présentation

Un littéral Javascript décrivant les zones de sélection.

Les types de sélections possibles sont :

<source lang="javascript"> {

  "c1":{
     "type":"string",
     "caption":"String Field"
  },
  "c2":{
     "type":"bool",
     "caption":"Boolean Field"
  },
  "c3":{
     "type":"date",
     "caption":"Date Field"
  },
  "c4":{
     "type":"number",
     "decimals":3,
     "caption":"Number Field"
  },
  "c5":{
     "type":"enum",
     "caption":"Enum Field",
     "values":{
        "0":"Option 1",
        "1":"Option 2"
     }
  },
  "c6":{
     "type":"combo",
     "lookupClass":"TTiers",
     "lookupField":"code",
     "caption":"Lookup Field"
  }

} </source>

• Sélections data

Un littéral Javascript décrivant les valeurs initiales des sélections.

<source lang="javascript"> {

  "c1":{
     "value":"vv  vv",
     "type":"string"
  },
  "c2":{
     "type":"bool",
     "value":true
  },
  "c3":{
     "type":"date",
     "value":"16/07/2013"
  },
  "c4":{
     "type":"number",
     "value":"12636"
  },
  "c5":{
     "type":"enum",
     "value":"1",
     "caption":"Option 2"
  },
  "c6":{
     "type":"combo",
     "value":"DAC19ACF0B2100020790000002F70593",
     "caption":"ARSENAL"
  }

} </source>

Une fois définit vous pouvez référencé ces sélections dans les requêtes source de données.

Par exemple :

 {"comptes":"(ROOT)/server/sdata/-/-/-/$queries/rind_immo_dotationcompte?_pSchemaAmortissement=$encodeURIComponent(#c1.caption)$encodeURIComponent(&)_pCategorieBien=$encodeURIComponent(#c2.value)"}

Le bouton actualiser permet alors de rafraichir les sources de données.

Voir aussi :

{{#if:|

{{#if:{{{1}}}|— [[{{{1}}}]] |}} — Développement DSM —

|

{{#if:|— [[{{{1}}}]] |}} — Développement DSM —

}}