Layout Input Elements with an Input Grid Element

Often multiple input values are collected from the user and it can be difficult to get the input elements aligned neatly in a two-column format. The Input Grid element, which is a container for input elements, provides a method for achieving such an alignment.

The example below is a report definition that collects the date range criteria for a report, using Input Date elements organized within an Input Grid element, and executes a report based on the criteria.

Figure 6.15: Definition Editor Panel after adding Input Grid and Input Date elements

The Input Date elements’ Caption attributes have been used to provide captions and, when the report is previewed, the inputs look like this:

Figure 6.16: Report Preview Panel   

Adding Report Criteria

While generating static reports is useful, many reports must support the selection of report criteria by the user to narrow the scope of the report.

For this example, we’ll start with the simple Customer List report created in Chapter 2, and add the capability to limit the customer list by country.

Step 1: Copy the basic report.

First, make a copy of the “Chapter2Report” report, and rename the report “Chapter6Report1”.


Step 2: Add the criteria selection to the report

There are a number of input elements available to collect input from the user. For visual clarity, you may care to collapse the dtCustomers element, hiding all of its child elements.

 In this example, add the following beneath the Body element and move them above the dtCustomer element: a Label element to prompt the user for the criteria, a Space element, an InputText element to accept input from the user, and a New Line element. Give the Label and InputText elements appropriate IDs.

Figure 6.1: Definition Editor Panel after adding input elements

Set the Label element’s Caption attribute to prompt the user for input (i.e. “Enter the Country:”).

Figure 6.2: Attributes Panel after setting Label element attributes

Hint: An alternative to using a Label element to prompt the user for input is to set the InputText element’s Caption attribute.   

Step 3: Add a button to execute the report

Add New Line and Button elements below dtCustomers to execute the report.  

Figure 6.3: Definition Editor Panel after adding Button element 

Set the Button element’s Caption attribute to provide a description of the button action (i.e. “Run Report”).

Figure 6.4: Attributes Panel after setting Button element attributes

Beneath btnRunReport add Action.Report and Target.Report elements to specify the report to run when the button is clicked.

Figure 6.5: Definition Editor Panel after adding Action and Target elements 

In this example, the report executes itself with the desired criteria. Therefore, set the Target element’s Report Definition File attribute to this report (i.e. “Chapter6Report1”).

Figure 6.6: Attributes Panel after setting Target element attributes 

Expand dtCustomers and modify the dlCustomerData data layer element’s Source attribute to use the criteria:

SELECT * FROM Customers

WHERE Country LIKE '@Request.txtCountry~%'

When the button is clicked, the HTML form in the report that contains the text input element will be submitted. Form fields submitted in this manner are “sent” to the target report definition as values identified by @Request tokens, followed by the input element ID. So @Request.txtCountry~ represents the country value entered by the user. The percent symbol (%) in the query is SQL syntax is a “wildcard” that enhances matching and is not part of the token.

Now, preview the report. Because the report expects an @Request token, you’ll be prompted to enter one. This is a handy Studio feature that lets you feed request variables to reports when testing. For now, however, just click Continue.

Figure 6.7: The Test Parameters Input dialog box 

Your report should appear in the Preview window and will contain all customers. Remember, we haven’t provided any criteria yet to limit the report to specific countries.

Enter some country criteria (the names of most countries or abbreviations, such as USA or UK, for some) and click the button. Your report should be limited to the correct entries. 

To see the effect of that percent sign (%) in the SQL query, enter just the letter “F” in your criteria and click the button. The report will include customers from Finland and France. 

Figure 6.8: Report Preview Panel after criteria “UK” entered

Step 5: Remembering the selection criteria

Notice, however, that our criteria textbox is cleared each time the report runs so we’re not really sure what criteria we’re viewing. To allow the report to “remember” the value entered by the user, set the Input Text (txtCountry) element’s Default Value attribute to the value “@Request.txtCountry~”.

Figure 6.9: Attributes Panel after setting Input Text element attribute 

