Copyright 2007, Information Builders. Slide 1 Flex your Dashboard Muscle with WebFOCUS Flex Enable John Gogoly Senior Systems Engineer June, 2008

Copyright 2007, Information Builders. Slide 2 Create a new Flex Project  File  New  Flex Project

Copyright 2007, Information Builders. Slide 3 Give the project a name  Name the project SalesDashboard  Click Next

Copyright 2007, Information Builders. Slide 4 Set the Output folder Add the Flex3Enable1.0.swc  Use the default location for the Output Folder  Click Next  Select the Library Path Tab  Click Add SWC  Browse for the Flex3Enable1.0.swc

Copyright 2007, Information Builders. Slide 5 Add Flex3Enable1.0.swc  Select Flex3Enable1.0.swc  Open  Add SWC  OK  Finish

Copyright 2007, Information Builders. Slide 6 ibiComponents added to Custom Folder  In the Components section  Note the Custom Folder  IBI Custom Components listed here  Switch from Source to Design Mode

Copyright 2007, Information Builders. Slide 7 Add the ibiCanvas  Drag & Drop ibiCanvas to the Design Area  Change the Design area from “Fit to Window” to 1024 x 768  Set the following properties:  Width = 1024  Height = 650  X = 9  Y = 10

Copyright 2007, Information Builders. Slide 8 Add ibiDataGrid  Drag & Drop ibiDataGrid inside the ibiCanvas  Make it a bit larger as shown  In the Flex Properties Window Change to Category View  Set id = MAIN01  In IBI Data  Set the seturl property  This is a FEX returning XML “ON TABLE PCHOLD FORMAT XML” Category View

Copyright 2007, Information Builders. Slide 9 Run the SalesDashboard  Click the Green Circle with an Arrow to Run  Select OK to Save & Launch  Data from WebFOCUS returned in ibiDataGrid

Copyright 2007, Information Builders. Slide 10 Set MAIN01 ibiDataGrid visible = false  In Flex Properties  Under “Common”  Set visible = false

Copyright 2007, Information Builders. Slide 11 Add Panels to the Design Area  In the Components Section:  Expand the Layout Folder  Drop a Panel on the Design Area  Set the first panel’s size properties  Height = 200  Width = 108  X = 10  Y = 43  Copy & Paste a second Panel  Paste a third Panel  Change Width = 685  Paste a fourth & fifth Panel  Adjust size as shown

Copyright 2007, Information Builders. Slide 12 Add Titles to the Panels  Double Click in the top portion of the panel  A text box opens up  Enter Titles for each as shown

Copyright 2007, Information Builders. Slide 13 Add an ibiList component  In the Select Region Panel  Drag & Drop ibiList component  Size the ibiList  Set the properties  Common: id = list1  IBI Data: ibiParent = MAIN01  IBI Filter: ibiFilterAble = true  IBI General: ibiColumn = REGION  Note: REGION is a field name. Field Names are case sensitive & must be typed exactly as they appear in the FEX (Master File.)

Copyright 2007, Information Builders. Slide 14 Run the Sales Dashboard  Values for Region are now in the Select Region Panel

Copyright 2007, Information Builders. Slide 15 Add a second ibiList Component  Copy & paste list1  Paste into Select State Panel  Change the properties  Common: id = list2  IBI General: ibiColumn = ST  Add a new property:  IBIFilter: ibiFilterParent = list1

Copyright 2007, Information Builders. Slide 16 Run the Sales Dashboard  Values for State are now in the Select State Panel  Drill down on Northeast  Notice the States change

Copyright 2007, Information Builders. Slide 17 Add an ibiDataGrid  Drag & Drop ibiDataGrid into Detail Transaction Panel  Set the properties  Common: id = detail  IBI Data: ibiParent = MAIN01  IBI Data: ibiUseColumns = REGION,ST,PRODUCT,DOLLARS, UNITS,COGS  IBIFilter: ibiFilterParent = list2  To make the Data Grid appear without scroll bars & appear nicely in the panel:  In the Flex Properties window  Switch to Standard View  In the Layout Section  Check all four corner constraints

Copyright 2007, Information Builders. Slide 18 Run the Sales Dashboard  Region Detail Transactions Grid Created  Region & State Drill Downs Respected

Copyright 2007, Information Builders. Slide 19 Add an ibiColumnChart  Drag & Drop ibiColumnChart into Sales by State Panel  Set the properties  IBI Data: ibiGroupBy = ST  IBI Data: ibiParent = detail  IBI Data: ibiUseFiltered = true  IBIGeneral: ibiXfield = ST  IBIGeneral: ibiYfield = Sum.DOLLARS,Sum.UNITS, Sum.COGS  Data: showDataTips = true

Copyright 2007, Information Builders. Slide 20 Run the Sales Dashboard  ibiColumnChart Created  Drill down on Region or State  Column Chart Changes to respect the drill down  Mouse Over Columns  Data Tips Enabled

Copyright 2007, Information Builders. Slide 21 Add an ibiPieChart  Drag & Drop ibiPieChart into Sales by Product Panel  Set the properties  IBI Data: ibiGroupBy = PRODUCT  IBI Data: ibiParent = detail  IBI Data: ibiUseFiltered = true  IBIGeneral: ibifield = Sum.DOLLARS  IBIGeneral: ibiNameField = PRODUCT  Data: showDataTips = true

Copyright 2007, Information Builders. Slide 22 Run the Sales Dashboard  ibiPieChart Created  Drill downs respected  Mouse Over Pie Slices  Data Tips Enabled

Copyright 2007, Information Builders. Slide 23 With some Styling…..