Manuel de référence

# Smart Element Component

# Description

Le composant Smart Element permet d'utiliser le widget interne Smart Element d'Anakeen Platform et d'accéder à ses fonctionnalités.

Les exemples de ce chapitre utiliseront un ensemble de Smart Elements factices issus de la Smart Structure DEVBILL dont les Smart Fields sont décrits en xml ci-dessous :

<smart:fields>
    <smart:field-set name="bill_fr_ident" type="frame" label="Identification" access="ReadWrite">
        <smart:field-text name="bill_title" label="Title" access="ReadWrite" is-title="true"/>
        <smart:field-longtext name="bill_content" label="Description" access="ReadWrite"/>
        <smart:field-docid name="bill_author" label="Author" access="ReadWrite" relation="DEVPERSON"/>
        <smart:field-text name="bill_author_display" access="Read" is-title="true"/>
        <smart:field-date name="bill_billdate" label="Bill date" access="ReadWrite"/>
        <smart:field-text name="bill_location" label="City" access="ReadWrite"/>
        <smart:field-docid name="bill_clients" label="Clients" access="ReadWrite" relation="DEVCLIENT" multiple="true"/>
        <smart:field-set name="bill_otherclients" type="array" label="Other clients" access="ReadWrite">
            <smart:field-text name="bill_clientname" label="Client name" access="ReadWrite"/>
            <smart:field-text name="bill_society" label="Enterprise" access="ReadWrite"/>
        </smart:field-set>
        <smart:field-money name="bill_cost" label="Cost" access="ReadWrite"/>
    </smart:field-set>
</smart:fields>

# Initialisation

Le composant AnkSmartElement est défini dans la bibliothèque "@anakeen/user-interfaces/components/lib/AnkSmartElement.esm" et la CSS "@anakeen/user-interfaces/components/scss/AnkSmartElement.scss"

WARNING

Ce composant est asynchrone, il faut donc le charger manière asynchrone dans vue (avec une closure). De plus, pour accéder au composant il faut attendre que celui-ci soit monté, un évènement vue @smartElementMounted est mis à disposition pour pouvoir déclencher une méthode à ce moment.

WARNING

Ce composant doit être rendu dans un contenant ayant une taille donc pas en height=auto.

Exemple d'initialisation

<template>
  <div>
    <ank-smart-element ref="smartElement" :initid="98135" />
  </div>
</template>
<script>
import AnkSmartElement from "@anakeen/user-interfaces/components/lib/AnkSmartElement.esm";
import "@anakeen/user-interfaces/components/scss/AnkSmartElement.scss";

export default {
  components: {
    "ank-smart-element": () => AnkSmartElement
  }
};
</script>

Aperçu du composant

default

# Propriétés

# initid (Number | String, default: 0)

Id ou nom logique du Smart Element à afficher.

Dans cet exemple, nous affichons le Smart Element avec l'initid à 98135 :

<template>
  <div>
    <ank-smart-element ref="smartElement" :initid="98135" />
  </div>
</template>

initid example

Pour plus d'informations, vous pouvez consulter la documentation sur les propriétés des Smart Elements.

# view-id (String, default: "!defaultConsultation

Identifiant de la vue à utiliser. Par défaut, la vue utilisée est la vue de consultation (!defaultConsultation). Il existe trois valeurs par défaut pour les vues : !defaultConsultation, defaultEdition et defaultCreation (uniquement pour les Smart Structures).

Dans cet exemple, nous spécifions la vue par défaut de consultation pour notre Smart Element :

<template>
  <div>
    <ank-smart-element ref="smartElement" :initid="98135" viewId="!defaultEdition" />
  </div>
</template>

viewId example

# revision (Number, default: -1)

Révision du Smart Element. Par défaut, elle vaut -1 (-1 indique la revision la plus récente).

# custom-client-data (Object, default: null)

Propriété permettant d'ajouter des données clients au composant. Ces données pourront être accessibles grâce à la méthode getClientData, ajoutées grâce à la méthode addCustomClientData, et supprimées grâce à la méthode removeCustomClientData.

# browser-history (Boolean, default: false)

Définit si le router doit suivre les changements du composant Smart Element. Désactivé par défaut. (TODO example ?)

# Événements

# documentLoaded

# Déclenchement