The value entered will now appear in the Input Text element each time the report runs.

Step 6: Using a drop-down list

Instead of requiring the user to type in the country, a more user-friendly approach is to allow the user to select the country from a list of valid values. Remark the Input Text  (txtCountry) element, and add just below it an Input Select List element. 

Figure 6.10: Definition Editor Panel after adding the Input Select List element

To supply valid values for the Input Select List, add a DataLayer.SQL element beneath it and give it an appropriate ID.

Figure 6.11: Definition Editor Panel after adding the DataLayer element

Set the data layer’s Connection ID attribute to “connNorthwind” and, to retrieve a list of unique country names from the database, use the DISTINCT keyword in the SQL query in the Source attribute. The attributes should be as shown below:

Figure 6.12: Attributes Panel after setting the DataLayer element attributes

Set the Input Select List element’s Caption Column and Value Column attributes to the name of the appropriate column in the Data Layer (i.e. “Country”). In this example, these attributes are both set to the same column. But often the Caption Column is set to a user-friendly value and the Value Column is set to a key. 

In addition, set the Input Select List element’s Default Value attribute to the request token that will contain the value selected by the user. 

Figure 6.13: Attributes Panel after setting the InputSelectList element attributes 

Hint: The Input Select List element’s Include Blank attribute is used to add an empty item to the list and the Include Blank Caption attribute is used to specify an item to add to the list (i.e. “All” or “None”). When the user selects the “blank” item, the @Request token returns an empty string.   

Finally, modify the Data Layer (“dlCustomerData”) element’s Source property to use the country name selected from the list:

SELECT * FROM Customers

WHERE Country = '@Request.selCountry~'

Notice that the percent sign (%) is no longer used in the query.

Now, preview the report and select different countries from the list.

Figure 6.14: Report Preview Panel

To allow the user to select multiple items from the list, set the Input Select List element’s Multiple Selections attribute to “True”. In addition, modify the Data Layer (“dlCustomerData”) element’s Source property to retrieve all the selected items. 

SELECT * FROM Customers

WHERE Country IN (@SingleQuote.Request.selCountry~)

When an input select list allows multiple items to be selected, the @Request token returns a comma-separated list of items. The @SingleQuote token inserts single quotes around each item selected in the input select list. These two tokens used together allow the selected items to be easily used with the SQL statement IN clause. 

Chapter VI. Creating Interactive Reports

The purpose of this chapter is to build more dynamic, flexible reports using the family of input elements provided by Logi Report. In particular, we’ll demonstrate the collection and use of report criteria, the different methods of laying-out input elements, and input validation.

Linking Summary Charts and Detail Reports

A common feature supported by bar charts and pie charts is the capability to drill-down to view the details behind the summary chart.

In the following example, when the user selects a customer bar in the bar chart, the orders for the selected customer are displayed in the details report.

Switch to the Chapter5Report1 definition and set the Chart.XY element’s Chart Type to “Bar”.

To link the bar chart to a report, add an Action.Report element beneath the Chart.XY element. Then add Target.Report and LinkParms child elements beneath the Action.Report element to define the target detail report and the selected customer.

Figure 5.22: Definition Editor Panel after adding the elements 

Set the Target.Report element’s ID and Report Definition File attributes as shown below:

Figure 5.23: Attributes Panel after setting the attributes

And, finally, add a link parameter to pass the selected customer’s ID to the target report. The @Chart token is used to access the data layer in the chart: 

Figure 5.24: Attributes Panel adding the parameter

Now preview the bar chart report and click one of the bars to display the detail report. The process of adding this drill-down capability to a pie chart is exactly the same.

Creating a Simple Scatter Chart

To work with the scatter chart, create a new, blank report and call it “Chapter5Report3”.

Step 1: Create a scatter chart report

Add a Chart.Scatter element to the Body element in the report, and set the Chart Title attribute to a meaningful description (i.e. “Orders by Month”).

