Lightning Datatable : Cacher L'année Sur Une Date

by fritz-hansen 50 views

Salut les amis développeurs ! On se retrouve aujourd'hui pour parler d'un petit souci qui peut parfois nous donner du fil à retordre dans nos applications Salesforce Lightning. Vous savez, cette petite fonctionnalité sympa qui affiche des dates, comme une date de naissance, et qui, hop, vous colle l'année alors que vous n'en voulez pas ? Eh bien, on va voir ensemble comment faire disparaître cette année pour rendre vos Lightning Datatable encore plus propres et intuitives. C'est parti !

Comprendre le Problème : Pourquoi l'Année S'Affiche-t-elle et Pourquoi la Cacher ?

Alors, pourquoi on se retrouve avec cette année sur les dates dans nos fameuses Lightning Datatable ? C'est souvent lié à la manière dont les champs de type date sont gérés par défaut dans l'écosystème Salesforce. Quand vous avez un champ comme 'Birthdate' (ou toute autre date), Salesforce, dans sa grande sagesse, pense qu'il est utile de vous donner la date complète, y compris l'année. C'est logique dans beaucoup de cas, genre pour des factures ou des événements. Mais voilà, pour des dates comme une date de naissance, parfois, on veut juste le mois et le jour, pour des raisons de confidentialité, de simplicité ou juste parce que c'est comme ça qu'on a décidé que ça devait être affiché. Le fait est que le composant Lightning Datatable reflète ce comportement par défaut et affiche la date telle qu'elle est stockée ou formatée nativement.

Le but, ici, c'est donc de personnaliser l'affichage. On veut reprendre le contrôle sur la façon dont l'information est présentée à l'utilisateur final. On ne veut pas effacer l'année des données, attention ! Il ne s'agit pas de modifier la base de données ou de supprimer une information essentielle. Non, ce qu'on veut, c'est masquer ou transformer la représentation de cette date dans l'interface utilisateur, spécifiquement dans notre Lightning Datatable. C'est une question d'UX (User Experience) et de présentation des données. Imaginez une liste d'anniversaires pour une équipe : afficher juste le mois et le jour est souvent plus pertinent et moins chargé visuellement que de montrer l'année de naissance de chacun. Donc, notre mission, si on l'accepte, est de trouver des techniques pour manipuler cette date avant qu'elle n'atteigne le rendu final dans le tableau.

L'importance du formatage côté client dans les LWC

Dans le monde des Lightning Web Components (LWC), et plus particulièrement avec des composants comme la Lightning Datatable, le formatage des données est souvent réalisé côté client. Cela signifie que c'est le JavaScript qui tourne dans le navigateur de l'utilisateur qui va s'occuper de mettre en forme les données avant de les afficher. C'est super puissant car ça nous donne une flexibilité énorme. Au lieu de dépendre de formats prédéfinis par le système, on peut créer nos propres règles. Pour notre problème d'année dans la date, cela veut dire qu'on peut intercepter la date brute, la transformer en ce qu'on veut (ici, sans l'année), et ensuite la passer au Lightning Datatable. Cette approche est non seulement flexible mais aussi performante, car elle évite des allers-retours inutiles vers le serveur pour chaque petite modification d'affichage.

Le formatage côté client, c'est un peu comme un chef qui prépare un plat. Il reçoit les ingrédients (les données brutes) et il les assemble et les présente de manière attrayante pour le client (l'utilisateur). Dans notre cas, les ingrédients sont la date complète (avec année), et la présentation souhaitée est sans l'année. Les outils à notre disposition dans le JavaScript des LWC sont nombreux : les objets Date natifs, les librairies de date comme Moment.js (bien que moins utilisée directement dans les LWC récents pour des raisons de performance et de taille, mais le principe reste), ou encore des fonctions de manipulation de chaînes de caractères. Comprendre cette logique de formatage côté client est la première étape pour pouvoir résoudre notre casse-tête de l'année supprimée.

