Log in / Register

Forum › How do I...?

How do I get a different page layout depending on dynamic data

amyd
I have my Prince app working except for one condition: if there the use chooses a condition where the service call to the database returns with more equipment than can fit on one page (the page with the id of "equipment").

I tried to implement this with named pages but could not get it to work. It requires a different layout on the spill over 2nd page. What do I use to implement this? I'll put my pertinent info below.

This is what the first page of #equipment should look like:

<html>

<style>

div.page {
page-break-before: always; }

.equipList {
display: flex; }

.label {
font-size: 24px;
width: 200px;
font-weight: 700;
text-decoration: underline;
padding-bottom: 24px; }

.equipList {
display: flex; }

.LeftColumn {
width: 200px; }

div.equipment {
page: equipment; }



</style>
<head>
<body>

<div id="cover" class="page cover">Cover layout</div>
<div id="toc" class="page toc">TOC layout</div>
<div id="confidentiality" class="page confidentiality">Statement of Confidentiality layout</div>

<div id="equipment" class="page equipment">
<section class="equipList">
<div class="label">Equipment</div>
<div class="LeftColumn">
<div class="pb-12 gray hide">Name</div>
<div class="pb-12 gray hide">Reporting Period</div>
<div class="pb-12 gray hide">Published By</div>
<div class="pb-12 gray hide">Manager</div>
<div class="pb-12 gray hide">Report Date</div>
<div class="gray">Equipment</div>
</div>

<div class="RightColumn">
<div class="pb-12 gray">Stan Fields</div>
<div class="pb-12 gray">March, 1 2019 to March 31, 2019</div>
<div class="pb-12 gray">Stan Fields</div>
<div class="pb-12 gray">Jane Dawson</div>
<div class="pb-12 gray">April 24, 2019</div>
<div class="gray">
<div>Dell PC </div>
<div>Monitor </div>
<div>Mouse</div>
<div>Apple Macbook Pro </div>
<div>Keyboard</div>
<div>etc </div>
<div>etc</div>
<div>etc</div>
<div>this list is from the database, not sure how long</div>
</div>
</div>

</section>


</div>

<div id="charts" class="page charts ">Chart layout</div>
<div id="backcover" class="page backcover">Cover layout</div>
</body>
</head>
</html>

If there is more equipment than can fit on one page, the second (and all other subsequent pages) should look like this (less html than the first page):

<section class="equipList">
<div class="label">Equipment</div>
<div class="LeftColumn">

<div class="gray">Equipment Continued</div>
</div>

<div class="RightColumn">
<div class="gray">
<div>More equipment</div>
<div>From Database </div>
<div>etc</div>
<div>etc </div>
<div>etc</div>
<div>etc </div>
<div>etc</div>
<div>etc</div>
<div>this list is from the database, not sure how long</div>
</div>
</div>

</section>




mikeday
Unfortunately at the moment CSS has no way to customise layout on the second page of a document.

You could put the content in a table with multiple table captions, the second of which is only displayed on following pages using the prince-caption-page property, otherwise it will be necessary to use JavaScript to detect the location of the page break and then rerun Prince with different style.