Tips on using showPrintablePageBehavior with af:table

You can use <af:showPrintablePageBehavior> tag with command components to display printable view of the pages. The usage is detailed in Web UI Developers Guide - 34 Using Different Output Modes

Please note the printable page produced by af:showPrintablePageBehavior is really meant for printing ;) - this page is very light weight and might be missing java script support. You may need to give special attention to this point if you want to build a printable view of a af:table with stretchable behavior( table with columnStretching="multiple"). ADF Faces run time stretches the table columns using client side java script. Apparently the printable view of such tables might not be aligned properly as the java script magic is missing. A possible solution is to conditionally set width for the columns based on the OutputMode(email,printable etc.). The same logic can be used for hiding specific components from the printable view.

The below given code snippet may help you to understand this better. In the following example column width is set as 50% in normal mode, which is required to enable the stretchable behavior for table. In email/printable mode width is set in fixed pixels - 300

<af:column sortProperty="#{bindings.DepartmentsView1.hints.DepartmentName.name}"
headerText="#{bindings.DepartmentsView1.hints.DepartmentName.label}" id="c2"
width="#{adfFacesContext.outputMode eq 'email' or adfFacesContext.outputMode eq 'printable' ? '300' : '50%'}">
<af:outputText value="#{row.DepartmentName}" id="ot2"/>
</af:column>

Your 'printable' table source may look like as given below,

  <af:table ...  
       rowSelection="single" id="t1" columnStretching="multiple">  
      <af:column sortProperty="#{bindings.DepartmentsView1.hints.DepartmentName.name}"  
             headerText="#{bindings.DepartmentsView1.hints.DepartmentName.label}" id="c2"  
             width="#{adfFacesContext.outputMode eq 'email' or adfFacesContext.outputMode eq 'printable' ? 300 : '50%'}">
      <af:outputText value="#{row.DepartmentName}" id="ot2"/>  
      </af:column>  
      <af:column sortProperty="#{bindings.DepartmentsView1.hints.ManagerId.name}"  
             headerText="#{bindings.DepartmentsView1.hints.ManagerId.label}" id="c3"  
             width="#{adfFacesContext.outputMode eq 'email' or adfFacesContext.outputMode eq 'printable' ? '100' : '25%'}"> 
      <af:outputText value="#{row.ManagerId}" id="ot3">  
           <af:convertNumber groupingUsed="false"  
                                pattern="#{bindings.DepartmentsView1.hints.ManagerId.format}"/>  
      </af:outputText>  
      </af:column>  
      <af:column sortProperty="#{bindings.DepartmentsView1.hints.LocationId.name}"  
             headerText="#{bindings.DepartmentsView1.hints.LocationId.label}" id="c4"  
                width="#{adfFacesContext.outputMode eq 'email' or adfFacesContext.outputMode eq 'printable' ? '100' : '25%'}">  
      <af:outputText value="#{row.LocationId}" id="ot4">  
           <af:convertNumber groupingUsed="false"  
                                pattern="#{bindings.DepartmentsView1.hints.LocationId.format}"/>  
      </af:outputText>  
      </af:column>  
 </af:table>  

Comments

Anonymous said…
Please upload a sample application. Any help will be appreciated.

Disclaimer

The views expressed on this blog are my own and do not necessarily reflect the views of my employer.