Découvrez comment implémenter des styles dans le système de conception Salesforce Lightning pour contrôler l’apparence du texte.

À l’aide des styles Salesforce Lightning Design System (SLDS), les administrateurs ont un certain contrôle sur l’apparence du texte dans l’interface CPQ utilisateur du configurateur. Notez que cette fonctionnalité n’est pas entièrement prise en charge et peut être limitée dans un certain nombre de scénarios. Consultez cette documentation Salesforce pour connaître les styles SLDS disponibles.

En raison du manque de support complet, l’utilisation d’un cours SLDS affectera tout sur le terrain. Cela signifie que si vous utilisez « slds- text-title_bold », tout ce qui se trouve dans le champ sera en gras. Par conséquent, demandez-vous si vous pouvez utiliser le style SLDS pour votre cas d’utilisation, car un nouveau champ devra être créé pour que nous puissions insérer la classe et isoler le style. Un bon cas d’utilisation consiste donc à utiliser des styles pour créer des en-têtes, et nous l’utiliserons comme base pour cet article.

Si nous voulons créer un en-tête à l’aide de SLDS, la première étape consiste à identifier le(s) champ(s) pour le(s) champ(s) pour lequel vous souhaitez un en-tête et à vous assurer qu’ils sont affichés dans la mise en page. Ensuite, à partir de l’écran de mise en page, accédez au champ et supprimez son étiquette. Cela ne vous laissera que le nom de variable du champ.

Ensuite, créez un nouveau champ de texte et donnez-lui du texte. Ce nouveau champ sera placé au-dessus du champ existant et servira essentiellement d'« en-tête ». Placez-le dans la mise en page et supprimez son étiquette. Votre mise en page doit ressembler à cet exemple.

Enfin, dans la mise en page, survolez le nouveau champ que vous avez créé et qui servira d’en-tête, puis cliquez sur l’engrenage pour afficher les propriétés du champ. Pour Nom de classe, ajoutez la classe SLDS souhaitée. Dans cet exemple, nous avons utilisé slds-text-heading_large.

Redéployez votre plan et le tour est joué. Ouvrez un produit applicable dans le configurateur pour voir le résultat.