Как реализовать динамическую привязку данных с помощью ActiveReportsJS

ActiveReportsJS — это решение для составления отчетов на 100 % на стороне клиента без каких-либо зависимостей на стороне сервера. В общем случае серверная сторона предоставляет API, возвращающий данные в формате JSON, а ActiveReportsJS визуализирует эти данные, используя богатый набор элементов отчета. API может использовать различные архитектурные стили — REST, OData, GraphQL и многие другие — но ActiveReportsJS не зависит от конкретной архитектуры, потому что он просто отправляет HTTP-запрос в API, получает ответ в формате JSON и анализирует его.

Однако запросы API редко бывают статичными, а скорее динамичными. Они могут потребовать включения учетных данных или предоставления параметров.

Предпосылки

Документация Привязка данных предоставляет базовый обзор того, как ActiveReportsJS предлагает подключаться к данным. В следующем содержании широко используются концепции, описанные там, поэтому было бы лучше, если бы вы прочитали его.

Кроме того, использование Параметры отчета имеет решающее значение для динамической привязки данных. Было бы полезно узнать это, прежде чем читать дальше.

Авторизация

Допустим, ваше приложение требует, чтобы пользователи входили в систему, предоставляя свои учетные данные. Если аутентификация прошла успешно, сервер возвращает токен доступа, который следует включать в каждый запрос данных, используя Аутентификацию носителя и Авторизационный HTTP-заголовок. Следующие шаги описывают базовую технику передачи маркера доступа текущего пользователя приложения вместе с запросом данных отчета.

1. Добавьте параметр отчета. Установите для его Тип данных значение String, для Имени значение AccessToken (или вы можете использовать любое другое допустимое имя), и включите флаг Скрытый.

2. Добавьте в отчет удаленный источник данных и задайте для его EndPoint корневой URL-адрес API.

3. В диалоговом окне DataSource добавьте новый заголовок HTTP. Задайте для его Имя значение Авторизация, а для Значения значение Bearer {@AccessToken}. Это выражение обращается к значению параметра по его имени.

4. Предположим, ваше приложение использует компонент Просмотр отчетов для отображения вывода отчета. В этом случае вы можете использовать метод Установка значений параметров, чтобы передать токен доступа текущего пользователя в качестве значения параметра отчета AccessToken, например:

// this is a pseudo-code that retrieves the access token of a current logged in user
// the specific way to do it depends on the architecture of your application.
const accessToken = authService.getAccessToken();
// pass the obtained accessToken as the report's parameter value
viewer.open("roducts.rdlx-json", {
        ReportParams: [
            {
                Name: "AccessToken",
                Value: [accessToken],
            },
        ],
    });

5. Если ваше приложение экспортирует отчет через вызов API, то код может передавать значение параметра, как показано ниже:

async function exportReport(reportUrl) {
  // this is a pseudo-code that retrieves the access token of a current logged in user
  // the specific way to do it depends on the architecture of your application.
  const accessToken = authService.getAccessToken();
  
  var reportDef = await fetch(reportUrl).then((response) =>
    response.json()
  );
  const report = new GC.ActiveReports.Core.PageReport();
  await report.load(reportDef);
  report.parameters["AccessToken"].values = [accessToken];
  const doc = await report.run();
  const result = await GC.ActiveReports.PdfExport.exportDocument(doc, {});
  result.download("access-token.pdf");        
}

Параметры пути

Параметры пути отображаются в пути к конечной точке API. Например, конечная точка https://demodata.grapecity.com/northwind/api/v1/Categories/{id}/Productsимеет {id} параметр пути, указывающий, для какой категории должен быть получен список продуктов. Допустим, ваше приложение должно позволять пользователям выбирать категорию этого товара с помощью встроенной панели параметров компонента Report Viewer. Следующие шаги описывают базовую технику для достижения этого на основе Northwind Restful API.

1. Добавьте в отчет источник данных со следующей конфигурацией.

2. Добавьте набор данных « Categories», который извлекает список всех категорий.

3. Добавьте параметр «CategoryID» со следующей конфигурацией.

4. Добавьте набор данных «Продукты», в котором используется параметр, добавленный на шаге 3 для параметра пути. Когда вы нажимаете кнопку «Подтвердить», в диалоговом окне набора данных запрашивается значение параметра для получения списка полей. Вы можете ввести 1.

5. Добавьте область данных, например Таблица, для визуализации набора данных о продукте.

6. Когда компонент Report Viewer открывает отчет, он попросит пользователя выбрать категорию и отобразить ее продукты.

Параметры строки запроса

Параметры строки запроса появляются после ? символ в URL-адресе запроса данных. Например, OData API обычно предоставляет возможность сортировать, фильтровать, расширять, нарезать и выбирать определенные поля с помощью параметров системного запроса. Допустим, ваше приложение использует Northwind OData API для отображения списка продуктов из категории, которую пользователи должны выбирать с помощью встроенной панели параметров компонента Report Viewer. Ниже приведен основной учебник о том, как этого добиться.

1. Добавьте в отчет источник данных со следующей конфигурацией.

2. Добавьте набор данных « Categories», который извлекает список всех категорий.

3. Добавьте параметр «CategoryID» со следующей конфигурацией.

4. Добавьте набор данных Продукты, в котором используется параметр, добавленный на шаге 3, чтобы установить значение для параметра запроса $filter. Когда вы нажимаете кнопку Подтвердить, в диалоговом окне набора данных запрашивается значение параметра для получения списка полей. Вы можете ввести 1.

5. Добавьте область данных, например Таблица, для визуализации набора данных о продукте.

6. Когда компонент Report Viewer открывает отчет, он попросит пользователя выбрать категорию и отобразить ее продукты.

Аргументы запроса GraphQL

В GraphQL API аргументы запроса обычно передаются в теле запроса POST. Допустим, ваше приложение использует Northwind GraphQL API для отображения списка товаров из категории, которую пользователи должны выбирать с помощью встроенной панели параметров компонента Report Viewer. Ниже приводится базовое руководство о том, как этого добиться:

1. Добавьте в отчет источник данных со следующей конфигурацией. Обратите внимание, что HTTP-заголовок Content-Type — это application/json, который требуется для запросов GraphQL.

2. Добавьте набор данных « Categories», который извлекает список всех категорий. Обратите внимание, что это метод «POST», а тело запроса использует формат JSON для запроса.

3. Добавьте параметр «CategoryID» со следующей конфигурацией.

4. Добавьте набор данных «Продукты», в котором используется параметр, добавленный на шаге 3, для передачи параметра «id» в запрос, чтобы он возвращал только определенную категорию. Когда вы нажимаете кнопку «Подтвердить», в диалоговом окне набора данных запрашивается значение параметра для получения списка полей. Вы можете ввести 1.

5. Перетащите набор данных «Продукты» в тело отчета.

6. Когда компонент Report Viewer открывает отчет, он попросит пользователя выбрать категорию и отобразить ее продукты.

Первоначально опубликовано на https://www.grapecity.com 1 августа 2022 г.