Intégration des rapports Telerik avec votre page Web ASP.NET

La visionneuse du rapport Telerik vous permet à la fois de gérer votre rapport à partir de la page Core ASP.NET qui l’hôte et demandez à votre page de répondre lorsque votre utilisateur interagit avec votre rapport.

Tandis que les divers reporting des concepteurs En cours, les reportages Telerik vous permettra de faire des choses magiques, en fin de compte, votre rapport est enregistré en tant que fichier TRDP (essentiellement un document XML) qui décrit votre rapport de manière déclarative et, potentiellement, servie à partir de votre organisation Serveur de rapports (ce que j’ai supposé dans ce post).

Mais les rapports de Telerik sont également intrinsèquement interactifs. Vous pouvez, par exemple, dans l’un des concepteurs de rapports, créer un rapport qui permet à l’utilisateur de choisir les données qu’il souhaite voir (soit par explicitement Sélection d’un filtre dans l’interface utilisateur du rapport ou en sélectionnant Éléments affichés dans le rapport). Et, avec le concepteur de rapport, vous le faites de manière déclarative, sans code, en utilisant des options de glisser-déposer et de définir le rapport.

Mais la prochaine étape dans les rapports interactifs est d’interagir votre rapport avec la page qui héberge le rapport. Cette interaction peut prendre deux formes en ayant le:

• Hébergement de page Le rapport répond lorsque l’utilisateur interagit avec le formulaire
• Rapport répond lorsque l’utilisateur interagit avec la page hôte

Bien que la mise en œuvre de l’une de ces interactions nécessite du code, vous démarrez le processus de manière déclarative.

Mise en place

Pour ce post, j’utilise cette combinaison de HTML et JavaScript pour configurer A:

• Html div élément pour tenir un rapport
• Html style élément avec des attributs CSS pour contrôler l’apparence du rapport
• Référence javascript au div ID d’élément
• Une fonction javascript (appelée loadReport) qui affiche une version modifiée de l’un des exemples de rapports qui est livré avec le serveur de rapport Telerik

Tout cela ressemble à ceci:

<div id="dashboard">
    loading...
</div>

<style>
      #dashboard {
          position: absolute;
          left: 5px;
          right: 5px;
          top: 5px;
          bottom: 5px;
          overflow: hidden;
          font-family: Verdana, Arial;
      }
  </style>

<script>
const dashboardDiv = $("#dashboard");

const loadReport = () => {
     dashboardDiv.telerik_ReportViewer({
         reportServer: {
             url: "http://...",
             username: "…",
             password: "…"
         },
         reportSource: {
             report: "Samples/Dashboard"
         }
     });
};
</script>

Comme mon loadReport La fonction montre que le chargement d’un rapport est essentiellement déclaratif. Pour afficher le rapport dans le sélectionné div élément, vous passez un lital d’objet JavaScript déclarant toutes les informations dont la visionneuse du rapport Telerik a besoin à un telerik_ReportView fonction liée au div élément.

Avec loadReport Fonction en place, je peux appeler cette fonction dans la jQuery de ma page ready événement pour charger le rapport. Une fois le rapport chargé, je capture une référence globale au rapport:

let rv;

$(() => {
    loadReport();
    rv = dashboardDiv.data("telerik_ReportViewer");
}

J’utilise le rapport de tableau de bord comme étude de cas car il offre une possibilité d’ajouter de l’interactivité: dans le rapport du tableau de bord, un utilisateur peut sélectionner une année dans la liste sur le côté droit du rapport et l’affiché cette année dans le corps principal du rapport à gauche:

Capturer les événements de rapport

Pour que la page hôte de votre application réagisse lorsque l’utilisateur interagit avec le rapport que la page affiche, vous devez câbler une fonction JavaScript à un événement de la visionneuse de rapport. Le téléspectateur du rapport Telerik fournit plus d’une douzaine d’événements.

Je vais utiliser le updateUi L’événement, qui tire chaque fois que l’interface utilisateur du rapport change (et la sélection d’une nouvelle année modifie l’interface utilisateur du rapport). Pour lier une fonction à un événement, vous déclarez l’événement dans l’objet JavaScript littéral qui définit votre rapport, puis liez votre fonction à cet événement.

Liant une fonction au updateUi L’événement ressemble à ceci:

reportSource: {
  report: "Samples/Dashboard"
},
updateUi: e => {

}

Le updateUi L’événement n’est peut-être pas le meilleur choix pour votre application. Si, par exemple, vous vouliez pouvoir annuler la modification (peut-être après avoir validé l’entrée de l’utilisateur), vous préférez peut-être utiliser le interactiveActionExecuting événement qui prend en charge l’annulation des modifications des utilisateurs qui updateUi L’événement ne le fait pas.

Si vous commencez à câbler plus d’un événement dans la déclaration de votre rapport (ou si la fonction d’un événement devient grand), cela peut rendre votre objet littéral difficile à lire. Si c’est le cas, vous pouvez définir votre fonction en dehors de l’objet littéral et simplement lier le nom de la fonction à l’événement dans l’objet de votre rapport littéral, comme ceci:

const handleYearChange = e => {

    }
};

const loadReport = () => {
    dashboardDiv.telerik_ReportViewer(
     {
        reportServer: {
            url: "http://...",
            username: "…",
            password: "…"
        },
        reportSource: {
            report: "Samples/Dashboard"
        },
        updateUi: handleYearChange
     }
  );
};