Figure 5.16: Definition Editor Panel after adding Chart element

Step 2: Define the table data layer

Every Chart.Scatter element requires a child DataLayer element. In this example, we’ll add a DataLayer.SQL element. 

Figure 5.17: Definition Editor Panel after adding DataLayer element

In this example, set the Connection ID to “connNorthwind” and use the following SQL query as the Source:

SELECT MONTH(OrderDate) AS OrderMonth, 

       COUNT(*) AS OrderCount

FROM Orders

GROUP BY MONTH(OrderDate)

ORDER BY MONTH(OrderDate)

This SQL query creates a summary of orders by month. 

Step 3: Define the column to display on the x-axis and y-axis

Set the Y-axis Data Column attribute to display the “OrderCount” column data, and set the X-axis Data Column attribute to display the “OrderMonth” column data. Set the Chart Title attribute to an appropriate name (i.e. “Orders By Month”).

Figure 5.18: Attributes Panel after setting Chart element attributes

Step 4: Format the scatter chart report

All that remains is to format the chart. In most cases, the default formatting is not accepta-ble. In the example below, the following presentation attributes are changed:

• Set the Height and Width attributes to display a 400 X 600 chart.
• Set the Top Border, Bottom Border, Right Border, and Left Border attributes to provide room for the title and axis labels. 
• Set the XAxisTitle and YAxisTitle attributes to meaningful descriptors.
• Set the Show Data Values attribute to “True” to display the data values on the scatter chart.
• Set the Symbol attribute to a value of “Circle” to define the symbol used to draw the data points.

Figure 5.19: Attributes Panel after setting Chart element attributes

The resulting scatter chart is presented as shown below:

Figure 5.20: The Scatter Chart example

Step 4: Add a trend line to the scatter chart report

Scatter charts often include a trend line and adding one is very simple in Logi Report. Simply add a Trend Line element to the Chart.Scatter element:

Figure 5.21: Definition Editor Panel after adding Trend Line element

Now, the resulting scatter chart is presented with a trend line. You can format the trend line by setting its Color and Line Width attributes.

Creating a Simple Pie Chart

To work with the pie chart, create a new, blank report and call it “Chapter5Report2”.

Step 1: Create a pie chart report

Add a Chart.Pie element to the Body element in the report, and set the Chart Title attribute to a meaningful description (i.e. “Top 10 Customers”). An ID is not required for a chart.

Figure 5.11: Definition Editor Panel after adding Chart element

Step 2: Define the table data layer

Every Chart.Pie element requires a child DataLayer element. In this example, we’ll add a DataLayer.SQL element. 

Figure 5.12: Definition Editor Panel after adding DataLayer element

In this example, set the Connection ID to “connNorthwind” and use the following SQL query as the Source:

SELECT TOP 10 CustomerID, COUNT(CustomerID) AS OrderCount

FROM Orders

GROUP BY CustomerID

ORDER BY COUNT(CustomerID) DESC

This SQL query creates a summary of the top 10 customers in the database based on number of orders. 

Step 3: Define the column to display on the x-axis and y-axis

Set the Data Column Y-axis attribute to display the “OrderCount” column data and set the Label Column X-axis attribute to display the “CustomerID” column data. 

Figure 5.13: Attributes Panel after setting initial Chart element attributes   

Step 4: Format the pie chart report

All that remains is to format the chart. In most cases, the default formatting is not accepta-ble. In the example below, the following presentation attributes are changed:

• Set the Height and Width attributes to display a 400 X 400 chart.
• Set the 3-Dimensional property to a value of “8” to control the depth of the pie.  
• Set the Top Border and Left Border attributes to provide room for the title and axis labels. 

Figure 5.14: Attributes Panel after setting Chart element attributes 

The resulting pie chart is presented as shown below.

Figure 5.15: The Pie Chart example 

Creating Multi-Layer Charts

Often a more complex chart is needed to effectively summarize information. Logi Reports supports combination charts that allow multiple layers and multiple chart types to be included on a single chart.

