4.1.1.2. Screen XML Descriptor

Now we will create a new screen to display a PivotTable.

  1. Select Generic UI in the project tree and click New → Screen in the context menu. After that, the template browser page will appear.

  2. Select Blank screen in the list of available templates and click Next.

  3. Enter the value pivot-sample-screen in the Descriptor name field and click Next.

  4. Open the Text tab and replace its content with the following code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd"
       caption="msg://caption"
       messagesPack="com.company.sampler.web.screens"
       xmlns:chart="http://schemas.haulmont.com/charts/charts.xsd">
   <data>
       <collection id="tipsDc"
                   class="com.company.sampler.entity.Tip"
                   view="_local"/>
   </data>
   <layout>
       <chart:pivotTable id="tipsPivotTable"
                         dataContainer="tipsDc"
                         renderer="HEATMAP">
           <chart:properties>
               <chart:property name="row"/>
               <chart:property name="totalBill"/>
               <chart:property name="tip"/>
               <chart:property name="sex"/>
               <chart:property name="smoker"/>
               <chart:property name="day"/>
               <chart:property name="time"/>
               <chart:property name="size"/>
           </chart:properties>
           <chart:aggregation mode="SUM_OVER_SUM">
               <chart:property name="tip"/>
               <chart:property name="totalBill"/>
           </chart:aggregation>
           <chart:rows>
               <chart:row value="sex"/>
               <chart:row value="smoker"/>
           </chart:rows>
           <chart:columns>
               <chart:column value="day"/>
               <chart:column value="time"/>
           </chart:columns>
           <chart:sortersFunction>
               function(attr){
               if(attr=="Day"){
               return $.pivotUtilities.sortAs(["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]);
               }
               }
           </chart:sortersFunction>
       </chart:pivotTable>
   </layout>
</window>