En bref, cette année qui s'affiche par défaut, ce n'est pas une erreur, c'est juste le comportement standard. Notre travail, en tant que développeurs Lightning, c'est de customiser cet affichage pour répondre aux besoins spécifiques de l'application, et la Lightning Datatable nous offre les moyens de le faire élégamment. Alors, comment on s'y prend concrètement ? C'est ce qu'on va découvrir dans la suite !

Les Solutions pour Supprimer l'Année dans la Lightning Datatable

Maintenant qu'on a bien cerné le pourquoi du comment, passons à l'action ! Il existe plusieurs manières astucieuses de faire disparaître cette satanée année de nos dates dans la Lightning Datatable. Le choix de la méthode dépendra un peu de votre confort avec le JavaScript et de la complexité de votre composant. Mais rassurez-vous, ce n'est jamais bien sorcier une fois qu'on a le bon tuyau.

Méthode 1 : Formatage via une Propriété Calculée (JavaScript)

C'est probablement la méthode la plus propre et la plus recommandée dans les Lightning Web Components (LWC). L'idée, c'est de ne pas modifier les données brutes que vous recevez, mais de créer une nouvelle propriété dans votre composant qui contiendra la date formatée comme vous le souhaitez. Quand vous récupérez vos données (par exemple, depuis Apex ou une autre source), vous parcourez chaque enregistrement et, pour chaque date que vous voulez modifier, vous créez une nouvelle propriété. Par exemple, si votre champ date s'appelle birthdate__c, vous pourriez créer une nouvelle propriété appelée displayBirthdate. Le code ressemblerait à quelque chose comme ça dans votre fichier .js :

// Supposons que 'data' soit le tableau d'enregistrements que vous recevez
let formatedData = data.map(record => {
    let displayBirthdate = '';
    if (record.birthdate__c) {
        const date = new Date(record.birthdate__c);
        // Formatage : mois et jour seulement
        const options = { month: 'long', day: 'numeric' }; // ou 'short', 'numeric', '2-digit'
        displayBirthdate = date.toLocaleDateString('fr-FR', options); // 'fr-FR' pour le format français, ajustez selon vos besoins
    }
    return {
        ...record, // Copie toutes les autres propriétés du record
        displayBirthdate: displayBirthdate // Ajoute notre nouvelle propriété formatée
    };
});

this.data = formatedData; // 'this.data' étant la propriété liée à votre <lightning-datatable>

Dans votre fichier HTML (.html), vous changerez alors la référence de la colonne pour utiliser cette nouvelle propriété :

<template>
    <lightning-datatable
        key-field="Id"
        data={data}
        columns={columns}>
    </lightning-datatable>
</template>

Et dans votre fichier de configuration des colonnes (.js), vous adapterez la colonne correspondante :

const columns = [
    // ... autres colonnes
    {
        label: 'Date de Naissance',
        fieldName: 'displayBirthdate', // Utilise notre nouvelle propriété formatée
        type: 'text' // Important : on la traite comme du texte car on a personnalisé le format
    },
    // ... autres colonnes
];

L'avantage de cette approche est sa clarté et sa maintenabilité. Vous gardez vos données originales intactes et vous créez une représentation spécifiquement pour l'affichage. Le type 'text' est utilisé pour la colonne car toLocaleDateString retourne une chaîne de caractères, et non un objet Date que le lightning-datatable saurait formater nativement sans l'année. C'est une technique solide, les gars, qui vous évite de réinventer la roue.

Méthode 2 : Utilisation d'une Formatteur Personnalisé (Plus Avancé)

Pour les cas un peu plus complexes ou si vous voulez une solution plus intégrée, la Lightning Datatable permet de définir des cellTemplates personnalisés. C'est un peu plus poussé et demande une compréhension plus fine du fonctionnement interne du composant. L'idée est de créer un petit composant LWC dédié à l'affichage d'une cellule, et de le réutiliser dans votre datatable. Ce composant recevrait la valeur de la date et se chargerait de la formater.

