« Comment vais-je construire cela » : composants Telerik Blazor

Voici les cinq composants qui répondent « Comment puis-je construire cela ? » lorsque vous devez créer une application Blazor pour gérer les notes de frais.

Concevoir une interface utilisateur conviviale et réactive est à la fois une science et un art. Il s’agit de combiner esthétique et fonctionnalité pour créer une expérience transparente qui guide les utilisateurs sans effort. En tant que développeur Web, vous disposez du savoir-faire technique nécessaire pour y parvenir. Mais lorsque vous êtes chargé de créer une interface utilisateur élégante et adaptable pour la gestion des dépenses sans passer trop de temps ni avoir besoin de compétences avancées en matière d’interface utilisateur, une question pratique se pose : « Comment vais-je créer cela ?

Progrès Interface utilisateur Telerik pour Blazor intervient comme solution. Grâce à ses composants conviviaux, vous pouvez rapidement créer une interface utilisateur de gestion des dépenses belle et réactive, même sans expertise approfondie en matière d’interface utilisateur. C’est votre raccourci pour créer une interface intuitive qui répond aux besoins professionnels complexes sans perdre de temps ni de ressources.

En combinant les atouts des composants Grille, Formulaire, Graphique, Sélecteur de date et Notification, nous avons pour mission de créer une plate-forme pratique qui facilite le suivi des dépenses, simplifie les flux de travail d’approbation, offre des analyses faciles à comprendre et améliore la communication. Explorons ce scénario et voyons comment ces composants s’associent pour améliorer la gestion des dépenses.

Voici à quoi pourrait ressembler votre résultat final :

Maîtrisez vos dépenses avec le composant Grid

Tout d’abord, nous avons le Grille Blazor composant – un outil puissant pour suivre les dépenses. Grâce à des fonctionnalités telles que le filtrage, le tri, le regroupement, la pagination et l’édition, il est facile de rechercher et d’organiser les données de dépenses. La grille vous permet également de saisir des données de manière transparente et fournit un aperçu clair des détails tels que les dates, les catégories, les montants et le statut. Vous pouvez consulter les transactions existantes à partir d’un seul endroit.

L’interface utilisateur Telerik pour Blazor Grid est construite sur la technologie native Blazor par une entreprise expérimentée, offrant une personnalisation élevée et une vitesse de premier ordre. Ceci est un exemple de la façon dont vous pourriez utiliser le Interface utilisateur Telerik pour Blazor Grid comme aperçu des dépenses.

Extrait de code:

@using System.ComponentModel.DataAnnotations

<TelerikGrid Data=@MyData EditMode="@GridEdit Mode. Incell" Pageable="true" Height="500px"
Sortable="true" FilterMode="Telerik.Blazor.GridFilterMode. FilterMenu" >
  <GridColumns>
    <GridColumn Field=@nameof (Expense. ID) Title="ID" Editable="false" />
    <GridColumn Field=@name of (Expense. ExpenseName) Title="Trip to"
Editable="false"></GridColumn>
    <GridColumn Field=@nameof (Expense. Amount) Title="Amount" DisplayFormat="{0:C2}"
Editable="false" ></GridColumn>
    <GridColumn Field=@nameof (Expense. Date) Title="Date" Format="{0:d}"
Editable="false"></GridColumn>
    <GridColumn Field=@nameof (Expense. TravelDate) Title="Travel Date" Format="{0:d}"
Editable="false"></GridColumn>
    <GridColumn Field=@nameof (Expense. TravelLocation) Title="Travel Location"
Editable="false"></GridColumn>
    <GridColumn Field=@name of (Expense. Status) Title="Expense Status"
Editable="false"></GridColumn>
    <GridColumn Title="Review" Editable="false">
      <Template>
        <TelerikButton Icon="@Svg Icon. InfoCircle"
OnClick="@OnReviewHandler">Review</TelerikButton>
      </Template>
    </GridColumn>
  </GridColumns>
</TelerikGrid>

Soumission facile des dépenses avec le composant Formulaire

Ensuite, nous introduisons le Forme Blazor composant, qui simplifie le processus de soumission des dépenses. Vous pouvez l’utiliser pour saisir des détails, joindre des reçus et choisir des catégories. Le composant Form permet d’éviter les erreurs et garantit une saisie précise des données. Soumettre des demandes de dépenses devient un jeu d’enfant, fournissant toutes les informations nécessaires à un traitement fluide.