Si vous souhaitez que votre événement soit disponible en quelque sorte, vous pouvez lier les événements dynamiquement par leurs noms en utilisant la visionneuse du rapport bind et unbind Méthodes, passant le nom de l’événement (légèrement modifié) et la fonction que vous souhaitez lier à l’événement. Ce code se lie puis dénigne immédiatement mon handleYearChange Fonction, par exemple:

rv.bind(telerikReportViewer.Events.UPDATE_UI, handleYearChange);
rv.unbind(telerikReportViewer.Events.UPDATE_UI, handleYearChange);

Rédaction du code de la page hôte

Maintenant que j’ai lié la fonction JavaScript à l’événement du rapport, je peux accéder au rapport via la référence globale que j’ai créée après la charge du rapport. Alternativement, à l’intérieur de la fonction, vous pouvez utiliser le e paramètre qui est transmis à la fonction pour accéder au rapport (c’est dans le e paramètres data.sender propriété):

const handleYearChange = e => {
    let rv = e.data.sender;
}

Avec cette référence, je peux maintenant étendre mon handleYearChange Fonction pour mettre à jour ma page hôte et demander à ma page d’hôte de répondre aux modifications de l’utilisateur à mon rapport. Pour cette étude de cas, je vais simplement afficher dans une zone de texte de ma page hôte l’année que l’utilisateur a sélectionné dans le rapport.

Je vais d’abord faire la partie facile et ajouter cette zone de texte, en définissant son id attribuer à currentYear puis créer une référence globale javascript à la zone de texte:

    <input id="currentYear" />

const curInput = $("#currentYear");

Le modèle d’objet de la visionneuse de rapport a, en plus des événements, un ensemble de méthodes qui renvoient les objets que vous pouvez utiliser pour gérer le rapport. Le visiteur du rapport ReportSource La méthode, par exemple, renvoie un objet avec exactement une propriété, appelée parameters. Que parameters La propriété, à son tour, expose un objet qui a une propriété nommée pour chaque paramètre défini dans le rapport (vous devrez obtenir le nom de votre paramètre en ouvrant le rapport dans l’un des concepteurs de rapports).

Dans mon exemple de rapport, le paramètre détenant l’année actuellement sélectionnée est appelé ReportYear Et je peux utiliser ce paramètre pour récupérer l’année où le rapport affiche actuellement.

Une mise en garde: vous voulez faire preuve de soins dans la fonction que vous liez avec le updateUi Événement Parce que l’événement est soulevé à plusieurs reprises lorsqu’une page est chargée – une fois chacun pour les sections de la page (en-tête, corps, pied de page, etc.). Laisser votre code s’exécuter plusieurs fois peut entraîner des bogues subtils (nous ne vous demanderons pas comment je le sais).

Voici le code dans mon updateUi événement pour prendre le ReportYear Valeur du paramètre et le fourrer dans ma zone de texte (mais ne le faites qu’une seule fois, lorsque le paramètre change):

let currentYear;

updateUi: (e) => {
    parms = rv.reportSource().parameters;
    if (currentYear !== parms.ReportYear) {
        currentYear = parms.ReportYear;
        curInput.val(parms.ReportYear);
    }
}

Maintenant, chaque fois que l’utilisateur sélectionne un an dans le rapport, la zone de texte de la page hôte du rapport sera mise à jour.

Interagir avec le rapport

Comme je l’ai dit au début, l’interactivité va de deux manières. Lorsque l’utilisateur interagit avec la page hôte du rapport, vous voudrez peut-être que le rapport réponde à ce changement. Dans mon étude de cas, je voudrais peut-être que le rapport affiche les données pendant un an que l’utilisateur se trouve dans la zone de texte sur ma page hôte.

L’implémentation qui nécessite de définir le paramètre approprié sur le rapport (ReportYeardans mon cas) à partir de l’entrée de l’utilisateur (mon CurrentYear TextBox) et rafraîchir le rapport. Pour ce faire, j’étends la déclaration de ma zone de texte pour appeler une fonction lorsque l’utilisateur modifie le contenu de la zone de texte et quitte la zone de texte:

    <input id="currentYear" onchange="updateReport()" />

Dans ce nouveau updateReport Fonction, je dois récupérer la valeur actuelle à partir de la zone de texte, mettre à jour le paramètre approprié du rapport (ReportYeardans mon cas), et appelez le rapport du rapport refreshReport Méthode – Utiliser toujours la référence globale au rapport que j’ai créé après le chargement du rapport. Ce code ressemble à ceci:

let UpdateReport = () => {
    let parms = rv.reportSource().parameters;
    parms.ReportYear = curInput.val();
    rv.refreshReport();
};

Maintenant, alors que l’utilisateur interagit avec ma page hôte, mon rapport répondra.

De toute évidence, ce sont des exemples très simples, mais le spectateur du rapport a Plus de méthodes que le ReportSource Méthode que j’ai utilisée. Mais ce que vous avez ici, c’est la structure de base de tout type d’intégration que vous voudrez ajouter, peu importe ce que vous voulez faire.

Telerik Reporting est livré avec votre bibliothèque de composants d’interface utilisateur préférée lorsque vous regroupez avec Progress Telerik Devcraft. Et tout cela est livré avec un essai gratuit de 30 jours. Alors, continuez:

Essayer maintenant