However, you love your web development tools and you are set in your ways. If you are as stubborn as I am, you’ll find this article very informative.
- You will need to know some basic WebFOCUS syntax.
We will use WebFOCUS for data retrieval / data transformation; if you are uncomfortable with that, then I recommend taking some of our training courses. There are many ways you can use the data retrieved but here are ways I use it:
- HOLD the file and use !IBI.FIL.[HOLD_NAME] in your HTML markup, where the [HOLD_NAME] is the name of your hold file; this !IBI.FIL.[HOLD_NAME] will be replaced with an HTML table markup at run time.
- Manipulate the dataset and format it into a JSON object array, then use the technique 1.
- Store a value in a parameter and use !IBI.AMP.[PARAM_NAME], where the [PARAM_NAME] is the name of your parameter you set.
I personally like the second method the most because it gives you the most flexibility on how you want to present the data – whether it’s in a user control, a table, or a visualization.
This will make more sense when we start building out an example; the most important thing to understand is you need to know how to query tables with WebFOCUS using FOCUS syntax. We won’t go into too much detail on how to that in this article, but you will get some exposure with the example I will be providing.
This part you will be very familiar with. Open up your favourite web development tool and start coding away! The only thing you need to care about is knowing how to organize your CSS and JS files in a WebFOCUS environment. You’ll have to ask your WebFOCUS administrator where these files should go but it typically resides on the WebFOCUS Web Server.
NOTE: I’m using the word dashboard very loosely here only because most people conceptualize dashboards as interactive visual displays of data.
Personally, I adhere to a more stringent definition of a dashboard which I have written about at Dashboard Insight.
Putting It All Together
The last little bit is how to stitch these two concepts together. I typically create a WebFOCUS launch procedure. The purpose of this procedure is to do all the WebFOCUS data work I need to do and then reference the appropriate HTML page.
A Working Example
All these concepts are great, but the best way to explain is by showing you an example.
I’m going to demonstrate the two different techniques described above. Specifically, I will:
- Create a JSON object and use it to populate a drop down list
- Create a HOLD file for a table
- Create a HOLD file for a graph
Step 1: Getting the Data
This article is not a lesson on WebFOCUS syntax so I won’t go into the details of how the code works. However, the code I provided does have inline comments on what is going on. Download the WebFOCUS the file dashboard_launch.fex – the procedure that launches the dashboard.
In addition, you will need the graph file I created called car_sales_graph.fex. The reason why I created a separate procedure is to work in isolation of the launch when I create graphs. You don’t have to do this, but I like separating graphs out of the main launch procedure.
To be consistent with my example, add these files to your baseapp application path. You’ll also need to remove the ‘.txt’ extension I added if you haven’t done so already.
The main purpose of dashboard_launch.fex is to retrieve the datasets from the data source and hold them for use in the HTML page. You’ll notice that the procedure has a default parameter called &CAR_SELECTION; don’t worry about this for now; I’ll talk more about this in the next step.
If you try to run the launch page, it will not work because you haven’t included the HTML page yet which I will talk about next.
Step 1: Summary
- Download car_sales_graph.fex
- Remove ‘.txt’ extension from the downloaded procedures
- Add these files to baseapp application folder
Step 2: Adding the HTML Page
The launch page above includes the HTML page that will show the data and graphs. You can download dashboard.htm and add it to your baseapp application path to be consistent.
You’ll also need to add the jquery library to your project in either the baseapp folder ; of course, you can put it on the Report Server or the Web Server, but to keep things simple, I’ve added it to the baseapp folder.
I created this HTML page using Visual Studio Web Express 2013; you can use whatever you are more comfortable with but what I like about this particular web development IDE are the following:
- It’s free
- It hooks up with Team Foundation Services for storing projects in the cloud which is also free; this gives me source control and a central repository which makes my life a lot easier when working from multiple sites
The major technique I use in this HTML page is referencing parameters and hold files in the markup. For parameters, the syntax is:
If your parameter is a string, you’ll need to enclose it with single or double quotes like so:
Var myParameter = “!IBI.AMP.[YOUR_PARAMETER_NAME_WITHOUT_THE_AMPERSAND];”;
It’s critical to have that semi-colon!
For hold files, the syntax is:
This automatically injects the markup that WebFOCUS generates within the HTML page at run-time.
This page also demonstrates interactivity which I will talk about in the last section.
Step 2: Summary
- Download dashboard.htm
- Add the jquery library to baseapp application path – you may need to change the reference in the HTML page
- Run dashboard_launch.fex – a drop down list, a table, and a bar graph should show up.
Step 3: Adding Interactivity
This example would be pretty boring if it didn’t demonstrate some kind of interactivity. I added a filter to the page using the drop down list. When a user changes the selection, it will apply the filter to the page.
This works by adding a parameter, &CAR_SELECTION, to the dashboard_launch.fex procedure. By default, the value is ‘All’.
I implemented the ‘change’ event handler to the drop down list to redirect the page to the dashboard_launch.fex and added the selected value to the url string as a parameter.
This is picked up by WebFOCUS when it runs the procedure.
Stay tuned for an article on how to do this with AJAX calls in the future!