Obrazy w raportach Telerik

Przeczytasz w 11 min.

Spis treści

1. Wstęp
2. Dokument biznesowy
3. Źródła danych
4. Prezentacja zdjęć w tabeli
5. Prezentacja zdjęć w tabeli przestawnej
6. Prezentacja zdjęć w liście

Wstęp

Do dokumentów biznesowych nAxiom można dodawać obrazy jako załączniki. Takie obrazy można następnie osadzać w raportach Telerik przy użyciu kontrolki PictureBox, dla której zostanie podana ścieżka do zdjęcia. Element PictureBox obsługuje wyświetlanie obrazów w formatach interfejsu GDI (BMP, GIF, JPEG, EXIF, PNG i TIFF), w formacie SVG oraz obrazów w kodowaniu Base64. Źródłem wartości elementu PictureBox może być wyrażenie zawierające:

• binarne dane obrazu,
• identyfikator URI (ścieżkę lokalną lub adres URL),
• ciąg znaków reprezentujący obraz w kodowaniu Base64 lub w formacie SVG. Więcej szczegółów zawiera dokumentacja modułu projektowania raportów (https://docs.telerik.com/reporting/report-items/picturebox).

W artykule opisano trzy sposoby skonfigurowania raportu, w którym będą wyświetlane obrazy załączone do dokumentu:

• w liście osadzonej w komórce tabeli,
• w komórce tabeli przestawnej,
• w komórce listy osadzonej w sekcji szczegółów raportu.

Dokument biznesowy

Do budowy raportów potrzebna jest definicja dokumentu biznesowego oraz zapisane instancje tego dokumentu z obrazami dodanymi jaki załączniki. W prezentowanym przykładzie dokument biznesowy zawiera dane dotyczące uszkodzonych pojazdów, w tym zdjęcia uszkodzeń. Dane pochodzą z popularnego serwisu motoryzacyjnego.

Źródła danych

Zdjęcia dołączane do instancji dokumentów biznesowych są przechowywane w folderze repozytorium załączników. Domyślna ścieżka do folderu załączników to folder_instalacyjny_witryny/Resources/Attachments. Informacje plikach załączników są przechowywane w systemowej tabeli bazy danych [core].[Attachments]. Do raportu potrzebne będą dwa źródła danych zdefiniowane przez SQL:

• zwracające rekordy z tabeli dokumentu biznesowego:

  SELECT * FROM [dbo].[Uszkodzone]
  

• zwracające ścieżki do plików załączników

  WITH filteredattachments AS  
   (SELECT * FROM core.Attachments WHERE BusinessDocumentId = 19)
  SELECT 
  d.[Id] AS [Id] 
  , d.Marka AS [Marka]
  , CONCAT('C:\inetpub\wwwroot\n155_1913l\Resources\Attachments\',  
        ISNULL(FileNameLocal, 'no-image-icon-23500.jpg')) AS [AttachmentPath]
  FROM [dbo].[Uszkodzone] d
  LEFT JOIN filteredattachments AS att ON d.Id = att.RecordId 
  

Drugie zapytanie zwraca ścieżki do plików załącznika (lub do pliku zastępczego, jeśli nie dodano załącznika) dla wszystkich (LEFT JOIN) rekordów z tabeli dokumentu biznesowego. Należy zwrócić uwagę na konieczność użycia klauzuli WHERE w podzapytaniu WITH w celu zwrócenia tylko rekordów powiązanych z danym dokumentem biznesowym.

W celu zdefiniowania źródła danych w module Web Report Designer należy kliknąć przycisk SQL Data Source w sekcji DATA SOURCES na panelu Components. Zostanie uruchomiony kreator, który opisano we wcześniejszym artykule poświęconym raportom Telerik.

Prezentacja zdjęć w tabeli

W przypadku, kiedy każdy rekord raportu może mieć kilka przypisanych zdjęć, prezentacja raportu w układzie tabelarycznym wymaga użycia elementu lista w komórce tabeli, w której mają być prezentowane zdjęcia. Lista ma własne źródło danych, a powiązanie danych tabeli i listy następuje poprzez zdefiniowanie filtru.

1. Zdefiniuj nowy raport w nAxiom i przejdź do projektu raportu.
2. Zaznacz sekcję szczegółów w nowym raporcie i na panelu Componentsz lewej strony kliknij pozycję Table Wizard.
3. Na panelu z prawej strony wybierz źródło danych (w przykładzie Dokument biznesowy dla tabeli dbo.Uszkodzone).
4. Przeciągnij wybrane pola źródła danych do obszaru Detail Values; oprócz pól danych, które mają być wyświetlane w raporcie, przeciagnij jedno dodatkowe pole (dowolne).
5. Kliknij przycisk Create. Kreator utworzy tabelę w raporcie.

   

6. Zmień nagłówek w ostatniej kolumnie tabeli, a w komórce danych wklej listę. W tym celu zaznacz sekcję szczegółów i kliknij przycisk List na panelu Components. Następnie wytnij listę (Ctrl+x) i wklej ją w ostatniej komórce (Ctrl+v).
7. We właściwościach listy z prawej strony ustaw zdefiniowane wcześniej źródło danych, które zwróci ścieżki do zdjęć.
8. Ustaw filtr, dzięki któremu lista w każdym rekordzie tabeli będzie zwracała tylko ścieżki do załączników dla danej instancji dokumentu biznesowego.

   

9. Używając metody cut/paste jak wyżej, wstaw do panelu listy element PictureBox.
10. Przypisz we właściwościach elementu PictureBox pole źródła danych (DATA > Value > = Fields.AttachmentPath, gdzie AttachmentPath to pole źródła danych, które zwraca ścieżkę do zdjęcia).
11. Wyświetl podgląd raportu.

    

Prezentacja zdjęć w tabeli przestawnej

Zastosowanie tabeli przestawnej pozwala prezentować zdjęcia w układzie horyzontalnym, w sąsiednich polach rekordu. Wymaga to jednak zmiany definicji źródła danych zwracającego ścieżki do zdjęć. Konieczne jest dodanie numerów kolejnych załączników dla poszczególnych instancji dokumentu biznesowego. Te numery zostaną użyte jako nagłówki kolumn tabeli przestawnej. Zmodyfikowane zapytanie źródła danych wygląda następująco:

WITH filteredattachments AS
   (SELECT * FROM core.Attachments WHERE BusinessDocumentId = 19)
SELECT 
d.[Id] AS [Id]  
, d.Marka AS [Marka]  
, CONCAT('C:\inetpub\wwwroot\n155_1913l\Resources\Attachments\',  
        ISNULL(FileNameLocal, 'no-image-icon-23500.jpg')) AS [AttachmentPath]  
, CONCAT('Zdjęcie ',  
        ROW_NUMBER() OVER(PARTITION BY d.Id ORDER BY d.Id ASC)) AS [Pozycja]  
FROM [dbo].[Uszkodzone] d  
LEFT JOIN filteredattachments AS att ON d.Id = att.RecordId  

Zapytanie zwróci dodatkowo kolumnę Pozycja z wartościami Zdjęcie 1, Zdjęcie 2 itd. dla kolejnych ścieżek.

1. Zdefiniuj nowy raport w nAxiom i przejdź do projektu raportu.
2. Zaznacz sekcję szczegółów w nowym raporcie i na panelu Componentsz lewej strony kliknij pozycję Crosstab Wizard.
3. Na panelu z prawej strony wybierz źródło danych według definicji podanej powyżej.
4. Przeciągnij pole Pozycja do obszaru Column Groups, pole Marka do obszaru Row Groups i pole AttachmentPath do obszaru Detail Values.
5. Kliknij przycisk Create. Kreator utworzy tabelę w raporcie.
6. Używając metody cut/paste jak wyżej, wstaw w komórce wartości element PictureBox.

   

7. Przypisz we właściwościach elementu PictureBox pole źródła danych (DATA > Value > = Fields.AttachmentPath, gdzie AttachmentPath to pole źródła danych, które zwraca ścieżkę do zdjęcia).
8. Wyświetl podgląd raportu.

   

Prezentacja zdjęć w liście

Rekordy z tabeli dokumentu biznesowego nie muszą być prezentowane na raporcie w formie tabelarycznej. Jeśli główne źródło danych zostanie przypisane do raportu, można będzie w sekcji szczegółów dowolnie rozmieszczać pola danych. Ponieważ jednak do każdego rekordu może być załączonych kilka zdjęć, do ich prezentacji konieczne jest użycie elementu List, podobnie jak w pierwszym przykładzie.

1. Zdefiniuj nowy raport w nAxiom i przejdź do projektu raportu.
2. We właściwościach raportu na panelu z prawej strony wybierz źródło danych (w przykładzie Dokument biznesowy dla tabeli dbo.Uszkodzone).
3. Z panelu Components przeciągnij elementy TextBox do sekcji szczegółów raportu; każdemu elementowi przypisz odpowiednie pole źródła danych (DATA > Value > = Fields.NazwaPola).
4. Kliknij przycisk List na panelu Components; przesuń panel listy w odpowiednie miejsce na raporcie.
5. We właściwościach listy z prawej strony ustaw zdefiniowane wcześniej źródło danych, które zwróci ścieżki do zdjęć.
6. Ustaw filtr, dzięki któremu lista będzie zwracała tylko ścieżki do załączników dla danej instancji dokumentu biznesowego.

   

7. Używając metody cut/paste jak wyżej, wstaw do panelu listy element PictureBox.
8. Przypisz we właściwościach elementu PictureBox pole źródła danych (DATA > Value > = Fields.AttachmentPath, gdzie AttachmentPath to pole źródła danych, które zwraca ścieżkę do zdjęcia).
9. Wyświetl podgląd raportu.