Get More Mileage from Your StyleVision Designs with Dynamic Selection of CSS Files

One of the great things about StyleVision is the flexibility that it affords. With StyleVision you can design visually sophisticated stylesheets and reports for output to multiple formats including HTML, PDF, and Authentic electronic forms. Now StyleVision makes it even easier to accommodate different formatting needs in a single design with dynamic selection of CSS files – a new feature introduced in StyleVision 2012.

Although you can still manage virtually all formatting tasks from the StyleVision design itself, dynamic selection of CSS files means that you can create a single template for use in multiple situations. To demonstrate, we’ve created an invoice for the fictional Nanonull Corporation for which the design changes based on the number of days that have elapsed between the invoice issue date and the due date. Although we could have used XPath to change the formatting of each element based on the number of days that have elapsed, in this case it is more efficient to create individual CSS files that apply to different scenarios.

Below is the invoice that we designed in StyleVision. Notice that beyond the bold headings it is almost devoid of formatting – we’ll be applying formatting based on the number of days that have elapsed between the invoice issue date and the due date via CSS files.

Now we can create our CSS files in XMLSpy, Altova’s XML editor with integrated support for editing CSS2 and CSS3.

First we’ll create a CSS file for invoices with due dates after the invoice issue date (i.e., invoices that are not overdue). Here we’ve simply created the body selector with a yellowish background and the Nanonull logo and a header class.

Now we’ll create a more elaborate CSS for overdue invoices. The body selector will include a past due image, the paragraph selector will have 20 point bold red font, and the header and small header classes will have red bold font in different sizes.

Now we can assign the CSS files to the StyleVision design and subsequently assign classes to different design elements.

In StyleVision, we simply click add new CSS file in the Design Overview and navigate to the CSS files we created in XMLSpy – StyleVision supports multiple CSS files in the same design.

Our design now looks like this – notice that formatting from both CSSRegular and CSSOverdue have been applied in StyleVision design view.

However we would like to assign the CSS file based on the distance between the invoice issue date and the due date. Therefore, we’ll right click on the arrow next to the CSS file in the Design Overview and choose Select One CSS File with XPath (below).

This will invoke the Select CSS File Using XPath dialog box (below). We can use XPath in this dialog box to select the appropriate CSS file based on dynamic input – here we’ve instructed StyleVision to use the CSSOverdue.css file if the invoice due date precedes the invoice issue date and the CSSRegular.css file in all other cases.

Here is the complete XPath we entered into the Select CSS File Using XPath dialog box above.

Now we can assign the classes defined in the CSS files to individual design elements in the StyleVision design.

Here we’ve assigned the paragraph containing the text “Invoice” to the class “header “ in the Styles pane – based on the contents of our CSS files this text will appear in red 20 point bold font for overdue invoices and black 20 point bold for invoices whose due date is in the future.

Likewise, we’ll assign the invoice due date to the class “small header.”

Now we’re ready to preview the invoice.

Below is the HTML preview for an overdue invoice – note that the text “Invoice” and the due date are in red bold font and that Past Due image is stamped in the middle.

Now let’s look at the same invoice with a due date in the future – note the yellow background, Nanonull logo, and that “Invoice” and the due date appear in black.

The ability to select a CSS file based on dynamic input opens up a wealth of possibilities and makes your StyleVision designs even more adaptable. With this feature, you can make formatting changes on the fly via the CSS files associated with a design – especially handy for designs with many elements.

Created a great project using the StyleVision stylesheet and report designer or any of Altova’s other tools and want to show it off? Please share your story with other Altova users by commenting on this blog post.

If you think it would make a great case study please visit the Altova case studies page – if we use your story you’ll receive a $200 Amazon gift card. We’d love to hear from you!