Styling Coaches for Printing

Follow

While maintaining a paperless process is one of the benefits of BPM, it may be necessary to capture certain steps in paper form. Brazos UI has built-in styles that are applied when printing but further CSS can be included with your coach to highly customize the layout and appearance of a printed coach.

Built-in Changes when Printing Coaches

A comparison of component from the Brazos UI Examples "Wind Farm Demo" on a live coach and a printed page highlights the features that are built in to the print stylings.

As can be seen from the above comparisons, color fills are minimized which helps to conserve ink and improve text and icon contrasts. Additionally, columns and sections are arranged vertically which may enhance readability.

Customizing Print Styles: The @media Rule

The @media rule allows for grouping and applying CSS rules based on properties of the device displaying the HTML content. This includes useful features like viewport widths and heights which can be leveraged for responsive designs based on available sizes. However, the broadest targeting of @media rules is to general media types. The main three of these are ‘all,’ ‘screen,’ and ‘print.’ By placing a set of CSS rules within an @media print block, a coach can be fully styled in ways that will have no impact on the normal screen display of the page.

Two usage examples

There are typically two changes that designers are likely to want made to a printed page from a Brazos UI coach.

Hiding Interactive Elements

Unlike a live coach, the printed version has no interactivity. As such, elements such as buttons are likely to just be visual clutter on a printed page. Hiding elements for printing is extremely easy because the Brazos UI CSS files already contain a class to hide elements during print:

@media print {
  .hidden-print {
    display: none !important;
  }
}

So, if we want to hide a button (or any control!) we can simply add the hidden-print class to the control’s HTML Attributes Override.

Note that hiding controls also has impact on the flow of items on the printed page.

WYSIWYG with Desktop Layouts

By default, it is likely that printing a coach will alter the layout of the page. Specifically, sections tend to align vertically rather than side by side. This is actually not due to any included @media rules, but rather is an offshoot of the responsive nature of the Brazos UI controls. A printed page’s width in pixel equivalents is actually fairly small. Specifically, it triggers the responsive stylings associated the “phone” size of Brazos UI controls’ Responsive Settings. However, by leveraging @media print rule groupings this can easily be overridden:

@media print {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{
        float : left;
    }
    .col-sm-12{width:100%;}
    .col-sm-11{width:91.66666667%;}
    .col-sm-10{width:83.33333333%;}
    .col-sm-9{width:75%;}
    .col-sm-8{width:66.66666667%;}
    .col-sm-7{width:58.33333333%;}
    .col-sm-6{width:50%;}
    .col-sm-5{width:41.66666667%;}
    .col-sm-4{width:33.33333333%;}
    .col-sm-3{width:25%;}
    .col-sm-2{width:16.66666667%;}
    .col-sm-1{width:8.33333333%;}
}

Adding the above styling to the coach produces sections that print side-by-side (assuming they were configured for that on the coach) instead of stacking vertically:

 

Further Tweaks

There are of course some styles that simply won’t work due to the static nature of a printed page (hover styling isn’t going to be very useful, for example), but nearly anything that can be achieved with CSS can be applied to the printed page using the @media print rule.

Several additional useful tweaks that could be made:

  • Change the font size. For example, fonts could be made smaller for printing: .body { font-size: 0.75em; }
  • Change the spacing between elements. You may want a tighter look of elements on the printed page: .body * { margin-bottom:1px; }
  • Add a button to the coach for printing that is, of course, hidden on print. This can be done by adding a custom HTML block containing the following code to the coach: <a class="btn btn-default hidden-print" href="javascript:window.print()"><i class="fa fa-print"></i>Print</a>

Printing from the Process Portal

The IBM Process Portal (both heritage and responsive) runs coaches within an iFrame. This complicates printing coaches because printing from the browser dialog defaults to printing the main window contents. Doing so from the heritage Process Portal (8.5.6 or earlier) may give the impression that only a single page of the coach can be printed because the browser will automatically suppress background graphics. If you display the background graphics, you can see that the Portal is the cause: 

PrintDialogIssue.PNG

Solution: If you use a custom print button (See the third bullet of the prevous section) then the coach itself will be the target of printing and the whole contents of the iFrame contents will be printed.

Note that because Brazos Portal opens tasks and dashboards in new tabs, rather than iFrames, the browser print option will work the same as a custom print button.

Brazos Examples Application's Wind Farm Demo Study Styled for Printing

Screen:

Print:

Applied CSS:

@media print {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{
        float : left;
    }
    .col-sm-12{width:100%;}
    .col-sm-11{width:91.66666667%;}
    .col-sm-10{width:83.33333333%;}
    .col-sm-9{width:75%;}
    .col-sm-8{width:66.66666667%;}
    .col-sm-7{width:58.33333333%;}
    .col-sm-6{width:50%;}
    .col-sm-5{width:41.66666667%;}
    .col-sm-4{width:33.33333333%;}
    .col-sm-3{width:25%;}
    .col-sm-2{width:16.66666667%;}
    .col-sm-1{width:8.33333333%;}

    .body {
        font-size: 0.75em;
    }
     .body * {margin-bottom:1px;}
     
     /* Hide buttons and other components to free up space */
     .btn, .note-toolbar, .upload-control, .prependSpan, .appendSpan, #pageProjectNameH4, .bp3-footer {
         display: none;
     }
    
    /* Hide floating Help button */
    iframe#launcher {
        display: none;
    }
    
    /* Show table elements that are hidden on "phone" responsive sizes */
    @media (max-width: 767px) {
        table .hidden-xs {
            display: table-cell !important;
        }
    }
    
    /* Expand page title (in col-sm-5 div) across top of page  */
     #pageHeadingH1{
         width: 225%;
     }
}

Additional References

  •  https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Have more questions? Submit a request

Comments

  • Avatar
    Tom Bushart

    Updated with additional information on printing coaches from the stock IBM Process Portals (both heritage and responsive).

Powered by Zendesk