In this example, we’ll add another layer to the line chart developed in the previous section.

Step 1: Add a second grid layer

To add another layer to the chart, add Extra Grid Layer and Secondary Data Access child elements beneath the Chart.XY element:

Figure 5.8: Definition Editor Panel after adding elements 

Set the Secondary Data Axis element’s Data Title attribute to a meaningful description (i.e. “Freight”).

 

Step 2: Define the data to display in the new grid layer

Modify the data layer’s SQL query to return the total freight costs in addition to the number of orders, as shown below:

SELECT TOP 10 CustomerID, 

   COUNT(CustomerID)  AS OrderCount,

   SUM(Freight) AS Freight

FROM Orders

GROUP BY CustomerID

ORDER BY COUNT(CustomerID) DESC

Set the Extra Grid Layer element’s Data Column Y-axis attribute to the new total freight costs field in the data layer (i.e. Freight). Then set the presentation attributes (Chart Type and Color) to display the data as a brown line chart.

 

Figure 5.9: Attributes Panel after setting attributes

Assuming that the Chart.XY element’s Chart Type is also set to "Line", then when you preview the report, the resulting multi-line chart is presented as shown below.

Figure 5.10: Report Preview Panel showing line chart

Notice that the second y-axis scale (“Freight”) is shown on the right side of the grid chart. 

Of course, it’s not necessary that both grid layers display the same chart type. Simply change one of the Chart Type attributes on the Chart.Grid or Extra Grid Layer element to combine multiple chart types on a single chart.  

Creating a Simple Bar Chart

For the bar chart report, we’ll create a new report.

Step 1: Create a bar chart report

Using the techniques from other chapters, create a new, blank report definition named “Chapter5Report1”. In its definition, add a Chart.XY element to the Body element in the report.

Figure 5.1: Definition Editor Panel after adding Chart element

Set its Chart Type attribute to a value of “Bar” and its set the Chart Title attribute to a meaningful description (i.e. “Top 10 Customers”). An ID is not required for a chart.

Step 2: Define the table data layer

A chart, like a data table, needs a Data Layer element to retrieve the data it will display. Add a DataLayer.SQL element beneath the Chart element. 

Figure 5.2: Definition Editor Panel after adding DataLayer element 

Give the data layer an appropriate ID and set it to use the connNorthwind connection.

Use the following SQL query for its Source attribute:

SELECT TOP 10 CustomerID, COUNT(CustomerID) AS OrderCount

FROM Orders

GROUP BY CustomerID

ORDER BY COUNT(CustomerID) DESC

This SQL query returns a summary of the top 10 customers in the database by number of orders.  

Hint: The SQL “TOP” clause behaves slightly different between SQL Server and Access. SQL Server always returns the number of rows requested, but Access returns more than the number of rows requested when a “tie” is encountered.    

Step 3: Define the column to display on the x-axis and y-axis

Set the attributes for the chart element as follows:

Attribute	Value
Chart Type	Bar
Data Column Y-axis	OrderCount
Chart Title	Top 10 Customers
Data Title	Number of Orders
Label Column X-axis	CustomerID
Label Title	Customer ID
Show Data Values	True

Hint: Use the Extra Data Column element to display multiple bars on a bar chart.    

Step 4: Format the bar chart report

All that remains is to format the chart. Generally the default formatting is not acceptable. 

• Set the Height and Width attributes to display a 400 X 600 chart.
• Set the Color attribute to a value of “Green” to control the bar color.
• Set the 3-Dimensional property to a value of “8” to control the depth of the bars.  
• Set Border Color, Grid Horizontal Color, and Grid Vertical Color to “Silver”. 
• Set Top Border, Bottom Border, Right Border, and Left Border to provide room for the title and axis labels

Set additional attributes for the chart element as follows:

Figure 5.3: Attributes Panel after setting Chart element attributes 

The resulting bar chart is presented as shown below:

Figure 5.4: The Bar Chart example 

