Développement de solutions personnalisées avec les modules complémentaires eLabNext

AOoctet a récemment entamé un nouveau partenariat avec eLabNext, un logiciel de gestion de laboratoire tout-en-un. Les solutions eLabNEXT contribuent à améliorer la qualité de la recherche en fournissant des outils complets pour tous les laboratoires. En raison de son expansion rapide, eLabNext a décidé de publier un SDK, permettant aux développeurs de créer de nouveaux modules complémentaires que d'autres utilisateurs peuvent installer sur le tableau de bord d'eLabNext. Les modules complémentaires permettent aux utilisateurs d'intégrer des logiciels tiers dans des tableaux de bord, des logiciels tels que Dropbox, Google Drive, etc. Les modules complémentaires permettent également aux utilisateurs d'ajouter des fonctionnalités à leur tableau de bord sans attendre que la fonctionnalité souhaitée soit publiée par eLabNext.

Notre entreprise est fière d'accompagner eLabNext dans son parcours. Constatant une demande croissante, nous avons décidé de partager une partie de notre parcours de création d'extensions personnalisées. Cet article est un bon point de départ si vous êtes intéressé par le développement de modules complémentaires eLabNext.

Démarrage du développement de modules complémentaires

Pour démarrer le développement de modules complémentaires, vous devez d'abord activer le mode développeur dans les paramètres. Accédez à Paramètres du compte > Développeur. Le mode développeur est activé en actionnant simplement le commutateur. En mode développeur activé, le SDK tentera d'injecter un fichier JavaScript complémentaire à partir de l' « URL du script complémentaire » lors du chargement de la page. Un seul fichier JavaScript sera chargé lors de l'exécution lors du chargement de la page chaque fois que vous naviguez sur le tableau de bord eLabNext.

Essayons maintenant de créer un module complémentaire simple. Avant de vous lancer dans le codage, voici deux ressources utiles : Documentation du SDK ELABnext et Documentation de l'API REST eLabNext.

Utilisez le modèle de téléchargement de la page des paramètres du développeur pour créer un module complémentaire vide. Il s'agit d'un exemple de module complémentaire fonctionnel, qui peut être introduit dans le SDK via un serveur HTTP de votre choix. Notre équipe utilise un logiciel basé sur NodeJS serveur http à des fins de développement. Le module complémentaire ci-dessous permet d'afficher simplement le tableau des tâches dans le tableau de bord. Il permet également aux utilisateurs de créer et de supprimer des tâches.

/*

@rootVar : SAMPLE_ADDON

@name : Échantillon

@description : exemple d'addon

@author : Stepan Smbatyan

@version : 1,0,0

*/

var SAMPLE_ADDON = {} ;



((contexte) => {

context.init = (config) => {

$ (() => {

Context.SampleAddon = nouveau Context.SampleAddon (configuration) ;

}) ;

} ;



Context.SampleAddon = nouvelle classe ({

Implémente : [Options, Événements],

Extend : ElabsDK.base,

options : {},

initialiser : function (config) {

//Mémorisation d'une référence au contexte de la fonction

var self = ceci ;

//Paramétrer les options de l'application à l'aide de la configuration fournie

self.setOptions (configuration) ;



$ (document) .ready () => {

const CurrentPage = Helper.History.get ('PageID') ;



const PageId = CurrentPage || new URLSearchParams (window.location.search) .get ('PageId') ;



RenderTaskPage () ;



if (PageId === « tâches ») {

getTasks () .then ({data}) => {

RenderTaskTable (données) ;



addDeleteBtnListener () ;

}) ;

}

}) ;

},

}) ;



//#TODO : supprime context.init () lors du téléchargement en tant que module complémentaire sur Marketplace

