1 / 23

Flex your Dashboard Muscle with WebFOCUS Flex Enable

Flex your Dashboard Muscle with WebFOCUS Flex Enable. John Gogoly Senior Systems Engineer June, 2008. Create a new Flex Project. File  New  Flex Project. Give the project a name. Name the project SalesDashboard Click Next. Set the Output folder Add the Flex3Enable1.0.swc.

ervin
Download Presentation

Flex your Dashboard Muscle with WebFOCUS Flex Enable

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Flex your Dashboard Muscle with WebFOCUS Flex Enable John Gogoly Senior Systems Engineer June, 2008

  2. Create a new Flex Project • File  New  Flex Project

  3. Give the project a name • Name the project SalesDashboard • Click Next

  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

  5. Add Flex3Enable1.0.swc • Select Flex3Enable1.0.swc  Open • Add SWC OK • Finish

  6. ibiComponents added to Custom Folder • Switch from Source to Design Mode • In the Components section • Note the Custom Folder • IBI Custom Components listed here

  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

  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 http://localhost:8080/ibi_apps/WFServlet?IBIF_ex=xmltest

  9. Run the SalesDashboard • Click the Green Circle with an Arrow to Run • Select OK to Save & Launch • Data from WebFOCUS returned in ibiDataGrid

  10. Set MAIN01 ibiDataGrid visible = false • In Flex Properties • Under “Common” • Set visible = false

  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

  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

  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.)

  14. Run the Sales Dashboard • Values for Region are now in the • Select Region Panel

  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

  16. Run the Sales Dashboard • Values for State are now in the • Select State Panel • Drill down on Northeast • Notice the States change

  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

  18. Run the Sales Dashboard • Region Detail Transactions Grid Created • Region & State Drill Downs Respected

  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

  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

  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

  22. Run the Sales Dashboard • ibiPieChart Created • Drill downs respected • Mouse Over Pie Slices • Data Tips Enabled

  23. With some Styling…..

More Related