We can easily change the chart style by changing the Chart Type attribute to “Area”:

Figure 5.5: The Area Chart example

Or to a "Line" chart:

Figure 5.6: The Line Chart example

Or to a "Spline" chart:

Figure 5.7: The Spline Chart example

Chapter V. Creating Charts and Graphs

In this chapter, we’ll explore the various charts/graphs available in Logi Report. In addition to creating basic charts, we’ll create a multi-layer chart, and add drill-down capabilities to the charts.

Controlling the Report Link Presentation

Controlling the presentation of the links on a report is slightly more complex because a link has one or more “states”. The states for a link are Link, Visited, Hover, Active, and Focus and here are their definitions:

State	Description
Link	A link that has not been visited.
Visited	A link that has been visited.
Hover	A link with the mouse pointer hovering over it.
Active	A link that is active. Normally, this is the period of time between the mouse button being clicked and released.
Focus	A link that has focus.

One method of controlling the link presentation is through CSS classes. For example, adding the two CSS classes below to the style sheet displays all links in black, except hovering over a link displays the link in red.

A
{
   color : Black;
}

A:Hover
{
   color : Red;
}

In HTML a link is represented by the anchor tag <a>. The global style associated with the HTML anchor tag applies to all states where an explicit style is not defined (in this case, Link, Visited, Active, and Focus).

Hint: A link may be in more than one state at a time (i.e. Visited and Hover). Therefore, the Hover state style should appear after the Linked and/or Visit state styles, and the Active state style should appear after the Hover state.  

Many different style attributes can be used to provide feedback to the user. The most common style attributes are: color, background-color, text-decoration, and the font attributes.

Controlling the Report Table Presentation

While controlling the report presentation is similar for all elements, there are a few unique concepts for tables.

Like many elements, the Data Table element includes the Class attribute. It also includes the Alternating Row Class attribute and a few other attributes for convenience: Cell Spacing, Caption Class, and Column Header Class.


1. Formatting the data table rows

If you’re of a certain age, you may remember “greenbar” printer paper. Its alternating row colors made it easy to read long tabular reports. We can do the same thing in Studio.

To format the table rows, add the following new classes to your style sheet and apply them to the Data Table element. Assign the .TableRowStyle class to the Class attribute and the .TableAltRowStyle class to the Alternating Row Class attribute.

.TableRowStyle
{
   background-color : #99CC99;
}

.TableAltRowStyle
{
   background-color : #CCFF99;
}


2. Formatting the table data header/total rows

To format the table header and total rows, add the following new classes to your style sheet. Assign .TableHeaderStyle class to the Data Table element’s Column Header Class attribute and the .TableTotalStyle to the Summary Row element’s Class attribute.

.TableHeaderStyle
{
   background-color : #F0FFFF;
}

.TableTotalStyle
{
   background-color : #F0FFFF;
}

Hint: To change the class of the table header in versions of Logi products earlier than version 7.x, add a class qualified by the TH tag (i.e. TH.TableRowClass {background-color : Green;}).


3. Aligning column data 

To align column data, add this new class to your style sheet and apply the class to the Data Table Column showing numeric data (colOrderCount) elements’ Class attribute.

.ColAlignRightStyle
{
   text-align : right;
}


4. Removing the border around the page control images 

To remove the annoying border around the page controls, add the following style to the style sheet. Note that this is a class that affects the HTML <img> tag so the class name does not start with a period.

IMG
{
   border : 0;
}

Note: This style will remove the border from around all images in a report.


5. Formatting Column Data

The format of the data in a table column is controlled by the Format attribute of the element displaying the data. The Format attribute supports all the capability built into the Microsoft Visual Basic Format function.

The Format function supports predefined formats and or user-defined formats.

Hint: See MSDN® at http://msdn.microsoft.com/, for complete description of the syntax of user-defined formats.

For example, to format the Order Date in the sub-report, set the Label element’s Format attribute to a value of “Short Date”. For convenience, the Suggestions panel provides a list of the predefined formats.


