Create a new ForeUI report (Advanced)

This tutorial shows you how to create a new report template for ForeUI mockups using the powerful built-in report designer (it is highly recommended to work through the Generate a report - ForeUI tutorial first).

Note: You can apply any techniques shown here to existing report templates simply by displaying the Report View, selecting the report in the Discovered Reports list, and clicking the Edit button,

or by clicking Edit Report... in the Navigator and selecting the report template you wish to edit.

To create a new ForeUI report, click the New Report... link on the Navigator. The Report View will be displayed if not already, and you will be prompted to select a Report Provider - double click the ForeUI Report Provider

entry. The Report Designer will then be displayed.

Ensure that you already have the ForeUI mockups loaded in Looksie from the previous tutorial.

SelectReportProvider

The Report Designer is displayed as a separate window.

ReportDesignerBlank

The report design

We will now build a report template that completely mimics the supplied ForeUITOCWithEvents report template that ships with Looksie:

•	Has a Report Header (displayed only on the first page)

•	A Table of Contents page showing mini-images of each page in the Plot, clicking the image will link through to the details section on the page.

•	Details section for each Page

Summary

o	Image of the page

o	Page events

o	List of all elements that have events and the event detail.

This tutorial covers a lot, and is very likely one of the most complex reports you will build for a while. Do it in stages, repeat each stage until you are comfortable with the process and concepts.

Note: Detailed documentation on the Report Designer is available here. Additionally, an extensive knowledge base is available on the DevExpress.com website, the developer of the Report Designer.

Let's get started

Right click the mouse in the Report workspace, and from the popup menu select Insert Band -> ReportHeader.
Also insert a Detail Band. The Detail band should be resized to basically have a height of zero (0). This is only required for this particular example, otherwise the report will be empty when run.

InsertBand

From the Tool Box, drag and drop a Label control onto ReportHeader band area. Double click this label, and change the text to 'ForeUI Test Report'.
Select all the text in the label (or just ensure the label is selected). Using the Font section on the Ribbon, change the Font to Verdana, and size 16. You may need to resize the label to ensure it is big enough.

3.	Drag a Picture Box onto ReportHeader, and set the Image Url to the foreui48.png file that is in the Reports directory located where you installed Looksie. The Image URL can be set via the Property Grid or the Smart Tag, both discussed later in this quick start.

4.	We now need to add the bands for the table of contents. On a blank part of the workspace, right click to display the context menu, and select Insert Detail Report -> Unbound. A new band DetailReport has been added to the report. It has a child (indented) band called Detail1.

ForeUIQSReport1

You will now have the following band structure:

ReportHeader - displayed on the first page

Detail - empty (really just a placeholder)

DetailReport - repeated band for the thumbnails of each mockup

Detail1 - where will insert the title and thumbnail image of a mockup

5.	From the Tool Box, drag and drop a Label control onto the Detail1 band area. Double click this label, and change the text to 'Table of Contents'. Change the font to Verdana, size = 14, and set to Bold and Underline.

From the Field List, scroll down to the bottom and drag Filename onto Detail1 and resize to be the width of the report.

Resize the Detail1 band to remove unnecessary white-space.

The screen capture below demonstrates steps #1 -> #5.

ForeUIQSCreateReport1

6.	Let's test what we have done so far.

Click the Print Preview tab on the Ribbon to generate the report. Looksie will generate the page images in the background using ForeUI -.

You should see a report that look roughly looks like this.

ForeUIQSCreateReportPreview1

Right click on the Detail1 area, and select Insert Detail Report - "Pages" from the popup menu.

Click the blank space in Detail1 band, you will see that Pages is now highlighted in the Field List.
Expand Pages, and drag the Name field onto Detail2. Preview the report, you will now see a list of the pages in the plot.
Drag Image from the Field List onto Detail1. Set the Sizing to Zoom Image and resize the image to a reasonable 'thumbnail' size.

Preview the report again.

ForeUIQSCreateReport2

Adding page details section

Now we are going to add the page details section, where there will be a larger sized image of each page, the page event details, as well as a list of all the elements that have events.

Right-click on the Detail band header and insert a new Unbound Detail Report. DetailReport2 and Detail3 band will now appear.
Drag a label onto Detail3 area and change the text to 'Page Detail', make it bold and size 14. This is purely a header.

Click on the DetailReport2 header and in the Property Grid change Page Break under Behavior category to 'Before the Band'. This will force a new page after the table of contents.
Also set Tag under Data category to 'Unbound'. Doing this allows us to insert an arbitrary set of text that is not repeated or dependant on the structure of the plots.

