Présentation de l'extension Lightning Studio
Lightning Studio construit le développement Salesforce LWC facilement et rapidement. Dans cet éditeur, nous pouvons créer directement les canaux Apex/message et les scripts LWC. De plus, nous pouvons déployer directement les composants LWC (personnalisés) en une seule fois. Voyons comment l'ajouter à notre site Web et l'ouvrir.
Accédez au site Web et recherchez 'Lightning Studio - Ajouter Chrome' (si vous utilisez Chrome). Cliquez sur le bouton 'Ajouter à Chrome'.
Nous pouvons voir qu'il est ajouté à Chrome. Maintenant, il est désactivé. Il ne sera activé que si l'organisation Salesforce est ouverte.
Il est activé après la connexion à l'organisation Salesforce.
Cliquez sur l'extension.
Allez à gauche et sélectionnez la troisième icône qui est utilisée pour créer un nouveau composant LWC.
- Tout d'abord, nous devons spécifier le nom du composant.
- Le 'isExposed' est utilisé pour définir la visibilité du composant dans Salesforce. Il doit être défini sur vrai.
- Il est important de spécifier la cible où le composant doit être placé. Plusieurs cibles peuvent être sélectionnées.
- Le déploiement du composant est la dernière étape (cliquez sur 'Déployer').
Exemple 1 : ajout à la page d'enregistrement
Dans ce scénario, nous créons le script LWC 'firstComponent' qui affiche le texte 'Added to Record page' et ajoutons ce composant à la page 'Account Record'. Dans le fichier 'firstComponent.js-meta.xml', nous devons spécifier la cible comme lightning__RecordPage.
Structure des codes :
firstComponent.html
< modèle >< carte éclair une variante = 'Étroit' titre = 'Linux' >
< p >> Ajouté à la page d'enregistrement p >
carte éclair >
modèle >
firstComponent.js
importer { ÉclairÉlément } depuis 'chance' ;exporter la classe par défaut FirstComponent étend LightningElement {
}
firstComponent.js-meta.xml
< ?xml version = '1.0' ? >< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< est exposée > vrai est exposée >
< cibles >
< cible > foudre__RecordPage cible >
cibles >
LightningComponentBundle >
Ajout d'un composant :
Accédez à l'organisation Salesforce et recherchez l'application « Ventes » sous le lanceur d'applications.
Ouvrez n'importe quel enregistrement de compte en accédant à l'onglet 'Comptes'. Accédez à l'icône d'engrenage et sélectionnez 'Modifier la page'.
Maintenant, allez à gauche et recherchez votre composant.
Faites glisser le composant et placez-le sous le 'Panneau de présentation'.
Cliquez sur 'Activer' et attribuez-le comme valeur par défaut de l'organisation. Enfin, enregistrez la page d'enregistrement.
C'est fait. Maintenant, revenez à la page de l'application 'Ventes' et accédez au 'Enregistrement de compte' (n'importe quel enregistrement). Vous pouvez voir que le composant personnalisé est ajouté.
Exemple 2 : Ajout à la page d'accueil
Utilisons le 'firstComponent'. Modifiez le texte du paragraphe en tant que 'Ajouté à la page d'accueil' dans le fichier HTML. Spécifiez la cible comme 'lightning__HomePage' dans le fichier 'firstComponent.js-meta.xml'.
firstComponent.html
< p > Ajouté à la page d'accueil < / p >
< / carte-éclair>
< / modèle>
firstComponent.js-meta.xml
version = '1.0' ?>< / cibles>
< / LightningComponentBundle>
Ajout d'un composant :
Allez dans l'application 'Ventes' et cliquez sur l'onglet 'Accueil'.
Cliquez sur la page d'édition disponible sous l'icône d'engrenage. Recherchez le composant et placez-le au-dessus du composant 'Performance'. Enregistrez la page.
Actualisez l'onglet 'Accueil des ventes'.
Nous pouvons voir que notre composant est ajouté à la page d'accueil.
Exemple 3 : Ajouter à la page de l'application
Utilisons le 'firstComponent'. Modifiez le texte du paragraphe en tant que 'Ajouté à la page de l'application' dans le fichier HTML. Spécifiez la cible comme 'lightning__AppPage' dans le fichier 'firstComponent.js-meta.xml'.
firstComponent.html
< modèle >< carte éclair une variante = 'Étroit' titre = 'Linux' >
< p > Ajouté à la page de l'application p >
carte éclair >
modèle >
firstComponent.js-meta.xml
version = '1.0' ?>< / cibles>
< / LightningComponentBundle>
Ajout d'un composant :
Tout d'abord, nous devons créer une page d'application dans Salesforce à l'aide de Lightning App Builder. Recherchez 'Lightning App Builder' dans la 'Recherche rapide' et cliquez sur 'Nouveau' pour créer une nouvelle page Lightning.
Choisissez la page de l'application et allez à 'Suivant'.
Donnez l'étiquette 'Linuxhint App' et allez à 'Suivant'.
À partir de maintenant, nous n'avons besoin que d'une région pour placer le composant. Alors, choisissez 'Une région' et cliquez sur 'Terminé'.
Maintenant, faites glisser le 'firstComponent' sur la page et enregistrez la page.
Une fenêtre contextuelle apparaîtra dans laquelle la page doit être activée. Cliquez sur 'Activer'.
Après cela, vous devez ajouter une page à l'application. Allez dans l'onglet 'LIGHTNING EXPERIENCE' et faites-le. Enregistrez cette activation.
Maintenant, allez dans le lanceur d'applications et recherchez 'Linuxhint App'. Vous pouvez voir que notre composant est ajouté à la page App.
Conclusion
Maintenant, nous sommes en mesure de comprendre comment ajouter LWC à la page de l'application, à la page d'accueil et à la page d'enregistrement. Dans tous les scénarios, nous avons utilisé les mêmes exemples pour avoir une meilleure idée. Assurez-vous que 'isExposed' est vrai. Sinon, le composant n'est pas visible dans l'organisation Salesforce. Dans l'ensemble de ce guide, nous avons utilisé l'éditeur Lightning Studio (bêta) pour développer le code. Toutes les étapes sont expliquées sur la façon de télécharger et d'utiliser cet éditeur au début de ce guide.