Le composant Telerik UI pour Blazor Form propose des modes d’orientation horizontale et verticale, l’intégration de modèles et la prise en charge de la classe EditContext. Vous pouvez organiser les mises en page en colonnes à l’aide du paramètre Columns, bénéficier d’options de validation telles que DataAnnotationsValidator et regrouper efficacement les éléments de formulaire. Les modèles personnalisables permettent un rendu de contenu unique et vous pouvez ajouter des boutons à l’aide de la balise FormButtons, y compris le bouton Soumettre par défaut.

Voici un exemple rapide de la façon dont vous pouvez utiliser le Interface utilisateur Telerik pour le formulaire Blazor pour notre scénario de gestion des dépenses.

Extrait de code:

<TelerikForm Model="@ExpenseReport"
    OnValidSubmit="@HandleValidSubmit"
    OnInvalidSubmit="@HandleInvalidSubmit">
  <FormValidation>
    <DataAnnotationsValidator></DataAnnotationsValidator>
  </FormValidation>
  <FormItems>
    <FormItem Field="@nameof(ExpenseReport.SelectedDate)">
      <Template>
        <label for="travel-date" class="k-label k-form-label">Expense Date:</label>
        <TelerikDatePicker @bind-Value="@ExpenseReport.SelectedDate"
          Min="@ExpenseReport.MinDate"
          Max="@ExpenseReport.MaxDate"
          DebounceDelay="@ExpenseReport.DebounceDelay"
          ShowWeekNumbers="true"
          Id="travel-date">
        </TelerikDatePicker>
        <TelerikValidationMessage For="@(() => ExpenseReport.SelectedDate)"></TelerikValidationMessage>
      </Template>
    </FormItem>
    <FormItem Field="@nameof(ExpenseReport.Location)">
      <Template>
        <label for="location" class="k-label k-form-label">Location*:</label>
        <TelerikTextBox Id="location" @bind-Value="@ExpenseReport.Location" Placeholder="Travel location"></TelerikTextBox>
        <TelerikValidationMessage For="@(() => ExpenseReport.Location)"></TelerikValidationMessage>
      </Template>
    </FormItem>
    <FormItem Field="@nameof(Expense.ExpenseType)">
      <Template>
        <label for="expenseType" class="k-label k-form-label">Expense Type*:</label>
          <TelerikDropDownList Data="@expenseTypes" TextField="ExpenseTypeName" ValueField="ExpenseTypeId" @bind-Value="selectedValue">
          </TelerikDropDownList>
          <TelerikValidationMessage For="@(() => ExpenseReport.ExpenseType)"></TelerikValidationMessage>
        </Template>
    </FormItem>
    <FormItem Field="@nameof(ExpenseReport.Amount)">
      <Template>
        <label for="amount" class="k-label k-form-label">Amount*:</label>
        <TelerikNumericTextBox Id="amount" @bind-Value="@ExpenseReport.Amount" Format="c2" Placeholder="0.00"></TelerikNumericTextBox>
        <TelerikValidationMessage For="@(() => ExpenseReport.Amount)"></TelerikValidationMessage>
      </Template>
    </FormItem>
    <FormItem>
      <Template>
        <label class="k-label k-form-label">Expense Receipt:</label>
        <TelerikDropZone Id="@ExpenseReport.DropZoneId" NoteText="@ExpenseReport.NoteText" />
        <TelerikFileSelect DropZoneId="@ExpenseReport.DropZoneId" AllowedExtensions="@ExpenseReport.AllowedExtensions" />
      </Template>
    </FormItem>
  </FormItems>
</TelerikForm>

Visualisez les dépenses avec le composant Graphique

Parlons du composant Graphique, qui transforme les données de dépenses en visualisations faciles à comprendre. En analysant les dépenses, vous pouvez obtenir des informations sur les modèles de dépenses, la répartition par catégorie et les budgets.

Le Interface utilisateur Telerik pour Blazor Chart Le composant fournit une variété de types de graphiques et vous donne la possibilité d’affiner l’apparence du composant, y compris des éléments tels que les couleurs, les polices, les remplissages, les marges et les modèles.

