• Accueil / Salesforce / Le changement est…
, Le changement est inévitable, alors construisez pour cela!<span class="wtr-time-wrap after-title"><span class="wtr-time-number">10</span> minutes de lecture</span>

Le changement est inévitable, alors construisez pour cela!10 minutes de lecture


Nous avons rarement le luxe de tout savoir dès le départ lors de la conception et de la mise en œuvre de logiciels, comme on dit, « il s’agit du voyage et non de la destination ». Et il en va de même pour certaines exigences métier, elles peuvent paraître bien connues au début mais peuvent souvent changer, et concevoir à l’avance afin d’embrasser cette inévitabilité est le sujet de ce blog. Il est également vrai qu’un bon voyage se vit aussi mieux avec les autres travailler ensemble en mutualisant leurs compétences respectives, réussir et apprendre ensemble.

Ce blog se concentre sur l’utilisation de plusieurs fonctionnalités de la plate-forme telles que Méthodes invocables Apex, Générateur de flux Lightning, Composants Web Lightning, Métadonnées personnalisées et plus encore, pour résoudre une exigence métier donnée d’une manière qui permette aux codeurs et aux constructeurs de code bas de travailler ensemble. Non seulement la création de ce qui est initialement nécessaire, mais l’optimisation des personnes et des compétences lors de la réponse aux changements continus des exigences de l’entreprise.

, Le changement est inévitable, alors construisez pour cela!<span class="wtr-time-wrap after-title"><span class="wtr-time-number">10</span> minutes de lecture</span>

Notre exigence commerciale

, Le changement est inévitable, alors construisez pour cela!<span class="wtr-time-wrap after-title"><span class="wtr-time-number">10</span> minutes de lecture</span>

L’exigence que nous allons utiliser dans ce blog implique la nécessité pour une entreprise d’améliorer la page d’accueil de ses employés avec des moyens permettant aux employés de voir des actions contextuelles qui sont aussi intuitives à utiliser que la lecture d’une phrase et le remplissage des blancs! Le modèle de conception connu sous le nom de forme de langage naturel est un bon choix pour cela. Voici ce que l’équipe de codeurs et de constructeurs déclaratifs a proposé!

, Le changement est inévitable, alors construisez pour cela!<span class="wtr-time-wrap after-title"><span class="wtr-time-number">10</span> minutes de lecture</span>

Les développeurs de notre scénario se sont entretenus avec certains employés et administrateurs et ont rapidement découvert que toutes les formes de langage naturel requises (NLF) ne sont pas bien connues et il est très probable qu’une fois cette fonctionnalité livrée, d’autres NLF seraient découverts. Certains employés et administrateurs étaient désireux d’aider avec ce problème et ainsi les développeurs ont trouvé un moyen qui permettrait à tout le monde de construire ensemble!

Ce blog est en deux parties qui reflète les tâches que les constructeurs déclaratifs et le codeur exécutent. Les sections suivantes Bâtiment déclaratif alimenté par le code et Alimenter le bâtiment déclaratif avec le code, chacun parcourt les détails et comment ils se combinent. Vous pouvez également trouver le code source complet ici.

Bâtiment déclaratif alimenté par le code

Explorons tout d’abord l’expérience de construction du point de vue des constructeurs utilisant les outils déclaratifs et comment ils sont alimentés par des composants Web Lightning génériques et des actions invocables fournis par les développeurs.

Définition de formulaires en langage naturel avec des métadonnées personnalisées

La capture d’écran ci-dessous montre une liste des NLF qui ont été définis avec un objet facultatif auquel ils s’appliquent, en utilisant la possibilité d’associer des métadonnées personnalisées par référence à des définitions d’objet standard et personnalisé.

, Le changement est inévitable, alors construisez pour cela!<span class="wtr-time-wrap after-title"><span class="wtr-time-number">10</span> minutes de lecture</span>

Si nous explorons l’un des formulaires, nous pouvons voir cette possibilité de faire référence aux types de métadonnées personnalisées pour former une relation enfant et parent. L’objet enfant dans ce cas décrit chacun des éléments du formulaire. Notez les noms des éléments qui sont utilisés pour capturer les entrées de l’utilisateur, ceci est important dans l’étape suivante. Enfin, il y a un élément qui indique quel Flow recevra l’entrée du formulaire.

, Le changement est inévitable, alors construisez pour cela!<span class="wtr-time-wrap after-title"><span class="wtr-time-number">10</span> minutes de lecture</span>

Répondre aux formulaires en langage naturel avec des flux de lancement automatique

Lightning Flow peut être utilisé pour piloter une logique pure en plus d’expériences utilisateur personnalisées, de tels flux sont appelés flux de lancement automatique. Le flux nommé dans la configuration ci-dessus doit exposer des variables d’entrée nommées en fonction des noms d’élément d’entrée utilisés dans la configuration NLF ci-dessus. Les variables clés sont indiquées ci-dessous:

, Le changement est inévitable, alors construisez pour cela!<span class="wtr-time-wrap after-title"><span class="wtr-time-number">10</span> minutes de lecture</span>

Enfin, il doit définir une variable de sortie simplement appelée Réponse qui sera utilisé pour communiquer avec l’utilisateur final. Il s’agit essentiellement d’un contrat convenu entre le code qui affiche le NLF et appelle dynamiquement le Flow, un contrat sur lequel les développeurs et les administrateurs doivent être clairs.

Flow possède des éléments très puissants qui permettent d’interroger et de mettre à jour des enregistrements dans des objets, en plus d’appeler des services externes tels que ceux fonctionnant dans Heroku par exemple, il est vraiment très puissant. Cependant, il arrive un moment où une certaine logique, telle que la logique de calcul, doit appeler du code.

Dans l’exemple ci-dessous, un Méthode invocable Apex a été fourni par un développeur pour aider avec un NLF qui fournit un moyen de répondre aux demandes ad hoc des clients concernant les dernières offres. Lors de l’appel d’Apex, le générateur de flux crée une expérience facile à utiliser pour mapper des variables aux paramètres et à la sortie de la méthode Apex. Le plein code source pour cette action Apex Cela peut être vu dans l’exemple de code associé à ce blog.

, Le changement est inévitable, alors construisez pour cela!<span class="wtr-time-wrap after-title"><span class="wtr-time-number">10</span> minutes de lecture</span>

Ajout de formulaires en langage naturel via Lightning App Builder

Maintenant que le NLF a été défini et le Flow qui l’alimente créé, il est temps de l’ajouter à un Page d’accueil ou un Enregistrer la page via Générateur d’applications Lightning. L’utilisateur dépose le composant Web Lightning qui restitue NLF sur la page comme d’habitude. Notez dans la capture d’écran ci-dessous que lors du choix du formulaire à utiliser, une liste déroulante est fournie plutôt que de forcer l’utilisateur à entrer le nom du formulaire. L’avantage supplémentaire est qu’il est contextuel, ce qui signifie que seuls les formulaires applicables à la page Lightning en cours de modification s’appliquent. Ce qui permet d’éviter une mauvaise configuration de la part de l’utilisateur final.

, Le changement est inévitable, alors construisez pour cela!<span class="wtr-time-wrap after-title"><span class="wtr-time-number">10</span> minutes de lecture</span>

Fait intéressant: Il semble que cela s’applique également lors des déploiements. Cela signifie que si vous déployez un Flexipage avec un NLF qui fait référence à un formulaire qui n’existe pas, le déploiement échoue. Fondamentalement, cette liste déroulante est également une règle de validation de déploiement!

Alimenter le bâtiment déclaratif avec le code

Concentrons-nous maintenant sur la façon dont l’expérience déclarative ci-dessus a été alimentée en utilisant stratégiquement des moyens par lesquels votre code peut étendre efficacement la plate-forme!

Création d’un composant Web Lightning basé sur les métadonnées personnalisées

Le balisage HTML suivant exploite essentiellement les métadonnées personnalisées définies ci-dessus pour restituer un formulaire HTML simple à l’aide du modèle de formulaire en langage naturel. Lors du rendu d’un élément de formulaire qui représente une soumission de formulaire, il attache un gestionnaire dans le code du contrôleur qui appelle le Flow associé.


Le code du contrôleur ci-dessous est assez simple et utilise un modèle connu sous le nom de Sélecteur qui encapsule simplement la logique SOQL dans une classe séparée, ce qui améliore la lisibilité, la réutilisation et la maintenabilité du code. Notez également que le code du contrôleur choisit également de transformer les informations d’enregistrement de métadonnées en un modèle de données auquel le code HTML ci-dessus se lie plus facilement et réduit ainsi la complexité du contrôleur de composant.

public with sharing class NaturalLanguageFormController {

    @AuraEnabled(cacheable=true)
    public static List findForm(String formName) {
        List components = new List();
        for(NaturalLanguageFormComponent__mdt component :
            new NaturalLanguageFormComponentsSelector().selectComponentsByFormName(
                new Set { formName})) {
            components.add(new NaturalLanguageFormComponent(component) );
        }
        return components;
    }
}

Amélioration de la configuration des composants avec des listes dynamiques

Le fichier de métadonnées suivant contient une configuration qui contrôle la visibilité du composant Web Lightning dans les outils déclaratifs et définit également un fournisseur de source de données pour l’attribut Form.



    47.0
    true
    Natural Language Form
    Displays fields in a natural langauge flow.    
    
        lightning__RecordPage
        lightning__AppPage
        lightning__HomePage
        
    
        
            
        
            

En utilisant un fournisseur de source de données, des outils tels que Lightning App Builder affichent une liste déroulante au lieu d’un champ de saisie de texte standard. Le code Apex suivant implémente l’interface requise et interroge essentiellement les métadonnées NLF.

