How to acces and display datas storaged in cache for a SUP 2.0 workflow?

Question

HI to all.
I have an application with a item menu which obtains data thought a online request. the result is shown is a listview.
My problem is when my BlackBerry has no conection ( offline scenario). When I select the menu item, I obtain an error.
How to acces and display datas storaged in cache for my MBO? I have read that I can use getMessageValueCollection in custom.js to access to my datas but once I get the datas, How can associate those datas to a Listview like a online request?? Do i have to develop my own screen in html or how?
Thanks.

Answer 1

I'm not entirely clear on what you mean by "cache" in this context.  I'm going to assume that what you are really referring to is the contents of the workflow message, so correct me if I'm wrong.  There is, in later releases, the ability to set an device-side request cache time so that if you issue an online request it'll store the results in an on-device cache and if you subsequently reissue the same online request with the same parameter values within that timeout period it'll get the data from the cache rather than going to the server, but my gut instinct is that this is not what you are referring to.
To access the data in the workflow message, you are correct, you would call getMessageValueCollection().  It will return an object hierarchy with objects defined in WorkflowMessage.js.  Note that if your online request fails, the data won't magically appear in your workflow message.
To use the data in the workflow message to update a listview, feel free to examine the code in the listview widgets and in API.js.  You can also create a custom listview as follows:
function customBeforeNavigateForward(screenKey, destScreenKey) {
     // In this example, we only want to replace the listview on the "My Approvals" screen    
     if (destScreenKey == 'My_Approvals'){
          // First, we get the MessageValueCollection that we are currently operating on
          var message = getCurrentMessageValueCollection();
          // Next, we'll get the list MessageValue from that MessageValueCollection
          var itemList = message.getData("LeaveApprovalItem3");
          // Because its a list, the Value of the MessageValue will be an array
          var items = itemList.getValue();
          // Figure out how many items are in the list
          var numOfItems = items.length;
          // Iterate through the results and build our list
          var i = 0;
          var htmlOutput = '<div><ul data-role="listview" data-theme="k" data-filter="true">';
          var firstChar = '';
          while ( i < numOfItems ){
               // Get the current item. This will be a MessageValueCollection.
               var currItem= items<i>;
               // Get the properties of the current item.
               var owner = currItem.getData("LeaveApprovalItem_owner_attribKey").getValue();
               var type = currItem.getData("LeaveApprovalItem_itemType_attribKey").getValue();
               var status = currItem.getData("LeaveApprovalItem_itemStatus_attribKey").getValue();
               var startDate = currItem.getData("LeaveApprovalItem_startDate_attribKey").getValue();
               var endDate = currItem.getData("LeaveApprovalItem_endDate_attribKey").getValue();
               // Format the data in a specific presentation
               var formatStartDate = Date.parse(startDate).toString('MMM/d/yyyy');
               var formatEndDate = Date.parse(endDate).toString('MMM/d/yyyy');
               // Decide which thumbnail image to use
               var imageToUse = ''
                    if (status == 'Pending'){
                         imageToUse = 'pending.png';
                    else if (status == 'Rejected'){
                         imageToUse = 'rejected.png';
                    else {
                         imageToUse = 'approved.png';
               // Add a new line to the listview for this item
               htmlOutput += '<li><a id ="' + currItem.getKey() + '" class="listClick">';
               htmlOutput += '<img src="./images/' + imageToUse + '" class="ui-li-thumb">';
               htmlOutput += '<h3 class = "listTitle">' + type;
               htmlOutput +=  ' ( ' + owner + ' ) ';
               htmlOutput += '</h3>';
               htmlOutput += '<p>' + formatStartDate + ' : ' + formatEndDate + '</p>';
               htmlOutput += '</a></li>';
               i++;
          htmlOutput += '</ul></div>';
          // Remove the old listview and add in the new one.  Note: this is suboptimal and should be fixed if you want to use it in production.
          $('#My_ApprovalsForm').children().eq(2).hide();
          $('#My_ApprovalsForm').children().eq(1).after(htmlOutput);
          // Add in a handler so that when a line is clicked on, it'll go to the right details screen
          $(".listClick").click(function(){
               currListDivID = $(this).parent().parent();
               $(this).parent().parent().addClass("ui-btn-active");
               navigateForward("Request_Details",  this.id );
               if (isBlackBerry()) {
                    return;
     // All done.
     return true;