Consultez un exemple de mise en œuvre du Interface utilisateur Telerik pour Blazor Chart adapté à notre application de gestion des dépenses.

Extrait de code:

<TelerikChart>
  <ChartTitle Text="Travel Expenses by Category"></ChartTitle>
  <ChartLegend Visible="true" Position="ChartLegendPosition.Top"></ChartLegend>
  <ChartSeriesItems>
    <ChartSeries Type="ChartSeriesType.Donut"
        Data="@ExpenseData"
        Field="@nameof(ExpenseCategory.Amount)"
        CategoryField="@nameof(ExpenseCategory.Category)">
      <ChartSeriesTooltip Visible="true" Context="item">
        <Template>
          @item.Percentage.ToString("P")
        </Template>
      </ChartSeriesTooltip>
      <ChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
          Visible="true"
          Background="transparent"
          Format="{0:C2}" >
      </ChartSeriesLabels>
    </ChartSeries>
  </ChartSeriesItems>
</TelerikChart>

Choisissez des dates avec le composant DatePicker

Le [DatePicker]](https://docs.telerik.com/blazor-ui/components/datepicker/overview) simplifie le choix des dates pour les enregistrements de dépenses. Vous pouvez parcourir les calendriers et sélectionner les dates de soumission ou rechercher des dépenses spécifiques dans un délai donné. Ce composant garantit l’exactitude de la sélection des dates, rendant ainsi le suivi des dépenses et le reporting plus efficaces.

Le composant Telerik UI pour Blazor DatePicker offre aux utilisateurs la possibilité de sélectionner une date soit en interagissant avec un calendrier grégorien graphique, soit en la saisissant manuellement dans un champ spécifique à la date. Vous avez la possibilité de gérer le format de la date saisie, de personnaliser l’expérience de navigation dans le calendrier et de spécifier les dates dont la sélection par l’utilisateur doit être restreinte.

Vérifiez comment le Interface utilisateur Telerik pour Blazor DatePicker composant, aide à la sélection de dates pour la gestion des dépenses.

Extrait de code:

<TelerikDatePicker  @bind-Value="@ExpenseReport.SelectedDate"
    Min="@ExpenseReport.MinDate"
    Max="@ExpenseReport.MaxDate"
    DebounceDelay="@ExpenseReport.DebounceDelay"
    ShowWeekNumbers="true"
    Id="travel-date">
</TelerikDatePicker>

Restez informé grâce au composant de notification

Enfin et surtout, le Notification Le composant tient tout le monde au courant. Il informe les utilisateurs de l’état de leurs dépenses, qu’elles soient approuvées, rejetées ou qu’elles aient besoin de plus d’informations. Cette communication transparente rationalise les flux de travail d’approbation et améliore la gestion globale des dépenses.

Le composant Telerik UI pour Blazor Notification affiche des messages concis aux utilisateurs, transmettant des informations sur la progression d’un processus au sein de l’application. Grâce à ses options de configuration, vous pouvez personnaliser son placement, choisir parmi différents effets d’animation et contrôler son comportement global de rendu.

Ne perdez aucune mise à jour importante dans votre système de gestion des dépenses : intégrez le Interface utilisateur Telerik pour la notification Blazor composant.

Extrait de code:

<div  class="notification-parent">
  <TelerikNotification  @ref="NotificationComponent"
      Class="warning-notification"
      HorizontalPosition="@NotificationHorizontalPosition.Center"
      VerticalPosition="@NotificationVerticalPosition.Top"></TelerikNotification>
</div>

En conclusion : une approche pratique pour créer des interfaces utilisateur Web

En conclusion, les composants Telerik UI pour Blazor se réunissent pour simplifier la création d’une interface utilisateur pour la gestion des dépenses. La grille vous aide à rester organisé, le formulaire facilite la soumission des dépenses, le graphique fournit des informations claires, le sélecteur de date garantit une sélection précise des dates et la notification assure une communication fluide.

En utilisant ces composants prêts à l’emploi, vous pouvez réduire le temps et les efforts nécessaires à la création d’une application Web. Vérifier la Interface utilisateur Telerik pour Blazor bibliothèque de composants et commencez à créer votre première application Blazor dès aujourd’hui !

Essayez maintenant