9.	Right-click on Detail band header and insert a new Detail Report -> 'Pages'. DetailReport3 and Detail4 band will now appear. Click the DetailReport3 band header and 'Pages' will be highlighted in the Field List, drag 'Name' under Pages onto Detail4 area and change the font as desired.

10.

Drag a Panel from the Tool Box onto Detail4 underneath the 'Name' field dragged earlier.

Drop a Label into this panel and change the text to 'Master Page:'.
From the Field List, expand the 'MasterPage' node underneath the 'Pages' node used above. Drag 'Name' underneath 'MasterPage' into the panel next to the previously added label.

Preview the report - you will now see a list of pages in the Page Detail section, showing the page name and the name of the master page if specified.

Optional (advanced feature warning)

Perhaps we only want the Master Page line to show if there is actually a master page specified. To prevent the panel being displayed if there is no master page, we add some script that gets processed when the report is being generated. We've included this in the tutorial to highlight the flexibility the Report Designer allows.

Click the Scripts button on the Ribbon, and paste the following script:

using XemWare.Looksie.ExternalApps.ForeUI;

private int panelHeight = 0;

private int detail4Height = 0;

private void Detail4_BeforePrint(object sender, System.Drawing.Printing.PrintEventArgs e) {

DetailBand band = sender as DetailBand;

XemWare.Looksie.ExternalApps.ForeUI.Page page = (band.Parent as DetailReportBand).GetCurrentRow() as XemWare.Looksie.ExternalApps.ForeUI.Page;

if ( page != null )

{

if ( page.MasterPage == null )

{

panel1.Visible = false;

panel1.Height = 0;

Detail4.Height = detail4Height - panelHeight;

}

else

{

panel1.Visible = true;

panel1.Height = panelHeight;

Detail4.Height = detail4Height;

}

private void looksieReport1_BeforePrint(object sender, System.Drawing.Printing.PrintEventArgs e) {

panelHeight = panel1.Height;

detail4Height = Detail4.Height;

}

We covered a lot above, the screen capture below will help you get it right - it covers steps #7 -> #10.

ForeUIQSCreateReport2

Page images and page events

We're nearly done, I hope we haven't lost you. Let's add the last visual items to the report.

We're going to add a bigger sized image of the page to the Detail4 section. So move the panel we added in step #10 next to the '[Name]' field and drag Image from the Field List (under Pages node) onto Detail4.

Remove the script to optionally display the master page panel if you added it before.

Change the sizing mode of the image to Auto-Size. You may require a bit of playing with the sizing to get it displaying just right. The alternative option is to use Zoom Size, but you would really want to make Detail4 height and width at least big enough to accommodate the plot size defined in your ForeUI plot file.

The page size of the report can be changed by changing to looksieReport1 in the Property Grid, scrolling down to the Page Settings category, and changing the values as appropriate.
In this case, I have changed the report to Paper Kind = Letter as this seems to best accommodate the plot size of the Timer.4ui example. Blog.4ui would also work with this width, but is taller so you would need to extend the page size.

A border has also been added to the picture box to delineate the boundaries - makes it easier to get the page size right.

You can also remove the margins of the page by changing the properties of the report via the Property Grid, or by dragging the two vertical lines on the report.

From the Tool Box, drop a Actions Tree control underneath the page Image control.
The Actions Tree control paints the Actions tree of a page or element, it approximates the look of the Actions tree in ForeUI.
Resize the Actions Tree control to almost the entire width of the report, it will automatically expand down.

ForeUIQSPageDetail1

Detailed example of an Action tree:

ForeUIEventPreview

Looksie also supports a more flexible structured way of incorporating action details into a report design, this will be enabled in an upcoming release.

Optional (advanced feature warning)

Let's prevent the Action Tree from taking up any space if there are no events. We will also add a 'Page Events' label at the same time.

Right-click on DetailReport3 band header and Insert Detail Report -> "Empty". "Empty" is at the bottom of the popup menu. DetailReport4 and Detail5 will be added to the report.

Drop a Label onto Detail5 and change the text to 'Page Events'.

Move the Actions Tree control from Detail4 underneath this label.

Click the Scripts button on the Ribbon, and paste the following script (we have presumed you have removed the optional script added to hide the 'Master Pages' text from earlier in the tutorial):

using XemWare.Looksie.ExternalApps.ForeUI;

private void DetailReport4_BeforePrint(object sender, System.Drawing.Printing.PrintEventArgs e) {

XemWare.Looksie.ExternalApps.ForeUI.Page page = (XemWare.Looksie.ExternalApps.ForeUI.Page) ((sender as DetailReportBand).Parent as DetailReportBand).GetCurrentRow();

e.Cancel = !page.HasEvents;

}

In this script, we are cancelling the print of the DetailReport4 band if the parent Page has no events.

ForeUIQSCreateReport3

Page Elements

Now we are going to add a new DetailReport section to display all the plot elements that have defined Events (+Actions).

11.	Right click DetailReport3 band header, and Insert Detail Report -> "#AllElements_2". DetailReport5 and Detail6 bands will be added (presuming you also implemented the Optional section above).

From the Field List (#AllElements_2 should be highlighted, expand this node), drag Element Type and ID onto Detail6.

Drag a Label onto Detail6 and set the text to 'Events'.

Drag an Actions Tree control on Detail6 and resize to take up (almost) the width of the report.

Click the DetailReport5 band header and click the Smart Tag icon that is displayed.

In the corresponding Detail Report Tasks, popup click the button next to the Filter String field. This will display the FilterString Editor.

Click the + next to Add, click the [Element Type] text and select Has Events from the popup list.

Click the + next to Add, click the [Element Type] text and select Has Events from the popup list.
Click the '<enter a value>' text that is subsequently displayed, and tick the checkbox.

Uncheck the 'Print when Data Source is Empty' checkbox - we don't want DetailReport5 displayed if there are no matching elements.

We have now filtered this band to only show elements with events.

ForeUIHasEventsFilter

Preview the report.

ForeUIEventPreview2

Bookmarks

The last thing we will do is create bookmarks These can be utilised in the Print Preview, as well as retained in the PDF export.

Bookmarks

12.	Click the '[Filename] label in Detail1 band. In the Property Grid, change Name to 'FilenameLabel'

Expand Bookmark under (Data Bindings), and in the Binding drop down box, select 'Plots' (the top level node) -> 'Filename' (the displayed tree is identical to the Field List)

Click the '[Table of Contents]' label in the Detail1 band. In the Property Grid, locate Bookmark in the Navigation category. Set the text to 'Table of Contents'.

Change Name to 'TableOfContentsLabel'.

Locate Parent Bookmark in the Navigation category. Set it to 'FilenameLabel'.

Click the '[Name]' label in Detail2 band. In the Property Grid, locate Parent Bookmark in the Navigation category. Set it to 'TableOfContentsLabel'.

Expand Bookmark under (Data Bindings), and in the Binding drop down box, select 'Plots' -> 'Pages' -> 'Name'.

Click the 'Page Details' label in GroupHeader1 band. In the Property Grid, locate Bookmark in the Navigation category. Set the text to 'Page Details'.

Change Name to 'PageDetailsLabel'.

Change Parent Bookmark in the Navigation category to 'FilenameLabel'.

Click the '[Name]' label in Detail4 band. In the Property Grid, locate Parent Bookmark in the Navigation category. Set it to 'PageDetailsLabel'.

Expand Bookmark under (Data Bindings), and in the Binding drop down box, select 'Plots' -> 'Pages' -> 'Name'.

Now preview the report - you will see the Bookmarks tree on the left of the report. Export the report to PDF, the bookmarks are retained.

ForeUIReportBookmark

Clickable Links

Let's make navigating from the ToC to the Page Details easier.

Click the '[Name]' label in Detail2 band. In the Property Grid, set the text in Tag to 'Link:{ID}'
Click the Image picture box in Detail2, and also set Tag to 'Link:{ID}'
Click the '[Name]' label in Detail4 band and set Tag to 'LinkTarget:{ID}'.

If you preview the report, you can now click the thumbnail image or page name in the ToC to jump directly to the associated Page detail.

One last change

13.	On the Property Grid, ensue looksieReport1 is selected, scroll down the properties list until you find the category Data, and set the text of the Tag property to 'Unbound'.

Explained

The loaded mockups are the source data for the report. Usually, a report will just utilize source data once, but in this case we are repeating the use of the source data (mockups) - once for the thumbnails, and once for the full-sized image sections. So we are now creating two separate parts of the report. For more on Report Bands check out this introduction here.

We are done!

Don't forget to save the report.

If you have any trouble, refer to the ForeUITOCWithEvents report template that ships with Looksie to compare.

At this stage you should see that the report bands are setup as a hierarchy, and this roughly represents the hierarchy that ForeUI plots are structured as:

Plots -> Pages -> Elements -> Events -> Actions

Create a new ForeUI report (Advanced)						QS_Report_Create_ForeUI_Advanced Dear Support Staff,
Create a new ForeUI report (Advanced)