6. Stretching a sub-table to fill the table area

Set the Sub-Report element Width and WidthScale attribute to 100% to cause the sub-report to match the width of the table.


7. Controlling the space between table cells

Set the Data Table and/or Sub-Data Table element(s) Cell Spacing attribute to adjust the space between table cells.

8. Controlling the table border

Set the Data Table and/or Sub-Data Table element(s) Border attribute to draw a border, of the specified width, around the table.

At this point, the report should look something like this (image was clipped for space):

Figure 4.9: Report Preview

Controlling the Report Presentation - Formatting the report header/footer

The reason styles are said to be “cascading” in CSS classes is that they apply in a hierarchical manner. A class applied to the Report (top) element in a definition applies to the whole report but style properties of that class may be overridden by other classes applied to elements lower down within the report.
To format the header and footer for a report, add the following new classes to your style sheet and apply the classes to the corresponding header and footer Label elements’ Class attributes.

.HeaderStyle
{
   background-color : Green;   
   font-size : large;
   color : White;
   text-align : center;
   width : 100%;
   padding : 5px 5px 5px 5px;
}

.FooterStyle
{
   background-color : Green;
   font-size : x-small;
   color : White;
   width : 100%;
   padding : 3px 3px 3px 3px;
}

A few new style properties are introduced in this example. The text-align style property is used to center the header, the font-size style property is used to control the relative size of the fonts, the width style property is used to stretch the header/footer the width of the browser window, and the padding style property controls the padding around the header/footer.

At this point, the report is should look like that shown below. Note that the sample below is being shown in a browser window, not the Preview window in Studio. This was done to allow the centering to look better by making the browser window smaller.

Also, remember that when you browse from Studio, you’re browsing the default report. You may need to right-click the Chapter4Report1 definition in the Applications panel and set it as the default in order to browse it.

Figure 4.8: Report Preview

Controlling the Report Presentation - Changing the font color on a report

Changing the font color on a report is accomplished by specifying the color style property. Add this class to your style sheet:

.ReportStyle
{
   background-color : OldLace;
   font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
   color : #663300;
}

