Reporting Enhancements

1:
Can you tell me an easy way to have both a page footer and a report footer on my report? Page footer would be for legends on each page, as well as page numbers. Report footer would be for report totals.

I tried inserting a footer after the [/ _Each]. It shows on each page, but I can’t get the totals for each member type. I’ve changed the report query to ouput various totals on each row, and thought I could use those values in the footer, but they don’t seem to work.

I put this at the end of the report html:

Total Members: {{FooterValue rqMemberList 'TotalMembers'}} Total Current: {{rqMemberList.[TotalCurrent]}} Lifetime: {{rqMemberList.[TotalLifetime]}} Past Due: {{rqMemberList.[TotalPastDue]}}

The FooterValue function tries to get the value of a.particular field and return it, but I don’t think any records are yet current when the report is done.

function FooterValue(rows, fieldName) {
if (!rows || !rows.length) return ‘’;
return rows[0][fieldName] || ‘’;
}

2:
I requested some time ago the capability of alternate line shading on reports, such as white background, gray background… for every other row. this should be per page, so first line is always white background. Seems like a common requirement. I’ve accomplished this with a work-around, having a sequence number returned for each row of the query, then in the report applying background shading if the member number is even rather than odd.

This doesn’t work perfectly, as when there are odd number of records on a page, the next page line 1 is shaded.

Is this something that is being considered?

Thanks…

Hi Ron,

Thank you for bringing these questions:

1 - To confirm, have you set your footer to repeat across all pages?
1.1 - Add a footer as indicated in the image:

1.2 - Select the ‘Every page‘ in the Repeat drop-down:

Also, if the value is saved in the table before the report runs, you should not have any problem in retrieving and manipulating it via a function.

Please, see if this example report helps you:

Report code:

<style>
    .fontSize12{
        font-size:12px;
    }
    
    .tableRowDataData{
        color: #707070;
    }
    
    .mailTable tr:nth-child(2n+1) {
      background-color: lightgrey;
    }
     
</style>


<table class="fiveReportHeader-everyPage" style="width: 100%; height: 10mm;">
    <tbody>
        <tr>
            <td>This is a Header</td>
        </tr>
    </tbody>
