WebFOCUS for Web Developers

Introduction

You’re a web developer, someone who knows HTML/CSS/javascript. Your organization recently purchased WebFOCUS as their business intelligence platform. You’ve been given some training in the WebFOCUS Developer Studio learning how to build reports and dashboards through our graphical user interfaces.

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.

Prerequisites

  1. You will need to know some basic WebFOCUS syntax.
  2. It’s assumed you are a web developer who knows HTML/CSS/ javascript – why else would you be reading this article!
  3. Get your favourite Web Development tool out to help create your HTML/CSS/javascript – I personally like to use Visual Studio Web Express 2013.

The Data

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:

  1. 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.
  2. Manipulate the dataset and format it into a JSON object array, then use the technique 1.
  3. 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.

The Presentation

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

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 used jquery in this example because it simplifies a lot of the things I typically do when I do web development; however, feel free to use whatever javascript library you are more comfortable with.

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 has javascript, jquery, and css intellisense / autocomplete
  • 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:

!IBI.AMP.[YOUR_PARAMETER_NAME_WITHOUT_THE_AMPERSAND];

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:

!IBI.FIL.[YOUR_HOLD_FILE_NAME];

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.

Final Thoughts

This technique isn’t the only way to you can bring in your custom HTML markup, CSS, and javascript into WebFOCUS. Another approach is to do AJAX calls to WebFOCUS procedures through javascript. This is actually the preferred method in most cases but I hope this article gets you started in using your existing web development skills in WebFOCUS.

Stay tuned for an article on how to do this with AJAX calls in the future!

3 thoughts on “WebFOCUS for Web Developers

  1. Apoorva

    Hi,

    I just had a question wrt the IBI fil method…
    I’m basically trying to display !IBI.FIL.HOLD1, it displays fine when it is outside the iframe but when I try to put it in the iframe it does not work.

    Is there any other alternative to get this done…Any help would be appreciated.

    Thanks,
    Apoorva

    Reply
    1. Sandy Chiang Post author

      Hi Apoorva,

      How are you putting it in the iframe? The way it should work is your iframe src should be referencing a .fex file that renders an html output that contains that !IBI.FIL.HOLD1.

      If you are doing it that way, can you share your files and I can take a look.

      Best,

      Sandy

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *