-
Notifications
You must be signed in to change notification settings - Fork 3
/
tableimages.html
330 lines (295 loc) · 12.4 KB
/
tableimages.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MapFish Print 3 Documentation - Configuration of tables with HTML images</title>
<link rel="stylesheet" href="css/sphinx_rtd_theme.css" type="text/css" />
<link rel="stylesheet" href="css/readthedocs-doc-embed.css" type="text/css" />
<link rel="stylesheet" href="css/custom.css" type="text/css" />
</head>
<body class="wy-body-for-nav" role="document">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search">
<a href="index.html" class="icon icon-home"> MapFish Print 3</a>
</div>
<div
class="wy-menu wy-menu-vertical"
data-spy="affix"
role="navigation"
aria-label="main navigation"
>
<ul class="current">
<li class="toctree-l1 ">
<a class="reference internal " href="index.html">Introduction</a>
</li>
<li class="toctree-l1 ">
<a class="reference internal " href="jasperreports.html"
>JasperReports</a
>
</li>
<li class="toctree-l1 ">
<a class="reference internal " href="api.html">Web API</a>
</li>
<li class="toctree-l1 ">
<a class="reference internal " href="attributes.html">Attributes</a>
</li>
<li class="toctree-l1 ">
<a class="reference internal " href="configuration.html"
>Configuration</a
>
</li>
<li class="toctree-l1 ">
<a class="reference internal " href="layers.html">Map Layers</a>
</li>
<li class="toctree-l1 ">
<a class="reference internal " href="processors.html">Processors</a>
</li>
<li class="toctree-l1 ">
<a class="reference internal " href="fileloaders.html">File-Loaders</a>
</li>
<li class="toctree-l1 ">
<a class="reference internal " href="outputformats.html"
>Output Formats</a
>
</li>
<li class="toctree-l1 ">
<a class="reference internal " href="styles.html">Styles</a>
</li>
<li class="toctree-l1 current">
<a class="reference internal current" href="tableimages.html"
>Images in tables</a
>
</li>
<li class="toctree-l1 ">
<a class="reference internal " href="download.html">Download</a>
</li>
<li class="toctree-l1 ">
<a class="reference internal " href="docker.html">Docker</a>
</li>
<li class="toctree-l1 ">
<a class="reference internal " href="scaling.html">Horizontal scaling</a>
</li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
<nav class="wy-nav-top" role="navigation" aria-label="top navigation">
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="index.html">MapFish Print 3</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="breadcrumbs navigation">
<ul class="wy-breadcrumbs">
<li><a href="index.html">Docs</a> »</li>
<li>Configuration of tables with HTML images</li>
<li class="wy-breadcrumbs-aside">
<a href="https://github.com/mapfish/mapfish-print" class="fa fa-github">
mapfish/mapfish-print</a
>
</li>
</ul>
<hr />
</div>
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
<div itemprop="articleBody">
<h1>Configuration of tables with HTML images</h1>
<div class="section"><p>
This section explains how to add one or multiple images to a table subreport.<br />
In a first step a table needs to be configured. For this, the processor
<a href="processors.html#!prepareTable">!prepareTable</a> is used. The column containing the image needs to
be defined which is done using:
</p>
<div class="highlight">
<pre>
...
icon: !urlImage
urlExtractor: (.*) # Use regular expression (regex) to retrieve the URL of the image in the text of the icon column.
urlGroup: 1
...
</pre
>
</div>
<p>
The source column may contain more text than just the URL of the image. For this reason a regex expression,
passed to <a href="configuration.html#!urlImage">urlExtractor</a>, is used to filter out the URL.
</p>
<p>
The following example shows a configuration of a table where the column with the title "icon" contains the
URL to the image. For GeoMapFish applications the column name depends on the title that is used in the
interface and therefore can be the translation of the underlying database column name (if a database is
used).<br />
In the example below all columns from the original table are included in the printed table without
formatting.
</p>
<div class="highlight">
<pre>
...
- !prepareTable
dynamic: true
columns:
icon: !urlImage # This interprets the text contained in the column icon as an image URL.
urlExtractor: (.*) # Use Regex expression to retrieve the URL of the image in the text of the icon column.
urlGroup: 1
...
</pre
>
</div>
<p>To add formatting styles to the printed table there are two possibilities:</p>
<ol>
<li>
To add a subreport in form of a JasperReport template containing all of the columns that are to be
included in the printed report. This requires the dynamic flag in the processor !prepareTable to be false.
</li>
<li>
Use the styling from a subreport template but generate the columns dynamically. In this case the
JasperReports template (table_a4_portrait.jrxml) must contain one element. An example for this type of
configuration is given below.
</li>
</ol>
<div class="highlight">
<pre>
...
- !prepareTable
excludeColumns:
- not_shown_in_print # Columns that will not be shown in the printed table
maxColumns: 8
dynamic: true
jasperTemplate: table_a4_portrait.jrxml # - If dynamic is true this template will be used to obtain the column styles and the size of the subreport.
firstDetailStyle: column_style_1 # - optional
detailStyle: column_style_2 # - required when dynamic = true
lastDetailStyle: column_style_3 # - optional
firstHeaderStyle: header_style_1 # - optional
headerStyle: header_style_2 # - required when dynamic = true
lastHeaderStyle: header_style_3 # - optional
columns:
icon: !urlImage # This interprets the text contained in the column icon as an image URL.
urlExtractor: (.*) # Use Regex expression to retrieve the URL of the image in the text of the icon column.
urlGroup: 1
...
</pre
>
</div>
<p>
For the case that multiple columns with different titles contain images each column has to be configured in
the config.yaml. Below is an example where two columns <code>Icon</code> and <code>Image</code> contain
images. The columns can be in the same table and/or they can be in different tables. This means if two
columns <code>Icon</code> and <code>Image</code> are configured to contain images (as in the example below),
it is possible to have two tables, one table with the column <code>Icon</code> and the other table with the
columns <code>Icon</code> and <code>Image</code>. In the print all tree columns contain images in the
print.<br />
</p>
<p>
<code>config.yaml</code>
</p>
<div class="highlight">
<pre>
...
- !prepareTable
excludeColumns:
- not_shown_in_prinit # Columns that will not be shown in the printed table
maxColumns: 10
dynamic: true
jasperTemplate: table_a4_portrait.jrxml
detailStyle: column_style_2
headerStyle: header_style_2
columns:
Icon: !urlImage # Declare the column icon to contain an image
urlExtractor: (.*)
urlGroup: 1
Image: !urlImage # Declare the column image to contain an image
urlExtractor: (.*)
urlGroup: 1
...
</pre
>
</div>
<p>
<code>table_a4_portrait.jrxml</code>
</p>
<div class="highlight">
<pre>
...
<detail>
<band height="20">
<property name="com.jaspersoft.studio.layout" value="com.jaspersoft.studio.editor.layout.HorizontalRowLayout"/>
<textField textAdjust="StretchHeight" isBlankWhenNull="true">
<reportElement key="style2" style="column_style_2" positionType="Float" stretchType="RelativeToTallestObject" x="0" y="0" width="185" height="20" isPrintWhenDetailOverflows="true" uuid="1e0ee0ef-22a5-43d5-b8d2-a731fc573055"/>
</textField>
</band>
</detail>
...
</pre
>
</div>
<p>The resulting output of the above configuration is shown in the figure below.</p>
<img src="./images/image_table.png" width="800" />
</div>
</div>
</div>
<footer>
<hr />
<div role="contentinfo">
<p>
<a href="https://www.camptocamp.com/geospatial_solutions" target="_blank" rel="noopener"
>Camptocamp</a
>
<br />
<span class="commit">
Revision
<code
><a
href="https://github.com/mapfish/mapfish-print/commit/3c6dc305e5e593a88922a56b34b35e82445261e1"
target="_blank"
>3c6dc305</a
></code
>.
</span>
</p>
</div>
Theme based on a
<a href="https://github.com/readthedocs/sphinx_rtd_theme">template</a>
provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
</div>
</div>
</section>
</div>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.5.2/jquery-migrate.min.js"
integrity="sha512-BzvgYEoHXuphX+g7B/laemJGYFdrq4fTKEo+B3PurSxstMZtwu28FHkPKXu6dSBCzbUWqz/rMv755nUwhjQypw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.7/underscore-min.js"
integrity="sha512-dvWGkLATSdw5qWb2qozZBRKJ80Omy2YN/aF3wTUVC5+D1eqbA+TjWpPpoj8vorK5xGLMa2ZqIeWCpDZP/+pQGQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
type="text/javascript"
src="js/theme.js"
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script type="text/javascript">
jQuery(function () {
SphinxRtdTheme.StickyNav.enable();
});
</script>
</body>
</html>