Série v4.7 – Nouveau contrôle ImageAnnotation

Ce billet fait partie d’une série de billets sur les nouveautés de la version 4.7, mise à disposition le 22 septembre 2016.

Quelques nouveaux contrôles ont été ajoutés à la liste des contrôles smartforms existants à l’occasion de la sortie de la 4.7. Il s’agit de contrôles dédiés à une utilisation mobile au travers de l’application K2 mobile permettant pour le 1er de scanner des codes barres et pour le 2nd de faire des annotations sur une image. Ces contrôles ont été rendus disponibles dans un 1er temps sur notre application pour iOS et seront disponibles sous peu sur les autres applications mobiles.

Donc voyons, au travers de ce billet, comment utiliser le contrôle ImageAnnotation qui est, à ce jour disponible sur iOS et sur Android.

Comme son nom l’indique, ce contrôle permet depuis un formulaire K2 d’attacher une image, provenant de son terminal ou prise sur le vif puis d’y ajouter des annotations. Ceci peut-être très pratique, notamment dans des applications de remontées d’anomalies terrain comme par exemple pour tout ce qui touche à la remontée d’informations auprès de son assurance, ou pour des mairies, lorsque les citoyens veulent remonter des problèmes de voirie.

Le formulaire utilisé pour l’exemple

Pour le test, nous utiliserons un formulaire très simple dédié uniquement à l’utilisation de ce contrôle, celui-ci va être composé :

  1. Du contrôle ImageAnnotation. Contrôle qui n’a pas de représentation visuelle à l’exécution (comme les contrôles BarCode, Timer, SaveAsPDF ou LocationServices).
  2. D’un bouton pour exécuter les fonctionnalités d’attachement d’image du terminal mobile.
  3. D’un libellé de type literal qui permettra de visualiser la photo annotée qui aura été attachée.
  4. D’un libellé de statut.
  5. Dans notre exemple, le formulaire doit être un Application Form. En effet, on souhaite pouvoir y accéder depuis notre application mobile, mais il n’est pas pour autant disponible au sein d’une tâche à faire. Donc afin de pouvoir le tester, nous devons le rendre accessible dans la liste des formulaires d’application sur notre application mobile (au même titre qu’un formulaire d’initialisation d’un processus par exemple). Pour ce faire, il doit donc être enregistré dans le dossier System\Application Forms, puis dans les propriétés avancées du formulaire, la case Application Form doit être cochée.
Les ingrédients nécessaires à notre test
Les ingrédients nécessaires à notre test

Les règles du formulaire

Une fois que tous les éléments sont placés, il n’y a plus qu’à jouer avec les règles :

  1. Tout d’abord, nous allons vérifier que le contrôle est utilisable sur le terminal qui affiche le formulaire. Donc, quand le contrôle ImageAnnotation est initialisé si la propriété IsSupported du contrôle est positionnée à False, alors nous désactivons le bouton “Take Picture” et nous affichons un message à l’utilisateur. Pour la condition, nous utilisons une condition avancée.

    Règles de vérification de compatibilité
    Règles de vérification de compatibilité
  2. Ensuite, nous allons activer le contrôle ImageAnnotation lors du clic sur le bouton “Take Picture”, ce qui va avoir effet de lancer l’appareil photo à l’exécution. Pour cela, il faut utiliser l’action Execute a control's method afin de lancer la méthode Scan du contrôle BarCode à la capture de l’événement Clicked de notre bouton. Il n’y a rien de plus à configurer.

    Règle d'activation de l'appareil photo
    Règle d’activation de l’appareil photo
  3. Dans la propriété Data de notre contrôle ImageAnnotation, nous avons alors l’image sélectionnée ou prise par l’utilisateur et éventuellement modifiée, en base64. La propriété peut donc être utilisée ainsi pour être enregistrée dans un champ fichier d’un éventuel smartobject, pour sauvegarde. Dans notre cas, nous allons afficher cette image directement dans le formulaire grâce au contrôle DateLabel-Result (qui est en mode literal). Pour ce faire, nous allons créer une règle qui se déclenche sur l’événement Changed de notre contrôle ImageAnnotation, puis nous allons faire un transfer data pour envoyer la propriété Data, concaténée avec du code HTML, vers le champ DataLabel-Result.

    Récupération de l'image capturée
    Récupération de l’image capturée

Pour un éventuel copier/coller, voici le code HTML correspondant à l’image ci-dessus :

<img src="data:image/JPG;base64,propriete-data-ici" width="500" height"500"/>

Le résultat

Il ne nous reste plus qu’à tester ce que cela donne. Voici donc des captures d’écran faîtes depuis une tablette iOS.

Résultat

Et voilà pour le contrôle ImageAnnotation, il pourra être utilisé ainsi au sein de formulaires de tâches standard, au milieu d’autres contrôles et d’autres règles. Vous trouverez également plein d’informations intéressantes et complémentaires sur l’espace dédié à ce contrôle dans la documentation K2.

Happy K2ing !

A très bientôt pour un article sur d’autres fonctionnalités de la 4.7.0.

Ce billet fait partie d’une série de billets sur les nouvelles fonctionnalités de la 4.7.0. Les autres articles disponibles sur ce sujet sont :

jean

Directeur technique de K2 France depuis 2006 et passionné par les technologies, je travaille dans le monde du BPM et des applications métier depuis… que je travaille :). Vous pouvez également me suivre sur twitter, linkedin.

5 thoughts to “Série v4.7 – Nouveau contrôle ImageAnnotation”

    1. Le contrôle Image Attachement permet déjà cet aperçu.
      Ce nouveau contrôle, spécifique à une utilisation mobile, permet surtout de mettre des annotations sur l’image, afin, par exemple, de mettre en exergue les points importants à regarder sur l’image.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *