Creating an Overview Page

Creating an overview page requires planning and a phased development. In general, the steps are:

Design the layout and divide the page into panes. Use your favorite tool for mockups.
Specify the general data content for the high-level view.
Plan the data content for the primary or secondary views—pages linked to or from the overview page.

NOTE: Overview pages can be defined in both the sections and pages blocks.
The total percentage of the display layout elements within a vsplit or an hsplit must equal 100.

As you work with the scripts, make use of the right-click context menu and the Ctrl+Space pop-up menus.

Add code incrementally to your script and periodically test the results.

To construct the following example overview page:

For details about building the upper-left pane, see Definitions Code Sample. This section also details how to include the charts on the bottom of the page.
For details on adding links for the grid element, see Adding Page Links. This section also details how to define the target pages. Repeat the steps for each dimension.

Add some images to the right of the summary grid. For example:

  vsplit { 
    hsplit percent = 40 { 
      spacer percent = 3 
      element id = "grid_labels" percent = 20 
      line percent = 2 
      element id = "grid_columns" percent = 10 
      line percent = 2 
      
      box percent = 60 { 
        title "Icon Examples" 
        hsplit { 
          image percent = 25 { 
            path "/divetab/images/trends.png" 
          } 
          image percent = 25 { 
            path "/divetab/images/target.png" 
          } 
          image percent = 25 { 
            path "/divetab/images/atomic.png" 
          } 
          image percent = 25 { 
            path "/divetab/images/options.png" 
          } 
        } 
      } 
      spacer percent = 3 
    } 
    
    line percent = 1 
    hsplit percent = 59 { 
      spacer percent = 1 
      element id = "line_chart" percent = 48 
      line percent = 2 
      element id = "pie_chart" percent = 48
      spacer percent = 1 
    } 
  }

By using this example as the starting point, you can link to more data from this page as well as from the target pages created in Step 2. For example, the charts can link to report pages.

Here is the complete script for the example overview page.

divetab version = "0.0" { 
  definitions { 
    elements { 
      
      grid id = "grid_labels" { 
        row 
        row "Posting Period" 
        row 
        row "Corporate Product Group" 
        row "Corporate Product Sub Group" 
        row "Corporate Brand" 
        row 
        row "Resp Team" 
        row "Resp SalesPerson" 
      } 
      
      grid id = "grid_columns" { 
        row 
        row { 
          text column = "Posting Period Count" 
        } 
        row 
        row { 
          text column = "Corporate Product Group Count" { 
            justification "left" 
            link { 
              page id = "ad-hoc" 
            } 
          } 
        } 
        row { 
          text column = "Corporate Product Sub Group Count" { 
            justification "left" 
            link { 
              page id = "ad-hoc" 
            } 
          } 
        } 
        row { 
          text column = "Corporate Brand Count" { 
            justification "left" 
            link { 
              page id = "ad-hoc" 
            } 
          } 
        } 
        row 
        row { 
          text column = "Resp Team Count" { 
            justification "left" 
            link { 
              page id = "ad-hoc" 
            } 
          } 
        } 
        row { 
          text column = "Resp SalesPerson Count" { 
            justification "left" 
            link { 
              page id = "ad-hoc" 
            } 
          } 
        } 
      } 
      
      line-chart id = "line_chart" { 
        dimension "Posting Period" 
        title "Posting Period Cost" 
        line column = "Cost" 
        hide-legend 
      } 
      pie-chart id = "pie_chart" { 
        dimension "Resp Team" 
        title "Resp Team Cost" 
        column column = "Cost" 
      } 
    } 
  } 
  
  data-area id = "overview-page_2" { 
    title "Overview Example" 
    icon "/divetab/images/trends-screen.png" 
    sections { 
      
      overview-page { 
        title "Overview Page" 
        cplan "/cplans/basic_101.cplan" 
        
        tab "Sales" { 
          screen { 
            layout { 
              vsplit { 
                
                hsplit percent = 40 { 
                  spacer percent = 3 
                  element id = "grid_labels" percent = 20 
                  line percent = 2 
                  element id = "grid_columns" percent = 10 
                  line percent = 2 
                  
                  box percent = 60 { 
                    title "Icon Examples" 
                    hsplit { 
                      image percent = 25 { 
                        path "/divetab/images/trends.png" 
                      } 
                      image percent = 25 { 
                        path "/divetab/images/target.png" 
                      } 
                      image percent = 25 { 
                        path "/divetab/images/atomic.png" 
                      } 
                      image percent = 25 { 
                        path "/divetab/images/options.png" 
                      }  
                    } 
                  }
                  spacer percent = 3 
                } 
                
                line percent = 1 
                hsplit percent = 59 { 
                  spacer percent = 1 
                  element id = "line_chart" percent = 48 
                  line percent = 2 
                  element id = "pie_chart" percent = 48 
                  spacer percent = 1 
                } 
              } 
            } 
          } 
        } 
      } 
    } 
    
    pages { 
      ad-hoc-page id = "ad-hoc" { 
        cplan "/cplans/basic_101.cplan" 
        title "Ad Hoc Sales" 
        
        dimension "Posting Period" 
        
        dimcount-dimension "Corporate Product Group" 
        dimcount-dimension "Corporate Product Sub Group" 
        dimcount-dimension "Corporate Brand" 
        
        available-dimension "Resp Team" 
        available-dimension "Resp SalesPerson" 
        
        quickview-dimension "Posting Period" 
        
        text column = "Cost" { 
          value-format "$#,###.00" 
        } 
        text column = "Net Sales" { 
          value-format "$#,###.00" 
        } 
      } 
    } 
  } 
}