Skip to content

Commit e916163

Browse files
author
epolevikov
committed
Upd
1 parent ed299c0 commit e916163

21 files changed

+246
-7
lines changed

‎interface-elements-for-desktop/articles/report-designer/report-designer-for-winforms/create-reports/reports-with-embedded-pdf-content.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
title: Reports with PDF Content
3-
author: Sergey Andreev
2+
title: Reports with Embedded PDF Content
3+
author: Eugene Polevikov
44
---
55

66
# Reports with Embedded PDF Content

‎interface-elements-for-web/articles/report-designer/create-reports.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ You can add interactive elements to your report to customize it in Print Preview
6868
### [Reports with Cross-Band Content and Populated Empty Space](create-reports/reports-with-cross-band-content-and-populated-empty-space.md)
6969
![](../../images/cross-band-and-populated-empty-space-report-preview.png)
7070

71-
### [Reports with PDF content](create-reports/reports-with-pdf-content.md)
71+
### [Reports with PDF content](create-reports/reports-merged-with-pdf.md)
7272
![](../../images/report-with-pdf-content-preview.png)
7373

7474
### [Reports with a Visual PDF Signature](create-reports/reports-with-visual-pdf-signature.md)

interface-elements-for-web/articles/report-designer/create-reports/reports-with-pdf-content.md renamed to interface-elements-for-web/articles/report-designer/create-reports/reports-merged-with-pdf.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: Reports with PDF Content
2+
title: Reports Merged with PDF
33
author: Sergey Andreev
44
---
5-
# Reports with PDF Content
5+
# Reports Merged with PDF
66

77
This tutorial describes how to add PDF content to a report.
88

‎interface-elements-for-web/articles/report-designer/create-reports/reports-with-embedded-pdf-content.md‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
---
2+
title: Reports with Embedded PDF Content
3+
author: Eugene Polevikov
4+
---
5+
6+
# Reports with Embedded PDF Content
7+
8+
This tutorial explains how to use the [PDF Content](../use-report-elements/use-basic-report-controls/pdf-content.md) control to do the following:
9+
10+
* Append PDF file pages to a report and make their paper kind the same as in the inital report.
11+
* Add sequential page numbers to the report and PDF file pages.
12+
* Include additional information in the embedded PDF file pages.
13+
14+
The image below shows an invoice report that contains information about order items.
15+
16+
![Final Report Page 1](../../../images/eurd-web-create-report-with-pdf-content-final-report-page1.png)
17+
18+
The following image illustrates the first PDF file page embedded to the invoice report. This page has the same paper kind as the initial report. [Report controls](../use-report-elements/use-basic-report-controls.md) are used to add item title, item price, line, logo image, and sequential page numbers to this page.
19+
20+
![Final Report Page 2](../../../images/eurd-web-create-report-with-pdf-content-final-report-page2.png)
21+
22+
To create the above report with PDF content, follow the steps described in these sections:
23+
24+
* [Create the Main Report](#create-the-main-report)
25+
* [Create a Report with PDF Content](#create-a-report-with-pdf-content)
26+
* [Add the Report with PDF content to the Main Report](#add-the-report-with-pdf-content-to-the-main-report)
27+
28+
## Create the Main Report
29+
30+
1. Open the [Report Designer](../first-look-at-the-report-designer.md) and [add a new blank report](../add-new-reports.md).
31+
2. Design the report layout. In this tutorial, we create an invoice report that contains information about order items.
32+
33+
![Main Report Layout](../../../images/eurd-web-pdfcontent-embedded-mode-main-report-layout.png)
34+
35+
To supply the report with data, use the following JSON string:
36+
37+
```
38+
{
39+
"InvoiceNumber": 241756,
40+
"OrderDate": "2018-04-23T18:25:43.511Z",
41+
"Customer": {
42+
"Name": "Walters",
43+
"HomeOffice_Line": "200 Wilmot Rd",
44+
"HomeOffice_City": "Deerfield",
45+
"HomeOffice_StateName": "IL",
46+
"HomeOffice_ZipCode": "60015"
47+
},
48+
"Store": {
49+
"Address_City": "Anaheim",
50+
"Address_Line": "1720 W La Palma Ave",
51+
"Address_StateName": "CA",
52+
"Address_ZipCode": "83709"
53+
},
54+
"Employee": {
55+
"FullName": "Harv Mudd"
56+
},
57+
"PONumber": "122023",
58+
"ShipMethod": 0,
59+
"OrderTerms": "15 Days",
60+
"OrderItems": [
61+
{
62+
"ProductName": "SuperLED 42",
63+
"ProductPrice": 1050,
64+
"ProductUnits": 2,
65+
"Discount": 50,
66+
"Total": 2050
67+
},
68+
{
69+
"ProductName": "SuperLED 50",
70+
"ProductPrice": 1100,
71+
"ProductUnits": 5,
72+
"Discount": 500,
73+
"Total": 5000
74+
},
75+
{
76+
"ProductName": "Projector PlusHD",
77+
"ProductPrice": 600,
78+
"ProductUnits": 5,
79+
"Discount": 250,
80+
"Total": 2750
81+
},
82+
{
83+
"ProductName": "HD Video Player",
84+
"ProductPrice": 220,
85+
"ProductUnits": 10,
86+
"Discount": 200,
87+
"Total": 2000
88+
}
89+
],
90+
"ShippingAmount": 375,
91+
"TotalAmount": 12175
92+
}
93+
```
94+
95+
The following image illustrates the main report's **Preview**:
96+
97+
![Main Report Preview](../../../images/eurd-web-pdfcontent-embedded-mode-main-report-preview.png)
98+
99+
## Create a Report with PDF Content
100+
101+
1. Create a new blank report. Remove the report's margins.
102+
103+
![Add a New Blank Report and Remove Margins](../../../images/eurd-web-create-report-with-pdf-content-add-new-blank-report-and-remove-margins.png)
104+
105+
2. Drop the [PDF Content](../use-report-elements/use-basic-report-controls/pdf-content.md) control from the **Toolbox** onto the *Detail* band.
106+
107+
![Drop the PDF Content Control Onto the Detail Band](../../../images/eurd-web-create-report-with-pdf-content-drop-xrpdfcontent-control-onto-detail-band.png)
108+
109+
3. Select the control, navigate to the [Properties panel](..\report-designer-tools\ui-panels\properties-panel.md), click **Source** or **Source URL** property's ellipsis button, and select PDF file. In this demo, we use the following PDF specification: [Specification.pdf](https://github.com/DevExpress-Examples/DataSources/blob/master/Specification.pdf).
110+
111+
![Specify PDF File Source](../../../images/eurd-web-create-report-with-pdf-content-specify-pdf-file-source.png)
112+
113+
4. Disable the control's **Generate Own Pages** property. Adjust the control size to make PDF content fit the entire *Detail* band. For this, set the *Detail* band's **Height** to *1095* and the control's **Width** and **Height** to *849* and *1095*.
114+
115+
![Make PDF Content Fit the Entire Detail Band](../../../images/eurd-web-create-report-with-pdf-content-make-pdf-content-fit-entire-detail-band.png)
116+
117+
5. [Bind](..\bind-to-data\bind-a-report-to-json-data.md) the report to the JSON data below and set the report's **Data Member** property to *OrderItems*.
118+
119+
```
120+
{
121+
"InvoiceNumber": 241756,
122+
"OrderDate": "2018-04-23T18:25:43.511Z",
123+
"Customer": {
124+
"Name": "Walters",
125+
"HomeOffice_Line": "200 Wilmot Rd",
126+
"HomeOffice_City": "Deerfield",
127+
"HomeOffice_StateName": "IL",
128+
"HomeOffice_ZipCode": "60015"
129+
},
130+
"Store": {
131+
"Address_City": "Anaheim",
132+
"Address_Line": "1720 W La Palma Ave",
133+
"Address_StateName": "CA",
134+
"Address_ZipCode": "83709"
135+
},
136+
"Employee": {
137+
"FullName": "Harv Mudd"
138+
},
139+
"PONumber": "122023",
140+
"ShipMethod": 0,
141+
"OrderTerms": "15 Days",
142+
"OrderItems": [
143+
{
144+
"ProductName": "SuperLED 42",
145+
"ProductPrice": 1050,
146+
"ProductUnits": 2,
147+
"Discount": 50,
148+
"Total": 2050
149+
},
150+
{
151+
"ProductName": "SuperLED 50",
152+
"ProductPrice": 1100,
153+
"ProductUnits": 5,
154+
"Discount": 500,
155+
"Total": 5000
156+
},
157+
{
158+
"ProductName": "Projector PlusHD",
159+
"ProductPrice": 600,
160+
"ProductUnits": 5,
161+
"Discount": 250,
162+
"Total": 2750
163+
},
164+
{
165+
"ProductName": "HD Video Player",
166+
"ProductPrice": 220,
167+
"ProductUnits": 10,
168+
"Discount": 200,
169+
"Total": 2000
170+
}
171+
],
172+
"ShippingAmount": 375,
173+
"TotalAmount": 12175
174+
}
175+
```
176+
177+
6. Place two [labels](../use-report-elements/use-basic-report-controls/label.md), a [line](../use-report-elements/draw-lines-and-shapes/draw-lines.md), and a [picture box](..\use-report-elements\use-basic-report-controls\picture-box.md) on the PDF page header as shown below:
178+
179+
![Add Controls to Page Header](../../../images/eurd-web-create-report-with-pdf-content-make-pdf-content-add-controls-to-page-header.png)
180+
181+
Use the following locations and sizes:
182+
183+
| Control Name | Location | Size |
184+
| --- | --- | --- |
185+
| label1 | 105, 94 | 280, 44 |
186+
| label2 | 105, 138 | 118, 30 |
187+
| line1 | 105, 69 | 687, 20 |
188+
| pictureBox1 | 647, 24 | 145, 45 |
189+
190+
7. Set the line's **Width** and **Fore Color** to *2* and orange (*rgb(255,165,0)*) respectively. Assign the following image to the picture box's **Image Source** property:
191+
192+
![DevAV Icon](../../../images/devav.png)
193+
194+
Set the image's **Sizing** property to *Stretch Image*.
195+
196+
Make the label1's font bold. Set up label appearance as shown in the table below:
197+
198+
| Control Name | Font | Font Size | Text Property's Expression | Text Format String |
199+
| --- | --- | --- | --- | --- |
200+
| label1 | Segoe UI | 21 | *ProductName* | - |
201+
| label2 | Segoe UI | 12 | *ProductPrice* | {0:$0} |
202+
203+
![Bind Labels to Data](../../../images/eurd-web-create-report-with-pdf-content-make-pdf-content-bind-labels-to-data.png)
204+
205+
To display a product name and price of each order item on a corresponding PDF file page, set the PDF Content **Page Range** property's [expression](../use-expressions.md) to *[DataSource.CurrentRowIndex] + 1*.
206+
207+
8. Add the [Page Info](..\use-report-elements\use-basic-report-controls\page-info.md) control to the PDF page footer. Use the following settings for this control:
208+
209+
| Location | Size | Font | Font Size | Text Alignment | Text Format String |
210+
| --- | --- | --- | --- | --- | --- |
211+
| 0, 1045 | 849, 50 | Segoe UI | 12 | Middle Center | Page {0} of {1} |
212+
213+
![Add Page Numbers](../../../images/eurd-web-create-report-with-pdf-content-add-page-numbers.png)
214+
215+
Open **Preview** to show the result. The image below shows the report's first page:
216+
217+
![Final Report Preview](../../../images/eurd-web-create-report-with-pdf-content-preview.png)
218+
219+
## Add the Report with PDF Content to the Main Report
220+
221+
1. Add a footer to the main report.
222+
223+
![Add Report Footer](../../../images/eurd-web-create-report-with-pdf-content-add-report-footer.png)
224+
225+
2. Add the [Subreport](..\use-report-elements\use-basic-report-controls\subreport.md) control to the footer. Assign the report with PDF content to the control's **Report Source URL** property. Enable the control's **Generate Own Pages** property.
226+
227+
![Add the Subreport](../../../images/eurd-web-create-report-with-pdf-content-add-subreport.png)
228+
229+
3. Add the [Page Info](..\use-report-elements\use-basic-report-controls\page-info.md) control to the report's **Bottom Margin** band. Set the control's **Text Alignment** propery to *Middle Center* and the **Text Format String** property to *Page {0} of {1}*.
230+
231+
![Add Page Numbers to Main Report](../../../images/eurd-web-create-report-with-pdf-content-add-page-number-to-main-report.png)
232+
233+
Open **Preview** to show the result.
234+
235+
![Final Report Page 1](../../../images/eurd-web-create-report-with-pdf-content-final-report-page1.png)
236+
237+
![Final Report Page 2](../../../images/eurd-web-create-report-with-pdf-content-final-report-page2.png)

‎interface-elements-for-web/images/devav.png‎

6.74 KB
Loading

‎interface-elements-for-web/images/eurd-web-create-report-with-pdf-content-add-new-blank-report-and-remove-margins.png‎

8.34 KB
Loading

‎interface-elements-for-web/images/eurd-web-create-report-with-pdf-content-add-page-number-to-main-report.png‎

47 KB
Loading

‎interface-elements-for-web/images/eurd-web-create-report-with-pdf-content-add-page-numbers.png‎

66.7 KB
Loading

‎interface-elements-for-web/images/eurd-web-create-report-with-pdf-content-add-report-footer.png‎

14.6 KB
Loading

‎interface-elements-for-web/images/eurd-web-create-report-with-pdf-content-add-subreport.png‎

13.4 KB
Loading

0 commit comments

Comments
 (0)