Flex your Dashboard Muscle with WebFOCUS Flex Enable
23
Copyright 2007, Information Builders. Slide 1 Flex your Dashboard Muscle with WebFOCUS Flex Enable John Gogoly Senior Systems Engineer June, 2008
description
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. - PowerPoint PPT Presentation
Transcript of Flex your Dashboard Muscle with WebFOCUS Flex Enable
Copyright 2007, Information Builders. Slide 1
Flex your Dashboard Muscle with WebFOCUS Flex Enable
John GogolySenior 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
http://localhost:8080/ibi_apps/WFServlet?IBIF_ex=xmltest
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 theSelect 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 theSelect State Panel
Drill down on Northeast Notice the States change
Copyright 2007, Information Builders. Slide 17
Add an ibiDataGrid
Drag & Drop ibiDataGridinto 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 ibiColumnChartinto 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 ibiPieChartinto 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…..