public with sharing class NaturalLanguageFormDataSource  
  extends VisualEditor.DynamicPickList {

    private VisualEditor.DesignTimePageContext context;

    public NaturalLanguageFormDataSource(VisualEditor.DesignTimePageContext context) {
       this.context = context;
    }

    public override VisualEditor.DataRow getDefaultValue(){
        NaturalLanguageForm__mdt form = 
            new NaturalLanguageFormSelector().getDefault(context.entityName);        
        return form!=null ? 
            new VisualEditor.DataRow(form.MasterLabel, form.DeveloperName) : null;
    }
    
    public override VisualEditor.DynamicPickListRows getValues() {
        VisualEditor.DynamicPickListRows  values = new VisualEditor.DynamicPickListRows();
        for( NaturalLanguageForm__mdt form : 
            new NaturalLanguageFormSelector().selectAll(context.entityName)) {
            values.addRow(new VisualEditor.DataRow(form.MasterLabel, form.DeveloperName));
        }
        return values;
    }
}

le le contexte Le paramètre constructeur est également utilisé pour filtrer les enregistrements NLF renvoyés. Ce contexte indique essentiellement au fournisseur si le composant correspondant se trouve sur une page d’accueil ou une page d’enregistrement. Dans ce cas, cela garantit que seuls les NLF qui sont indépendants d’un objet ou spécifiques à un objet donné sont affichés dans la liste déroulante, aidant ainsi l’administrateur à éviter les erreurs de configuration.

Extension de votre code avec la logique pilotée par Flow

Le composant NLF prend l’entrée du formulaire et crée et exécute dynamiquement le flux spécifié par l’administrateur, pour effectuer le traitement requis. Le code du contrôleur LWC illustré ci-dessous rassemble les valeurs d’entrée du formulaire HTML, appelle le contrôleur Apex et gère la réponse en utilisant un message toast à l’utilisateur final.

import { LightningElement, api, wire } from 'lwc';
import findForm from '@salesforce/apex/NaturalLanguageFormController.findForm';
import submitForm from '@salesforce/apex/NaturalLanguageFormController.submitForm';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class NaturalLanguageForm extends LightningElement {
    
    // Record id if on record page
    @api recordId;
    // Bindings to retrieve form metadata
    @api formName;
    @wire(findForm, { formName: '$formName' }) formComponents;

    clickAction({ target: { dataset: { id } } }) {
        // Extract form data
        const inputs = this.template.querySelectorAll('input');
        var formInputs = {};
        inputs.forEach(input => { 
            formInputs[input.dataset.id] = input.value;
        });
        if(this.recordId!=null) {
            formInputs.RecordId = this.recordId;
        }
        // Submit form data to Apex Controller to run associated Autolaunch Flow
        submitForm({ 
            action: id,
            fieldMapAsJSON : JSON.stringify(formInputs) })
        .then(result => {
            // Send toast confirmation to user
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Form Submission',
                    message: result,
                    variant: 'success',
                }));
        })
        .catch(error => {
            // Send toast confirmation to user
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Form Submission',
                    message : error.body.message,
                    variant: 'error',
                }));
        });                    
    }
}

Le code du contrôleur Apex illustré ci-dessous appelle le Flow. Notez que la variable de sortie Réponse (comme souligné précédemment) fait partie du contrat entre ce composant et l’utilisateur qui a défini le flux. Il est utilisé pour récupérer à partir du Flow exécuté un message personnalisé à afficher à l’utilisateur à l’écran une fois les composants Flow.

public with sharing class NaturalLanguageFormController {

    @AuraEnabled
    public static String submitForm(String action, String fieldMapAsJSON) {
        Map fieldMap = (Map)
           JSON.deserializeUntyped(fieldMapAsJSON);
        NaturalLanguageFormComponent__mdt formAction = 
            new NaturalLanguageFormComponentsSelector().selectComponentsByDeveloperName(
                new Set { action })[0];
        Flow.Interview formFlow = Flow.Interview.createInterview(formAction.Flow__c, fieldMap);
        formFlow.start();
        return (String) formFlow.getVariableValue('Response');
    }
}

Sommaire

J’espère que vous pouvez voir comment un peu de planification autour de qui vous voulez aider à fournir et à maintenir une solution peut aider à apporter de la flexibilité et également à tirer parti de différents ensembles de compétences, permettant à chacun de se concentrer sur les tâches pour lesquelles ses compétences s’appliquent de manière plus optimale. Enfin, je tiens à souligner une capacité très excitante à créer des expériences de conception pour vos composants Web Lightning dans Flow Builder, actuellement en phase pilote, Découvrez cette démo incroyable ici.



Source de l’article traduit automatiquement en Français

Besoin d'aide ?
Voulez-vous utiliser Pardot à sa capacité maximale et avoir
+ DE LEADS QUALIFIÉS

Notre analyse de votre Pardot offerte dès aujourd'hui
Merci, vous pouvez compléter notre questionnaire
Nous allons revenir vers vous rapidement !

Fermer