context.init () ;

}) (EXEMPLE D'ADDON) ;



//=================================== DOM =======================================



/**

* Rend l'interface utilisateur de la liste des tâches en mettant à jour l'historique du navigateur, en créant un bouton et un tableau,

* remplissage du tableau avec les données des tâches et mise à jour de la section de contenu principale avec le conteneur du tableau.

* @param {Event} e - Objet d'événement facultatif. Si cette option est fournie, empêche l'action par défaut.

*/

const RenderTaskTable = (données) => {

bouton const = createAddTaskButton () ;

$ ('#main -content')

.html («<section id="tableContainer"></section> »)

.prepend (bouton.render ()) ;



table const = createTaskTable () ;

table.data = données ;

table. _RenderHTML () ;

} ;



/**

* Crée une page personnalisée pour les tâches à l'aide d'eLabSDK.

* Cette fonction initialise un nouvel objet CustomPage avec les configurations spécifiées.

* @returns {CustomPage} Un objet CustomPage représentant la page des tâches.

*/

const RenderTaskPage = () => {

renvoie la nouvelle ELabsDK.customPage ({

rootVar : « .nav-main-level »,

PageId : « tâches »,

MainMenu : « Tâches »,

Sous-menu : « Liste des tâches »,

}) ;

} ;



/**

* Crée un élément de bouton à l'aide du constructeur ELabsdk.GUI.Button.

* Le bouton est configuré avec une étiquette, une classe CSS,

* et une action pour afficher une boîte de dialogue pour mettre à jour les tâches.

* @returns {ElabsDK.GUI.Button} - Un élément de bouton configuré pour ajouter une nouvelle tâche lorsque vous cliquez dessus.

*/

const CreateAddTaskButton = () => {

renvoie le nouveau ElabsDK.GUI.Button ({

label : « Ajouter une nouvelle tâche »,

classe : 'AddNewTaskBtn',

action : () => ShowDialog (DIALOG_CONFIGS.CREATE, CreateTaskAction),

}) ;

} ;



const AddDeleteBtnListener = () => {

$ ('.deleteBtn') .on ('click', (e) => {

const id = e.CurrentTarget.getAttribute ('_DataID') ;



ShowDialog (DIALOG_CONFIGS.DELETE, () => DeleteTaskAction (id)) ;

}) ;

} ;



/**

* Crée un élément de tableau à l'aide de la méthode Helper.Table.create.

* La table est configurée avec le conteneur cible spécifié, les données

* et des colonnes pour afficher les informations relatives aux tâches.

* @returns {HTMLElement} - Un élément de tableau configuré pour afficher les informations sur les tâches.

*/

const CreateTaskTable = () => {

return helper.table.create ({

cible : 'TableContainer',

légende : nulle,

données : {},

colonnes : [

{

nom : « Nom complet »,

clé : 'FullName',

largeur : « 20 % »,

cellRender : ({creator}) => `<b>$ {creator.fullName</b>}`,

},

{

nom : « Titre »,

clé : « titre »,

largeur : « 20 % »,

cellRender : ({title}) => `<span>$ {title || '-'}</span>`,

},

{

nom : « Description »,

clé : « contenu »,

largeur : « 45 % »,

cellRender : ({contents}) => `<span>$ {contents || '-'}</span>`,

},

{

nom : « Créé »,

clé : « créé »,

largeur : « 10 % »,

cellRender : ({created}) => `<span>$ {created.split ('T') [0]</span>}`,

},

{

nom : « Action »,

clé : « actions »,

largeur : « 5 % »,

CellRender : ({TaskID}) => `

<p class='deleteTranslationIcon deleteBtn' _dataId="${taskID}">

<i class='fa fa-trash-alt _actionIcon' title='Delete translation'></i>

</p>

`,

},

],

}) ;

} ;



//=================================== MODAL =======================================



/**

* Lance la suppression d'une tâche identifiée par son TaskID de manière asynchrone.

* Une fois la suppression réussie, ferme toutes les boîtes de dialogue ouvertes, recharge la page pour refléter les modifications.

* @param {string} TaskID : ID de la tâche à supprimer.

* @returns {Promise<void>} - Une promesse qui se résout après la suppression de la tâche et le rechargement de la page.

*/

const DeleteTaskAction = async (TaskID) => {

attendez DeleteTask (TaskID) ;

Dialog.closeWait () ;

window.location.reload () ;

} ;



/**

* Ajouter une nouvelle tâche avec le titre et la description fournis,

* fermer la fenêtre de dialogue et recharger la page en cours.

* @returns {Promise<void>} Une promesse qui se résout une fois les actions mises à jour.

*/

const CreateTaskAction = async () => {

const title = $ ('#title') .val () ;

const description = $ ('#description') .val () ;



attendez AddTask ({title, description}) ;

Dialog.closeWait () ;

window.location.reload () ;

} ;



/**

* Affiche une fenêtre de dialogue avec les options de configuration spécifiées et un bouton personnalisé,

* en appelant la fonction de rappel fournie lorsque vous cliquez sur le bouton personnalisé.

*

* @param {Object} config - L'objet de configuration de la fenêtre de dialogue.

* @param {string} config.title : titre de la fenêtre de dialogue.

* @param {number} config.width - Largeur de la fenêtre de dialogue.

* @param {string} Config.btnok - Le libellé du bouton OK.

* @param {string} Config.btnCancellLabel - Le libellé du bouton Annuler.

* @param {string} config.content - Le contenu à afficher dans la fenêtre de dialogue.

* @param {string} config.CustomButtonLabel - L'étiquette du bouton personnalisé.

* @param {string} config.CustomButtonStyle : style du bouton personnalisé.

* @param {Function} callback - La fonction de rappel à appeler lorsque vous cliquez sur le bouton personnalisé.

* @returns {void}

*/

const ShowDialog = (configuration, rappel) => {

const {

titre,

largeur,

BTN,

étiquette BTN Cancel,

contenu,

Étiquette de bouton personnalisée,

Style de bouton personnalisé,

} = configuration ;



Dialog.show ({

titre,

largeur,

BTN,

étiquette BTN Cancel,

contenu,

Boutons personnalisés : [

{

étiquette : CustomButtonLabel,

style : CustomButtonStyle,

fn : rappel,

},

],

}) ;

} ;



//======================================= CONSTANTES ===================================



const DIALOG_CONFIGS = {

SUPPRIMER : {

title : « Supprimer la tâche »,

largeur : '550',

btNok : faux,

btnCancelLabel : « Fermer »,

content : « <p>Êtes-vous sûr de vouloir supprimer cette tâche ?</p> ',

customButtonLabel : « Supprimer la tâche »,

customButtonStyle : « arrière-plan : #fe810 »,

},

CRÉER : {

title : « Ajouter une nouvelle tâche »,

largeur : '550',

btNok : faux,

btnCancelLabel : « Fermer »,

contenu : `

<section>

<input id="title" type="text" placeholder="Title" />

<textarea id="description" placeholder="Description" style="padding-top: 8px;"/>

</section>

`,

customButtonLabel : « Ajouter une tâche »,

customButtonStyle : « arrière-plan : #fe810 »,

},

} ;





//=================================== API =======================================



/**

* Récupère les tâches en envoyant une requête GET à ElabsDK.

*

* @returns {Promise<Array>} Une promesse qui se résout par un tableau de tâches en cas de récupération réussie, ou qui est rejetée avec une réponse d'erreur.

*/

const getTasks = () => nouvelle promesse ((résoudre, rejeter) => {

new ElabsDK.API.call ({

méthode : 'GET',

chemin : « tâches »,

onSuccess : (xhr, statut, réponse) => {

résoudre (réponse) ;

},

onError : (xhr, statut, réponse) => {

rejeter (réponse) ;

},

}) .execute () ;

}) ;



/**

* Ajoute une nouvelle tâche avec le titre et la description fournis en envoyant une requête POST à ElabsDK.

*

* @param {Object} task : objet contenant le titre et la description de la tâche.

* @param {string} task.title : titre de la tâche.

* @param {string} task.description : description de la tâche.

* @returns {Promise<Object>} Une promesse qui se résout par un tableau de tâches en cas de récupération réussie, ou qui est rejetée avec une réponse d'erreur.

*/

const addTask = ({title, description}) => nouvelle promesse ((résoudre, rejeter) => {

données const = {

ID du cessionnaire : 0,

titre,

contenu : description,

} ;



new ElabsDK.API.call ({

méthode : 'POST',

chemin : « tâches »,

Paramètres du chemin : {},

onSuccess : (xhr, statut, réponse) => {

résoudre (réponse) ;

},

onError : (xhr, statut, réponse) => {

rejeter (réponse) ;

},

}) .execute (données) ;

}) ;



/**

* Supprime une tâche avec l'ID spécifié en envoyant une requête DELETE à ElabsDK.

*

* @param {string} id - L'ID de la tâche à supprimer.

* @returns {Promise<Object>} Une promesse qui se résout par un tableau de tâches en cas de récupération réussie, ou qui est rejetée avec une réponse d'erreur.

*/

const DeleteTask = (id) => nouvelle promesse ((résoudre, rejeter) => {

new ElabsDK.API.call ({

méthode : 'DELETE',

chemin : `tasks/$ {id} `,

onSuccess : (xhr, statut, réponse) => {

résoudre (réponse) ;

},

onError : (xhr, statut, réponse) => {

rejeter (réponse) ;

},

}) .execute () ;

}) ;

L'une des choses cruciales à retenir lors de la création d'un module complémentaire est de donner la priorité à l'utilisation des méthodes du SDK et de l'API par rapport au code personnalisé. Un bon exemple serait le rendu des boutons ou la création de requêtes HTTP. En utilisant les méthodes fournies par le SDK, vous pouvez être assuré, par exemple, que les boutons auront un style correct ou que tous les en-têtes nécessaires seront ajoutés à votre requête HTTP.

Développement de modules complémentaires plus complexes

Évidemment, la plupart des modules complémentaires qui seront créés seront plus compliqués que cet exemple. Naturellement, tout en proposant des fonctionnalités plus complexes, les développeurs aimeraient utiliser la capacité de décomposer le code en modules, de minimiser le code pour la production, d'écrire des scénarios de test pour leur code et de tirer parti de tous les autres avantages du développement Web moderne. Tout en travaillant sur les modules complémentaires, nous avons créé un module complémentaire standard, permettant aux utilisateurs de définir la structure du projet, le packaging, les tests, etc. Le projet peut être consulté sur GitHub.

N'oubliez pas que le SDK eLabNext prend de l'ampleur ; la documentation doit donc être complétée. Veuillez contacter notre équipe si vous vous trouvez dans une situation où vous pourriez avoir besoin d'aide. Notre équipe continuera à écrire sur le processus de développement du module complémentaire eLabNext. Nous aborderons des sujets tels que la soumission de modules complémentaires à eLab Marketplace, des conseils et astuces pour le développement de modules complémentaires eLabNext, le développement de fonctionnalités plus complexes, etc.