Building an app with 100 years of weather data (part 2)

[jeroenvandera]

A week ago I posted the first part about an app with 100 years of weather data. If you haven’t done this already you can read the article here :
http://scn.sap.com/community/businessobjects-design-studio/blog/2013/02/21/building-an-app-with-100-...

In the second part I will describe some elements I built in the app. First I will describe how I made the listbox to drill down and how I made the top 10 / bottom 10 buttons.

Then I will describe how I made the bottom/average/top temperature buttons and some other interactive items.

The listbox

Actually there are 2 listboxes. With the properties it’s easy to align both of them on exactly the same spot. The trick is to set the visibility for the years listbox on when there is a decade selected or when the button TOP 5 or BOTTOM 5 is selected.

The script in the onselect from the decade listbox looks like this :

DS_TEMPERATURE.setFilter("ZDS_TDATE__ZDECADE", LISTBOX_DECADES.getSelectedValue());

LISTBOX_YEARS.setItems(DS_TEMPERATURE.getMemberList("0CALYEAR", MemberPresentation.INTERNAL_KEY, MemberDisplay.TEXT, 10));

LISTBOX_DECADES.setVisible(false);

LISTBOX_YEARS.setVisible(true);

First the filter of the temperature graph is set to the decade selected
Second the Listbox years gets populated with years from the temperature data source
Finally the listbox decades is set to visible = false and years visible = true.
For a user it still looks like the same listbox.

New version

Local variables are available in the new version. This would mean I could keep the value of the selected item. With that I then could store the selected value of decades in a variable. Switch the listbox to another datasource or switch the query in the datasource with .ASSIGNDATASOURCE and apply the filter using the stored value in the local variable. But that has to wait until I get my hands on the new version :smile:

Top 10 / Bottom 10.

Both these buttons are based on a query with a filter variable with a replacement path.

The replacement path is another query with a condition to only show the top 10 / bottom 10 years.
In the rows/columns the query shows the minimum, maximum and average temperature per calendar day.

When pressed the button follows the following script :

LISTBOX_DECADES.setVisible(false);
LISTBOX_YEARS.setItems(DS_TOP10_TEMPERATURE.getMemberList("0CALYEAR", MemberPresentation.INTERNAL_KEY, MemberDisplay.TEXT, 10));

DS_DETAIL_WAARNEMINGEN.clearFilter("0CALYEAR");

DS_DETAIL_WAARNEMINGEN.clearFilter("ZDS_TDATE__ZDECADE");

LISTBOX_YEARS.setVisible(true);

CHART_PRECIPITATION.setVisible(false);

1.       Decades set to invisible as we already selected the years with bottom /top 10
2.       The years listbox is populated with the TOP10 query
3.       The detail datasources are cleared from any filter that’s left from previous navigations
4.       The listbox years is visible
5.       The precipitation charts is set to invisible as several years are in the filter

Min/Max/ Average

The min/max average radiobutton is a filter on the key figure.
Rather than using an extensive IF THEN ELSE statement to determine which keyfigure to filter I should filter on based on the selection I just populated the items of the radio button object with the technical keys of the key figures

The on select script became much easier after that

DS_DETAIL_WAARNEMINGEN.clearFilter("4SXI09QZFDLFZAIHY7WVN6Z7N");

DS_DETAIL_WAARNEMINGEN.setFilter("4SXI09QZFDLFZAIHY7WVN6Z7N", RADIOBUTTONS_TEMPSELECT.getSelectedValue());

CLEARFILTER to be sure no double filters would give me no key figure at all.Then setfilter with the selected value of the radio button

Getting the popup to show only the right values

Finally in the bubble chart you were able to click on a dot and a popup appears with detailed data for that dot. This can be done by using GETSELECTEDMEMBER.

DS_PRECONEMONTH.setFilter("0CALMONTH2", LISTBOX_MONTHS.getSelectedValue());

DS_PRECONEMONTH.setFilter("0CALYEAR", CHART_BUBBLE_PREC.getSelectedMember("0CALYEAR"));

POPUP_PRECMONTH.show();

In the ONSELECT() property of the bubble chart the script above is coded.

First we use the listbox month value to apply the first filter and then the 0CALYEAR dimension of the getselectedmember property of the bubble chart.
Together they filter on 1 calendar month which is shown in the popup.

Using all these techniques together will build you a nice interactive app. There is already a lot possible and with local variables and local calculations in the next version more will be possible.