Colors can be specified using actual color names (“Red”, “Green”, “OldLace”) or using HTML hexadecimal color codes (“#663300”). Edit your style sheet class now to contain this information.

The TopStyle Lite style sheet editor includes a useful Color Picker tool that will display hexadecimal color codes.

Figure 4.7: The TopStyle Lite Color Picker Tool

You can invoke the Color Picker in TopStyle Lite by selecting the Color … menu option for a style color property. 

Accuracy of color rendition is frequently dependent on factors such as the browser and video hardware being used to view a report. Accurate translation to a printed page can also be highly variable.

Controlling the Report Presentation - Changing the font on a report

Changing the font on a report is accomplished by specifying the font-family style property.

.ReportStyle
{
   background-color : OldLace;
   font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}

Fonts are often specified in a prioritized list, arranged from highest to lowest priority, to indicate alternate fonts to be used in case a particular font is not installed on the machine.

Controlling the Report Presentation - Changing the background color of a report

There are a number of different ways to specify CSS classes and I’ll discuss two different methods of modifying the report background color. Specifying the background on a report is accomplished by specifying the background-color style property.

The first method is to define a style for the HTML <body> tag. This will affect everything beneath the Body element without further ado.

BODY
{
   background-color : OldLace;
}

The second approach is to define a class (which always starts with a “.”)

.ReportStyle
{
   background-color : OldLace;
}

Add this class to your style sheet and specifically apply that class to the appropriate element in the report:

Figure 4.6: Attributes Panel after setting Report element Class attribute

Go ahead and make this assignment in your report definition. Note that the same style sheet and style class should be applied to any sub-report (i.e. the Chapter3SubReport).

Controlling the Report Presentation - Adding space between elements

Adding space between elements in a report is accomplished using the New Line and Space elements.

Hint: A New Line element can represent more than one line by adjusting its Line Count attribute. Similarly, the Space element can represent more than one space by adjusting its Size attribute.

For example, to add a report header title to the report created on the previous page, add a Label and a Newline element to the Report Header element as shown below. Then add the same again in reverse order to the Report Footer element.

Figure 4.5: Definition Editor Panel after adding New Line and Label elements

Set appropriate IDs for the Label elements. Set “Customer Order Report” for the header Label element’s Caption and “Copyright 2014 – Randy Bourgeois” for the footer Label’s Caption.

The Horizontal Line and Vertical Line elements are used to separate sections of a report with a delineating line. The width (or height) and thickness of the line are defined in terms of pixels.  The Horizontal Rule element is similar to the Horizontal Line element, and can be used interchangeably.

Hint: A useful feature of the Horizontal Rule element is its ability to automatically adjust its width to the width of the browser window.

Creating a Style Sheet

In this section we’ll create a style sheet to use throughout the application and then apply the style sheet to a report.


Step 1: Create a new style sheet and a new report definition

Select the Support Files tab at the bottom of the Application panel. Right-click the Style Sheet support files folder and select the Add New File … menu option.

Give your style sheet a name like “MyFirstStyleSheet.css”. Notice that, unlike report definitions, support files require you to supply a file extension when naming them.

Figure 4.1: Application Panel after adding new StyleSheet file

In the Application panel, switch back to the Definitions tab and make a copy of the "Chapter3Report2" report definition. Rename it as “Chapter4Report1”. 

Step 2: Apply the style sheet to the report

In the new Chapter4Report1 definition, select the default Style Sheet element.

Figure 4.2: Definition Editor Panel after adding Style Sheet element

Set its Style Sheet attribute to your new style sheet. Look in the Suggestions panel for a list of style sheets. 

Figure 4.3: Attributes Panel after setting Style Sheet element attribute 

The classes in the style sheet will now be available to elements in the report. 

In addition to applying a style sheet to an individual report, a global style sheet can be applied to all reports by adding a Global CSS element within the _settings definition. If desired, a style sheet can be applied to a report and will override the global style sheet. 

Step 3: Editing style sheets 

Editing a style sheet can be accomplished within Logi Studio in two ways. First, if you select a style sheet file in the Support Files list in the Application panel, its contents will open in a simple editor that takes the place of the Definition Editor. Any changes made there are saved when you navigate to another part of Studio. 

The second method of editing is to use the TopStyle Lite style sheet editor that’s installed with Logi Studio. This is a more robust editor with a number of nice features. To open your style sheet in it, first open the style sheet in the simple editor mentioned above and then click the “Edit with Style Sheet Editor” button in the upper right-hand corner of the editor’s frame. TopStyle Lite will launch and open your style sheet file independently. 

Figure 4.4: A style sheet in the Studio simple editor 

In order to see changes made and saved in TopStyle Lite reflected in the simple editor in Studio, you will need to right-click the style sheet file in the Support Files list and select the “Refresh from File” option. This is also required in order to be able to edit the file in the simple editor after editing it in TopStyle Lite.

You can, of course, open and edit style sheet files outside of Studio with any editing tool ranging from the highly complex down to Notepad. 

Chapter IV. Reporting Style Cookbook

So far, we’ve explored the mechanics of generating both simple and hierarchical reports. Now, let’s improve the presentation of these reports.

The visual characteristics of a report are controlled primarily through the use of CSS (Cascading Style Sheet) classes. Many of the elements in Logi Report support one or more class attributes to control the presentation of the element.

Hint: When possible use CSS classes to control the presentation of the report, instead of attributes. This allows a more consistent, maintainable presentation across all reports.

It’s not practical to cover all the aspects of cascading style sheets in this book. Instead, we’ll learn how to control the presentation through practical examples (ala cookbook style).

Hint: For an excellent introduction to Cascading Style Sheets review the free online training materials at http://www.w3schools.com/.