L'événement est déclenché dès que le widget interne Smart Element est prêt à être utilisé. Il n'est pas déclenché lorsque l'initid du Smart Element change. Dans ce cas, c'est l'événement ready qui est utilisé.

# Paramètres passés au callback

Aucun.

# Évènements du widget interne

Les événements du contrôleur de Smart Element sont propagés au niveau du composant. Les événements disponibles sont :

Contrairement aux événements internes, ces événements n'ont pas de conditions préalables. Ils sont déclenchés si le composant a déclaré le binding dans le template pour n'importe quel Smart Element. Les arguments reçus par le callback tel que définit pour les événements internes, sont ici contenus dans la propriété detail de l'événement reçu.

# Binding de l'événement ready

<template>
  <div>
    <ank-smart-element @smartElementMounted="smartElementMounted" ref="smartElement" />
  </div>
</template>
<script>
import AnkSmartElement from "@anakeen/user-interfaces/components/lib/AnkSmartElement.esm";
import "@anakeen/user-interfaces/components/scss/AnkSmartElement.scss";

export default {
  components: {
    AnkSmartElement: () => AnkSmartElement
  },
  smartElementMounted() {
    const se = this.$refs.smartElement;
    se.$on("ready", function(event) {
      console.log("Smart Element ready");
    });
  }
};
</script>

# Slots

# loading

Le slot nommé loading permet de personnaliser l'affichage du chargement en cours. L'affichage du chargement est automatiquement retiré lorsque l'évènement ready du Smart Element a été déclenché.
Par défaut, le chargement est représenté par le logo Anakeen ainsi qu'une barre de chargement. Le contenu du slot est rendu dans la balise encadrant le Smart Element, ainsi l'affichage du chargement occupe l'ensemble de l'espace pris par le Smart Element.

# Exemple

Affichage d'un texte centré

<template>
  <div class="custom-smart-element-wrapper">
    <ank-smart-element class="custom-smart-element">
      <template v-slot:loading>
        <div class="custom-loading">
          <h1>Chargement en cours...</h1>
        </div>
      </template>
    </ank-smart-element>
  </div>
</template>
<style scoped>
.custom-smart-element-wrapper {
  height: 500px;
}
.custom-smart-element > .smart-element-custom-loading > .custom-loading {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
</style>

# Méthodes

A l'instar des événements, l'ensemble des méthodes du contrôleur sont accessibles depuis le composant :

L'ensemble de ces méthodes est documenté dans la section concernant le contrôleur de Smart Element

# Exemples

# Ajouter une bordure et la propriété title pour tous les Smart Fields

<template>
  <div>
    <ank-smart-element
      ref="smartElement"
      style="width: 100vw; height: 100vh;"
      :initid="'USER_ADMIN'"
      @smartElementMounted="smartElementMounted"
    />
  </div>
</template>
<script>
import AnkSmartElement from "@anakeen/user-interfaces/components/lib/AnkSmartElement.esm";
import "@anakeen/user-interfaces/components/scss/AnkSmartElement.scss";

export default {
  components: {
    AnkSmartElement: () => AnkSmartElement
  },
  methods: {
    smartElementMounted: function() {
      const se = this.$refs.smartElement;
      se.$on("smartFieldReady", function(event, smartElement, smartField, $el) {
        $el.prop("title", smartField.id).css("border", "1px solid black");
      });
    }
  }
};
</script>

# Afficher un message à chaque modification de valeur de Smart Field

<template>
  <div>
    <ank-smart-element
      ref="smartElement"
      style="width: 100vw; height: 100vh;"
      :initid="'USER_ADMIN'"
      @smartElementMounted="smartElementMounted"
    />
  </div>
</template>
<script>
import AnkSmartElement from "@anakeen/user-interfaces/components/lib/AnkSmartElement.esm";
import "@anakeen/user-interfaces/components/scss/AnkSmartElement.scss";

export default {
  components: {
    AnkSmartElement: () => AnkSmartElement
  },
  methods: {
    smartElementMounted: function() {
      const se = this.$refs.smartElement;
      se.$on("smartFieldChange", function(event, smartElement, smartField) {
        se.showMessage("Smart Field " + smartField.id + " has changed");
      });
    }
  }
};
</script>

← Smart Element Grid →