A capacidade de visualizar relatórios de progresso dos alunos on-line oferece inúmeros benefícios para pais e educadores. O acesso on-line fornece aos pais e alunos informações em tempo real sobre o desempenho acadêmico do aluno, permitindo que eles se mantenham informados e envolvidos em sua educação. Eles podem acompanhar facilmente o progresso, monitorar a frequência, visualizar notas e identificar áreas onde suporte adicional pode ser necessário. Para educadores, os relatórios de progresso on-line simplificam o processo de geração de relatórios, facilitando a geração e o compartilhamento de avaliações abrangentes do desempenho dos alunos. Permite que os professores comuniquem de forma mais eficaz com os pais, promovendo a colaboração e permitindo intervenções específicas. No geral, o acesso online aos relatórios de progresso dos alunos melhora a comunicação, promove a responsabilização e apoia uma abordagem proativa para o sucesso dos alunos. Felizmente, o ActiveReportsJS torna mais fácil para os educadores criar e personalizar esses relatórios de progresso e facilita sua visualização em aplicativos da web. Este artigo mostrará como usar o ActiveReportsJS Report Designer para criar um relatório de progresso e usar o Report Viewer para exibir seu relatório em um aplicativo JavaScript. Visão geral do conteúdo Conectando dados ao relatório Criando o cabeçalho e rodapé do relatório de progresso Exibindo informações do aluno Construindo o Resumo do GPA e a Tabela de Progresso Acadêmico Criando o Tablix de Progresso Comportamental e de Atitude Criando o Tablix de Atendimento Adicionando ActiveReportsJS a um aplicativo JavaScript Se quiser acompanhar o artigo, você pode encontrar o relatório completo e a aplicação . aqui Conectando dados ao relatório Para os fins deste artigo, usaremos o designer independente incluído no download do ActiveReportsJS. Após instalar e iniciar o designer, poderemos ver nosso relatório vazio. Antes de começarmos a adicionar controles ao relatório, queremos ter certeza de vincular os dados que usaremos ao relatório. No canto superior direito do designer, selecione o painel . Isso abrirá a exibição de nossas , e : Dados fontes de dados conjuntos de dados parâmetros Para começar, precisaremos de uma fonte de dados. Clique no botão na seção Fontes de dados para abrir a janela Fontes de dados: Adicionar A partir daqui, podemos informar ao relatório onde procurar os dados. Temos duas opções de onde os dados podem vir: ou . O JSON remoto exige que você forneça o URL para um endpoint da API, enquanto o JSON incorporado permite que você selecione um arquivo JSON para carregar dados diretamente no relatório. JSON remoto JSON incorporado Para este relatório, usaremos JSON incorporado para carregar vários arquivos ; temos arquivos com informações, notas, comportamento e frequência dos alunos, portanto, precisaremos criar uma fonte de dados para cada um desses arquivos. JSON Quando concluído, deverá ficar assim: Agora que configuramos nossas quatro fontes de dados, é hora de criar um conjunto de dados para cada uma. Para criar um conjunto de dados para uma fonte de dados, basta clicar no ícone próximo à fonte de dados que deseja usar; isso abrirá a janela Conjunto de dados: de adição Como estamos usando JSON incorporado, tudo o que precisamos fornecer é um caminho JSON; isso informa ao relatório quais dados queremos recuperar do JSON. Nesse caso, queremos recuperar todo o JSON, então usamos o caminho . Isso informa ao relatório para obter todos os dados disponíveis. $.* se estiver usando JSON remoto, você também precisará fornecer um valor Uri/caminho; esse valor é passado do relatório para a API para informar à API quais dados retornar. Observação: Assim que o caminho JSON estiver inserido, clique no botão para confirmar se seu conjunto de dados pode recuperar os dados solicitados. Validar Se tudo funcionar corretamente, o campo deverá agora ser preenchido com valores dos nossos dados: Campos do Banco de Dados Depois de configurarmos um conjunto de dados para cada fonte de dados, nosso painel de dados deverá ficar assim: E é isso! Agora temos dados conectados ao nosso relatório que podemos consultar nos controles. Na próxima seção, começaremos a construir as diferentes seções do relatório, começando pelo cabeçalho e rodapé. Criando o cabeçalho e rodapé do relatório de progresso Podemos começar a criar os elementos do relatório agora que os dados foram configurados. Para começar, criaremos um cabeçalho e rodapé para as páginas do nosso relatório. Na barra de ferramentas, selecione a guia e clique nos botões e : Seções Adicionar cabeçalho Adicionar rodapé Isso adicionará seções de cabeçalho e rodapé ao relatório. Queremos adicionar dois controles da caixa de ferramentas de controle na seção de cabeçalho. Clique no botão de hambúrguer no canto superior esquerdo do designer para expandir a caixa de ferramentas e, em seguida, arraste um controle e um controle para o cabeçalho da página. TextBox Image Dentro do TextBox, definiremos seu valor como “Relatório de Progresso do Aluno”. Em seguida, incorporaremos uma imagem ao relatório para o controle Imagem. Selecione o controle Imagem e expanda o menu suspenso Imagem na seção Aparência de suas propriedades. Para incorporar uma imagem, clique no botão e depois clique em **Carregar…** para abrir o explorador de arquivos e selecionar a imagem que deseja carregar: Incorporado Agora que nossa imagem foi carregada e nosso texto definido, vamos apenas redimensionar e estilizar um pouco através do painel Propriedades. Quando concluída, nossa seção de cabeçalho fica assim: Agora é hora de criar o rodapé. Em nosso rodapé queremos incluir 3 TextBoxes: duas com informações de contato e uma para exibir o ano atual. Ao lado de cada caixa contendo informações de contato, também queremos incluir o ícone de um telefone para indicar que se trata de números de telefone. Arraste três controles TextBox e dois controles Image para a área de rodapé da página. Seguiremos os mesmos passos descritos acima para definir as imagens. Para dois dos controles TextBox, colocaremos apenas alguns números de telefone que podem ser usados para entrar em contato com o proprietário do relatório, mas para o terceiro, usaremos uma expressão para que sempre exiba o ano atual. Dentro desta terceira TextBox, coloque este valor: Você pode ver dentro da string que incluímos colchetes e, dentro dos colchetes, a expressão ; isso retornará o ano atual, e o relatório sabe avaliar isso como uma expressão porque a colocamos entre colchetes. © {Year(Now())} GrapeCity, Inc. Todos os direitos reservados. Year(Now()) Depois de estilizar um pouco, o rodapé deve ficar assim: Podemos visualizar o relatório para ver como a expressão que criamos é avaliada: Agora que criamos o cabeçalho e o rodapé, eles serão exibidos em cada página do relatório. Na próxima seção, adicionaremos alguns dos dados que carregamos, exibindo algumas informações básicas sobre o aluno. Exibindo informações do aluno Agora é hora de começar a incorporar alguns dos dados que o relatório está carregando. Primeiro, arraste um controle TextBox e um controle Container para o corpo do relatório. Expanda ambos para que estendam a maior parte da largura da página e, dentro do controle TextBox, inclua o texto “Informações do Aluno”: Estaremos usando este Container para armazenar todas as informações associadas ao aluno. Agora colocaremos TextBoxes dentro do Container; eles serão usados para rótulos e para armazenar informações dos conjuntos de dados. Configure o contêiner para corresponder ao seguinte: Agora, dentro de cada uma das TextBoxes vazias, queremos incluir expressões que recuperam dados do nosso conjunto de dados de informações dos alunos. Inclua o seguinte texto nas TextBoxes associadas: Quando concluído, você poderá visualizar o relatório e ver o seguinte: Construindo o Resumo do GPA e a Tabela de Progresso Acadêmico A seguir, exibiremos informações relativas às notas do aluno. Primeiro, criaremos a seção Resumo do GPA; como na seção anterior, arraste um controle TextBox e para o relatório. Expanda ambos para que estendam a maior parte da largura da página e, dentro do controle TextBox, inclua o texto “Resumo GPA”: Container Dentro deste Container, queremos exibir o GPA geral do aluno, bem como seu percentil. Arraste quatro TextBoxes para o contêiner, configurando-as da seguinte forma: A seguir, precisaremos configurar mais algumas expressões dentro dos TextBoxes vazios: A expressão GPA geral calculará o percentil em que eles se enquadram e, com base nisso, fornecerá um valor numérico GPA associado. A expressão Percentil simplesmente calcula a nota com base em uma porcentagem. Quando concluído, você poderá ver o seguinte ao visualizar o relatório: Agora que criamos o resumo, é hora de mostrar o detalhamento do progresso do aluno por disciplina. Abaixo da seção Resumo do GPA, arraste um controle TextBox e um controle Table para o corpo do relatório. Dentro do TextBox, inclua o texto “Progresso Acadêmico”, enquanto dentro da tabela, inclua os seguintes cabeçalhos de coluna: Assunto Professor Trimestre 1 Trimestre 2 Trimestre 3 Quando concluído, deverá ficar parecido com isto: A próxima coisa que precisamos fazer é associar o conjunto de dados correto à tabela. Selecione o controle Tabela e, dentro do painel Propriedades, defina o menu suspenso Nome do conjunto de dados para usar o conjunto de dados . Agora podemos fazer referência aos dados deste conjunto de dados na tabela. de marca Preencha o resto da tabela assim: Depois de um pouco de estilo adicional, o controle Table agora se parece com isto: Quando visualizamos nosso relatório, a tabela deve ficar assim: Adicionando a Tablix de Progresso Comportamental e de Atitude Agora que os usuários podem visualizar seu progresso acadêmico, é hora de adicionarmos uma seção mostrando as notas do professor sobre o progresso comportamental e de atitude do aluno. Antes de fazermos isso, adicionaremos uma nova seção ao nosso relatório. Na parte inferior do designer de relatório, você verá um botão ; pressione isto e uma nova página/seção contínua será adicionada ao seu relatório: Adicionar Seção Agora, abaixo do cabeçalho desta nova seção, adicione um controle TextBox, um controle Container e três controles TextBox dentro do controle Container: Como você pode ver, preenchemos essas TextBoxes com nosso próprio texto. Antes de adicionarmos os controles Tablix, queremos fazer mais uma modificação. Nessas tabelas, queremos usar ícones para mostrar onde o aluno se enquadra em termos de , e . Usaremos ícones verdes, amarelos e vermelhos. Para adicioná-los, adicione os seguintes valores à propriedade do TextBox associado: Excelente Satisfatório Necessita Melhorar Image Agora, se visualizarmos o relatório, devemos ver o seguinte: Agora que o contêiner Tablix está configurado, é hora de adicionar os controles Tablix para exibir os dados de progresso comportamental e de atitude. Arraste um controle Tablix para esse contêiner; você verá o Tablix Wizard aparecer na janela do designer: O Tablix Wizard é uma ferramenta extremamente poderosa para criar um controle Tablix (ou tabela dinâmica, como também é conhecido), que pode exibir dados de maneiras mais dinâmicas do que uma tabela padrão. Usaremos dados do conjunto de dados que criamos no início do artigo. Expanda esse conjunto de dados e, em seguida, arraste e solte o valor na seção do assistente e arraste e solte os valores , e na seção do assistente. Certifique-se de alterar os valores agregados de T1, T2 e T3 de para . de comportamento BehavioralMeasure Grupos de linhas T1 T2 T3 Valores Count None Antes de finalizar clique no botão do assistente; precisamos configurar um filtro para esta tabela. Aqui, clique no botão para adicionar um novo filtro. Defina a primeira caixa para o campo do conjunto de dados e defina o filtro para procurar a string “Hábito de Trabalho”: Filtros Adicionar Tipo Quando terminar, você pode clicar no botão e ver a aparência do seu Tablix neste momento: OK Agora, como acontece com as caixas de texto e , atualizaremos as células de dados das colunas T1, T2 e T3 para exibir os ícones em vez de valores de texto. Para cada uma dessas células de dados, remova o valor do texto e atualize a propriedade do TextBox associado: Excelente Satisfatório Precisa de Melhoria Image Isso fará com que o controle Tablix coloque o ícone de semáforo correto na célula com base no valor da célula. Após algumas atualizações de estilo, nosso primeiro Tablix deve ficar assim: Quando visualizamos o relatório, o Tablix deve ter a seguinte aparência: Agora, precisamos criar o segundo controle Tablix para exibir informações de atitude. O bom é que este Tablix é quase idêntico ao que acabamos de criar. Copie e cole o primeiro Tablix que criamos e coloque-o no contêiner logo abaixo do outro Tablix. Em seguida, atualize a primeira célula do cabeçalho de “Hábitos de Trabalho” para “Aderência ao Código de Conduta”. Por fim, selecione o segundo controle Tablix e clique no ícone de engrenagem no canto superior direito do controle; isso reabrirá o assistente Tablix. Clique no botão ; vamos modificar o filtro que estamos usando atualmente. Filtros Atualize o valor do texto do filtro de “Hábitos de Trabalho” para “Conduta em Sala de Aula”. Agora, a seção Progresso Comportamental e de Atitude deve ficar assim: Quando visualizamos o relatório, a seção Progresso Comportamental e de Atitude deve ter a seguinte aparência: Adicionando o Tablix de Presença A seção final que adicionaremos ao nosso relatório mostrará a frequência do aluno. Arraste um controle TextBox e um controle Tablix para o relatório e coloque-os abaixo da seção Progresso Comportamental e de Atitude. Dentro do assistente Tablix, usaremos o conjunto de dados ; arraste o valor para a seção do assistente e arraste os valores , e para a seção do assistente. de atendimento Dias Grupos de linhas T1 T2 T3 Valores Além disso, certifique-se de definir os valores agregados de , e como : T1 T2 T3 Sum Agora, a seção Presença deve ter a seguinte aparência: E quando visualizarmos o relatório, ele deverá ficar assim: Agora, com o relatório completo, quando visualizamos o relatório, as páginas devem ficar assim: Adicionando ActiveReportsJS a um aplicativo JavaScript Agora que criamos nosso relatório de progresso do aluno, é hora de adicionar o ActiveReportsJS Report Viewer a um aplicativo JavaScript para que possamos visualizar o relatório no navegador. Crie um novo arquivo chamado e abra-o no de sua preferência. index.html IDE Vamos adicionar o seguinte código ao arquivo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Student Progress Report</title> <meta name="description" content="ARJS Report viewer" /> <meta name="author" content="GrapeCity" /> </head> <body></body> </html> Agora que o arquivo HTML está configurado, é hora de adicionar ActiveReportsJS ao arquivo. Para isso, usaremos o CDN para carregar os arquivos necessários. Dentro da tag adicione o seguinte código: <head> <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-ui.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-viewer.css" type="text/css" /> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-core.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-html.js"></script> As primeiras duas linhas de código carregam os arquivos CSS necessários: o arquivo CSS principal e o arquivo CSS do visualizador. Em seguida, carregamos o arquivo JavaScript principal e o arquivo JavaScript do visualizador. Finalmente, estamos carregando um arquivo PDF, dados tabulares e JavaScript; esses arquivos oferecem aos usuários a capacidade de exportar o relatório nos respectivos tipos de arquivo. HTML Se você não quiser permitir que os usuários exportem o relatório em um formato específico, basta excluir a tag associada e os usuários não poderão exportar nesse tipo de arquivo. <script> A seguir, adicionaremos alguns estilos básicos aos elementos da página. Dentro da tag , abaixo das tags de script que acabamos de adicionar, adicione o seguinte código: <head> <style> body { margin: 0; } #viewer-host { width: 100%; height: 100vh; } </style> Isso removerá as margens do elemento body e também definirá a largura e a altura do elemento com o ID de . viewer-host Agora, dentro da tag , adicione o seguinte elemento: <body> <div id="viewer-host"></div> Demos a esse div o ID de ; isso significará que ele receberá os estilos CSS que definimos anteriormente, mas também nos permitirá vincular o JavaScript Report Viewer ao div. viewer-host Por fim, abaixo da div, adicione o seguinte código: <script> var viewer = new ActiveReports.Viewer("#viewer-host"); viewer.open("StudentProgressReport.rdlx-json"); </script> Este JavaScript criará um novo ActiveReportsJS Viewer, associando-o ao elemento com o ID . Em seguida, chamamos o método open do visualizador e passamos o nome do nosso relatório. viewer-host A última coisa que você precisa ter certeza é colocar o relatório na mesma pasta do arquivo index.html; caso contrário, certifique-se de apontar o local correto do seu relatório. A única coisa que resta é executar o aplicativo. Você pode usar qualquer para executar o aplicativo; como usamos o Visual Studio Code, usamos a extensão para ativar rapidamente um servidor web estático. Ao abrir o aplicativo em seu navegador, você verá o seguinte: servidor web estático Live Server Conclusão E isso é tudo! Como você pode ver, o ActiveReportsJS facilita a criação de relatórios de progresso personalizados, permitindo que professores e alunos acompanhem o progresso do aluno ao longo do ano letivo. Se desejar fazer download do relatório e do aplicativo criado neste artigo, você pode encontrar o repositório . aqui Boa codificação! Também publicado aqui.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Este áudio é produzido no idioma original da história!

Construindo relatórios de progresso dos alunos em JavaScript

Muito longo; Para ler

@grapecity

Credibility

HISTÓRIAS RELACIONADAS