</table>
<div>{{#_GroupBy @root.[Product].[Records] 'Category' as | Product |}}
        <div class="fiveReportHelper">{{#_Each Product}}</div>
        <div class="fiveGroupByHeader">
            <div><strong>Group By Header {{Category}}</strong></div>
        </div>
        <div class="fiveReportHelper">{{#_Each GroupedRecords}}</div>
        <div>
            <table class="mailTable" style="table-layout:fixed; border-collapse:collapse; width: 100%; margin-top: 5px;">
                <tbody>
                    <tr>
                        <td>Name</td>
                        <td>Price</td>
                    </tr>
                    <tr>
                        <td class="tableRowDataData">{{Name}}</td>
                        <td class="tableRowDataData">{{Price}}</td>
                    </tr>
                </tbody>
            </table>
            <div class="fiveReportHelper"><br></div>
        </div>
        <div class="fiveReportHelper">{{/_Each}}</div>
        <div class="fiveGroupByFooter">
            <div>
                <table style="font-size: 1rem; letter-spacing: 0.00938em; width: 100%; margin-top: 5px;">
                    <tbody>
                        <tr class="fiveReportHelper" contenteditable="false">
                            <td class="fiveReportHelper">Total of records for the {{Category}}: {{SumPrice Category @root.[Product].[Records]}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div><br>
                <div contenteditable="false" class="fiveReportBreakAfter" style="border: 1px dashed black; display: flex; justify-content: center; width: 100%;">&lt;--- Page Break ---&gt;</div>
                <div><br></div>
            </div>
        </div>
        <div class="fiveReportHelper">{{/_Each}}</div>

        <div class="fiveReportHelper"><br></div>


        <div class="fiveGroupByFinal">
            <div><span style="font-size: 1rem; letter-spacing: 0.00938em;">
    {{/_GroupBy}}</span></div>
</div>
</div>
<div><br></div>
<table class="fiveReportFooter-everyPage" style="width: 100%; height: 10mm;">
    <tbody>
        <tr>
            <td style="text-align: right;"><span style="font-size: 12px;"><em>Page&nbsp;&lt;five.pageNumber.current.arabic&gt; of&nbsp;&lt;five.pageNumber.total.arabic&gt;</em></span></td>
        </tr>
    </tbody>
</table>

Helper function code:
function SumPrice(category, data) {

const sum = data

    .filter(record => record.Category === category)

    .reduce((total, record) => total + Number(record.Price), 0);

return sum.toFixed(2);

}

2 - If my interpretation is correct, you don’t need to control it via a sequence number in the row; you can use pure CSS to achieve it.
Look at how I set teh classes: tableRowDataData and mailTable, how they are placed in the row.

If you are inside a loop, you define it only once, so it will change at run time:

Regards,
Elton S

I can’t get this to work at all now. the report just keeps trying to build more pages. should only be 5 pages, but I finally quit when it got to 50 pages.

I can’t even export an FDF now. the wheel just keeps on spinning, then I get a blank Five message box, then it logs me off.

I was finally able to log on and export an FDF file. It is up on OneDrive. There is one from today, and another one from either yesterday or the day before.

I just need a report that will shade every other line. I’ve been doing this using a sequence number that is generated from the query, then testing if the number is even or odd. if even, shade the line, if odd, don’t.

This is inherently flawed, because if there is an odd number of records on the page, the next page starts with the first record shaded instead of the second record.

I don’t know why this is so difficult to design a report. It looks like I didn’t do that correctly. when the five helper node shows up in the html (the for each helper), it is before the detail table starts, so now it looks like there is a series of 1-row tables, one for each record. That can’t be right, can it?

The instructions I find for creating a report do not adequately explain how to do this. I remember I had a LOT of issues trying to get my first report done, and needed a lot of help from you folks.

I’ve been designing reports for many years, both in Access and Crystal Reports, and it was never this hard to do that.

The report I need is a very simple report, just a Member list. No grouping. I’m not very confident that things are in the right place. This is so frustrating to need special hand-holding for designing a simple report.

Can you please take a look at this report and help me figure out what is going wrong?

Also, I’m still thinking that alternating line background colors on a report is a very basic requirement that most people need, and your report designer should have a switch to turn this feature on or off.

Hi Ron,

Have you had a chance to try the example I shared earlier? Please let me know if it worked for you or if you’re still encountering issues.

Our reporting tools are designed to give users greater flexibility to create more complex designs using HTML and CSS. We’re also aware that there are areas where improvements can be made, and we’re always open to reviewing enhancement suggestions such as the one you’ve raised.

I will take a look at your FDF to better understand the request. For future inquiries, could you please include a small code sample that demonstrates what you’re trying to achieve? This helps us review your question much more efficiently. Analysing full reports and custom implementations can be time-consuming, and detailed technical investigation is not included in your current support plan. We would be happy to provide as much assistance as you require, but we would need to start charging a fee to help you build your application.

Thank you for being so understanding, and I look forward to hearing whether the example worked for you.

Kind regards,
Elton S

Hi Ron,

I have removed extra comments that were causing the report to continue counting pages. I have already notified you about this behaviour.

Also, my previous solution was not fully implemented in your code, and further analysis, it would never work because the loop creates a new table for each row; therefore, the CSS provided could not alternate between the colours.

have a look at this version, hope this solution is close to what you are trying to achieve.

Regarding calculating the amount, in my previous example, I showed how to calculate it when a category has changed, you can use the functionality as a base.

This is part of the report result:

This is the code used

    <style>
    @page {
        size: letter landscape;
        margin-top: 8;
        margin-left: 10;
        margin-bottom: 8;
        margin-right: 10;
    }
        .page {
        color: #000000;
        background-color: #ffffff;
    }

    .mailTable:nth-of-type(odd) td {
    background-color: #f2f2f2;
    }
    
    .mailTable:nth-of-type(even) td {
    background-color: #e6e6e6;
    }
    
</style>

<div>
    <div class="fiveGroupByHeader">
        <div style="border: 1px dashed black; display: flex; justify-content: center; width: 100%;" contenteditable="false" class="fiveReportBreakAfter">&lt;--- Page Break ---&gt;</div>

        <!-- Blue header area -->
        <table style="width: 100%; background-color: rgb(207, 226, 243); border-collapse: collapse;">
            <tbody>
                <tr style=" height: 8mm;width: 100%;">
                    <td rowspan="3" style="width: 10%; vertical-align: top;">
                        <div style="margin: 5px 0 5px 5px; max-width: 70px; max-height: 70px; overflow: hidden;">
                            <div style="width: 100%; height: 100%;">
                                {{five.variable.logo}}
                            </div>
                        </div>
                    </td>
                    <td style="width: 69.5%; text-align: center; font-size: 16px;"><strong>Member List</strong></td>
                    <td style="width: 20%; text-align: right;"><span style="font-size: 12px;">{{five.variable.CurrentDate}}</span></td>
                    <td style="width: .5%;"><br></td>
                </tr>
                <tr style="height: 6mm;">
                    <td style="width: 65.6966%;"><br></td>
                </tr>

                <tr style="height: 6mm;">
                    <td style="width: 65.6966%;"><br></td>
                </tr>
            </tbody>
        </table>

        <!-- Member headings -->
        <table style="width: 100%; background-color: rgb(207, 226, 243); border-collapse: collapse;">
            <tbody>
                <tr style="height: 8mm; text-align: center; font-size: 10px; color: rgb(102, 102, 102);">
                    <td style="width: 14%; text-align: center; vertical-align: bottom;">Name</td>
                    <td style="width: 29%; vertical-align: bottom;"><span>Address</span></td>
                    <td style="width: 9%; text-align: center; vertical-align: bottom;">Primary Phone</td>
                    <td style="width: 9%; text-align: center; vertical-align: bottom;">Other Phone</td>
                    <td style="width: 2%;"><br></td>
                    <td style="width: 20%; vertical-align: bottom;">Email</td>
                    <td style="width: 2%; text-align: center; vertical-align: bottom;"><span style="font-size: 10px;">M F</span></td>
                    <td style="width: 7%; vertical-align: bottom;">Member Type</td>
                    <td style="width: 7.5%; text-align: right; vertical-align: bottom;">Pd To</td>
                    <td style="width: .5%;"><br></td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Member data -->
    <div>
        <div class="fiveReportHelper">{{#_Each @root.[rqMemberList].[Records] as | rqMemberList |}}</div>


        <table class="mailTable" style="width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;">

            <tbody>
                <tr style="font-size: 10px; color: {{SetRowColor ValidTo Lifetime DateAdded}};">
                    <td class="tableRowDataData" style="width: 14%;"><strong>{{SortName }}</strong></td>
                    <td class="tableRowDataData" style="width: 29%;">{{Address}}</td>
                    <td class="tableRowDataData" style="width: 9%; text-align: right;">{{FormatPhone PrimaryPhone}}<span style="color: blue;"> {{PrimaryPhoneType}}</span></td>
                    <td class="tableRowDataData" style="width: 9%; text-align: right;">{{FormatPhone SecondaryPhone}}<span style="color: blue;"> {{SecondaryPhoneType}}</span></td>
                    <td class="tableRowDataData" style="width: 2%;"><br></td>
                    <td class="tableRowDataData" style="width: 20%;">{{Email}}</td>

                    <td class="tableRowDataData" style="width: 2%; text-align: center;">{{Gender}}</td>
                    <td class="tableRowDataData" style="width: 7%;">{{MemberType}}</td>

                    <td class="tableRowDataData" style="width: 7.5%">
                        <div style="text-align: right;">
                            {{USDate ValidTo}}
                        </div>
                    </td>

                    <td class="tableRowDataData" style="width: .5%;"><br></td>

                </tr>
            </tbody>

        </table>
        <div class="fiveReportHelper">{{/_Each}}</div>
    </div>

    <!-- Page footer -->
    <table class="fiveReportFooter-everyPage" style="font-size: 10px; width: 100%; height: 6mm;">
        <tbody>
            <tr>
                <td style="color: black;">Total Members:</td>
                <td style="color: black;">{{FooterValue rqMemberList.[TotalMembers]}}</td>
                <td>Total Current:</td>
                <td>{{rqMemberList.[TotalCurrent]}}</td>
                <td style="color: green">Lifetime:</td>
                <td style="color: green">{{rqMemberList.[TotalLifetime]}}</td>
                <td>Past Due:</td>
                <td>{{rqMemberList.[TotalPastDue]}}</td>
            </tr>
        </tbody>
    </table>
</div>

<div><br></div>

Thank you,
Elton S

Hi Elton,

Thanks so much for clearing this up. I don’t recall you mentioning before that extra comments could cause an issue. Sorry. It seems like commented-out html should be ignored.

I’m confused by your comment about my code creating a new table with each record loop. It looks like your code also does that, because the Table element is enclosed within the {{#_Each… block. Can you briefly explain this?

There are 2 remaining issues with the report:

1:
With the footer present in the template, I get an extra blank page after each expected page, except for the last page. I’ve tried playing with the table height but that doesn’t help. Should the page margins be adjusted, or is there something else causing this?

It’s unclear whether the footer is inside the bottom margin area like Access does, or whether the bottom margin is below the footer area.

UPDATE: I removed the page break here:

    <div class="fiveGroupByHeader">
        <div style="border: 1px dashed black; display: flex; justify-content: center; width: 100%;" contenteditable="false" class="fiveReportBreakAfter">&lt;--- Page Break ---&gt;</div>

I removed the div above, but kept the one with the class “fiveGroupByHeader”
this seems to work, now I have the 3 pages that I expected.
But I’m concerned that this is not robust enough. What do you think?

2: (ignore this item… I have solved it)
The footer as you left it in the template does not display any of the values expected. I think this may be because the footer is after the {{/_Each}} flag. Is it possible the values are no longer in scope? *

I tried moving the header up before the {{/_Each}} flag:

            <!-- Page footer -->
            <table class="fiveReportFooter-everyPage" style="font-size: 10px; width: 100%; border-collapse: collapse; margin: 0; padding: 0;">
                <tbody>
                    <tr>
                        <td style="width: 8%; color: black; text-align: right; padding: 0 6px 0 0;"><strong>Total Members:</strong></td>
                        <td style="width: 8%; color: black; text-align: left;"><strong>{{rqMemberList.[TotalMembers]}}</strong></td>
                        <td style="width: 8%; color: black; text-align: right; padding: 0 6px 0 0;"><strong>Total Current:</strong></td>
                        <td style="width: 8%; color: black; text-align: left;"><strong>{{rqMemberList.[TotalCurrent]}}</strong></td>
                        <td style="width: 8%; color: green; text-align: right; padding: 0 6px 0 0;"><strong>Lifetime:</strong></td>
                        <td style="width: 8%; color: green; text-align: left"><strong>{{rqMemberList.[TotalLifetime]}}</strong></td>
                        <td style="width: 8%; color: #c00000; text-align: right; padding: 0 6px 0 0;"><strong>Past Due:</strong></td>
                        <td style="width: 8%; color: #c00000; text-align: left;"><strong>{{rqMemberList.[TotalPastDue]}}</strong></td>
                        <td style="width: 36%"><br></td>
                    </tr>
                </tbody>
            </table>

        <div class="fiveReportHelper">{{/_Each}}</div>

This solves the problem, and the values display correctly. I’m not sure this won’t break something else, though.

Important: The report query returns the totals needed on every row, as this seemed easier than trying to calculate them in the report. If the data set is out of scope after the last {{/_Each}}, would that explain the issue?

If there is a better way to get to any of the row values after the {{/_Each}} command, please advise.

UPDATE: Never mind #2, I was able to figure this out myself. I needed to add the full path:

{{@root.[rqMemberList].[Records].[0].[FieldName]}}

to the td element value because this table is outside the record loop

Thanks again so much!!!

Hi Ron,

It is good to hear that you get things to work as you need.

Regarding your questions:
The footer, as you left it in the template, does not display any of the values expected. I think this may be because the footer is after the {{/_Each}} flag. Is it possible the values are no longer in scope? *
Answer: When using a field like that ‘rqMemberList.[TotalMembers]‘, it is expected to be inside the loop; otherwise, you need to pass the entire path.

The report query returns the totals needed on every row, as this seemed easier than trying to calculate them in the report. If the data set is out of scope after the last {{/_Each}}, would that explain the issue?
Answer: The same as the previous answer.

Regards,
Elton S

Thanks so much for answering this topic Elton.

I really appreciate your help. I have solved the issue by reverting to full path names for the data fields and using [Records].[0].[fieldName].

I just have a related question, regarding totals:

Please advise if there is a way to have totals for groups on a grouped report.
I added the overall total fields I needed to the query, and that worked just fine, but I’d like to know if that is indeed the best way to do this.

In Access report designer, we can add a footer both for page, last page, and group level. So we can get the record count for each group and the total record count. Likewise, we can give other totals, such as Current Members, Past-Due Members, New Members, etc. but if it is at the group level (by placing a footer there) it would show totals and counts for only that group. If it was below the last group, it could be interpreted as an overall total.

If Five cannot do this, I understand. But if there is a way to get these types of totals at the group level and at the “grand total” level, please advise.

Thanks again!!!

Hi Ron,

One of my previous examples answered your question partially. Here is another example with further additions:

The report has a built-in function _Sun, and _TotalRecords. Have you tried them?

  • The Sum receives a Datasource and the field you want to summarise.
  • The TotalRecords basically display the sum of all records from a given Datasource
  • To get the Total of records/Sum for a specific record per group, you can create a custom function that does it: Note: Make sure your report uses the _GroupBy Loop instead of the _Each to separate each group.**
    **
    Example of how to get the built-in function _Sun (if you added it to a table, please select the cell option), use the same steps for the _TotalRecords.

This is the Custom function to get the Total of records/Sum for a specific record per group. Feel free to change it.

function SumPrice(category, data) {

const sum = data

    .filter(record => record.Category === category)

    .reduce((total, record) => total + Number(record.Price), 0);

return sum.toFixed(2);

}

This is my entire report code, which has the total price by category, and at the end, it displays the total price of all categories and the total number of records for all categories/total number of records of the data source.

<style>
    .fontSize12{
        font-size:12px;
    }
    
    .tableRowDataData{
        color: #707070;
    }
    
    .mailTable tr:nth-child(2n+1) {
      background-color: lightgrey;
    }
     
</style>

<table class="fiveReportHeader-everyPage" style="width: 100%; height: 10mm;">
    <tbody>
        <tr>
            <td>This is a Header</td>
        </tr>
    </tbody>
</table>
<div>{{#_GroupBy @root.[Product].[Records] 'Category' as | Product |}}</div>

<div>
    <div class="fiveReportHelper">{{#_Each Product}}</div>
    <div class="fiveGroupByHeader">
        <div><strong>Group By Header {{Category}}</strong></div>
    </div>
    <div class="fiveReportHelper">{{#_Each GroupedRecords}}</div>
    <div>
        <table class="mailTable" style="table-layout:fixed; border-collapse:collapse; width: 100%; margin-top: 5px;">
            <tbody>
                <tr>
                    <td>Name</td>
                    <td>Price</td>
                </tr>
                <tr>
                    <td class="tableRowDataData">{{Name}}</td>
                    <td class="tableRowDataData">{{Price}}</td>
                </tr>
            </tbody>
        </table>
        <div class="fiveReportHelper"><br></div>
    </div>
    <div class="fiveReportHelper">{{/_Each}}</div>

<div class="fiveGroupByFooter">
    <div>

        <table style="font-size: 1rem; letter-spacing: 0.00938em; width: 100%; margin-top: 5px;">
            <tbody>
                <tr class="fiveReportHelper" contenteditable="false">
                    <td class="fiveReportHelper">Total Price for the {{Category}}: {{SumPrice Category @root.[Product].[Records]}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div>
    <div><br>
        <div contenteditable="false" class="fiveReportBreakAfter" style="border: 1px dashed black; display: flex; justify-content: center; width: 100%;">&lt;--- Page Break ---&gt;</div>

    </div>
</div>

<div class="fiveReportHelper">{{/_Each}}</div>

<table style="font-size: 1rem; letter-spacing: 0.00938em; width: 100%; margin-top: 5px;">
    <tbody>
        <tr class="fiveReportHelper" contenteditable="false">
            <td class="fiveReportHelper">Total of Price for all categories: {{_Sum @root.[Product].[Records] 'Price'}}</td>

        </tr>
        <tr class="fiveReportHelper" contenteditable="false">
            <td class="fiveReportHelper">Total of records of records for all groups: {{_TotalRecords @root.[Product].[Records]}}</td>
        </tr>
    </tbody>

</table>


<div class="fiveGroupByFinal">
    <div><span style="font-size: 1rem; letter-spacing: 0.00938em;">
            {{/_GroupBy}}</span></div>
</div>

</div>
<div><br></div>
<table class="fiveReportFooter-everyPage" style="width: 100%; height: 10mm;">
    <tbody>
        <tr>
            <td style="text-align: right;"><span style="font-size: 12px;"><em>Page&nbsp;&lt;five.pageNumber.current.arabic&gt; of&nbsp;&lt;five.pageNumber.total.arabic&gt;</em></span></td>
        </tr>
    </tbody>
</table>

With this, I believe you should be good.

Regards,
Elton S