Voici comment ça pourrait ressembler :

D'abord, votre composant de cellule personnalisée (par exemple, customDateCell.js et customDateCell.html) :

customDateCell.js:

import LightningElement, { api } from 'lwc';

export default class CustomDateCell extends LightningElement {
    @api recordId; // L'ID de l'enregistrement
    @api fieldName; // Le nom du champ date
    @api value; // La valeur de la cellule

    get formattedDate() {
        if (this.value) {
            const date = new Date(this.value);
            const options = { month: 'long', day: 'numeric' };
            return date.toLocaleDateString('fr-FR', options);
        }
        return '';
    }
}

customDateCell.html:

<template>
    <span>{formattedDate}</span>
</template>

Ensuite, dans la configuration de vos colonnes pour la Lightning Datatable, vous spécifieriez l'utilisation de ce template personnalisé :

const columns = [
    // ... autres colonnes
    {
        label: 'Date de Naissance',
        fieldName: 'birthdate__c', // On utilise le fieldName original
        type: 'custom', // Indique qu'on utilise un type personnalisé
        typeAttributes: {
            template: {
                fieldName: 'customDateTemplate' // Une propriété à ajouter à vos données
            }
        }
    },
    // ... autres colonnes
];

Et pour que ça marche, vous devez injecter le template personnalisé dans vos données. Dans votre .js principal :

// ... chargement des données ...

let processedData = data.map(record => ({
    ...record,
    customDateTemplate: 'c-custom-date-cell' // Le nom de votre composant LWC personnalisé
}));

this.data = processedData;

Cette méthode est plus complexe à mettre en place, mais elle est très puissante car elle permet de créer des cellules avec des comportements d'affichage totalement sur mesure. Pour notre cas, c'est peut-être un peu overkill, mais c'est bon à savoir que c'est possible pour des besoins plus avancés.

Méthode 3 : Utilisation d'une Librairie de Formatage (avec précaution)

Bien que l'on préfère souvent les solutions natives des LWC pour des raisons de performance et de dépendances, il est toujours possible d'intégrer une librairie externe comme Moment.js (ou sa version plus légère Day.js) si vous en avez déjà l'usage dans votre projet ou si vous avez besoin de fonctionnalités de date très avancées. L'idée serait d'inclure la librairie dans votre projet LWC (ce qui peut être un peu plus complexe qu'une application Aura ou Visualforce) puis de l'utiliser dans votre logique de formatage.

Par exemple, si vous utilisez Day.js :

Dans votre .js :

import dayjs from 'dayjs'; // Assurez-vous que Day.js est correctement importé dans votre projet
// ... chargement des données ...

let formatedData = data.map(record => {
    let displayBirthdate = '';
    if (record.birthdate__c) {
        // Formatage avec Day.js
        displayBirthdate = dayjs(record.birthdate__c).format('MMMM D'); // 'MMMM' pour le mois complet, 'D' pour le jour
    }
    return {
        ...record,
        displayBirthdate: displayBirthdate
    };
});

this.data = formatedData;

Dans votre configuration de colonnes, ce serait identique à la Méthode 1, en utilisant fieldName: 'displayBirthdate' et type: 'text'. L'avantage est la puissance de la librairie pour gérer toutes sortes de formats et de manipulations de dates. L'inconvénient majeur est l'ajout d'une dépendance externe, qui peut alourdir votre composant et potentiellement impacter les performances si elle n'est pas utilisée judicieusement. Pour notre besoin simple de masquer l'année, les méthodes natives sont généralement suffisantes et préférables.

Il est crucial de bien choisir la méthode qui convient le mieux à votre projet. Pour la majorité des cas, la Méthode 1 (propriété calculée) est la plus simple, la plus efficace et la plus