cancel
Showing results for 
Search instead for 
Did you mean: 

Customized list style is not constant in Hybrid web container app

midhun_vp
Active Contributor
0 Kudos

Hi friends,

I developed a custom list using the following code in for Hybrid web container app.

function customBeforeShowScreen(screenToShow, screenToHide) {

          if (screenToShow == "PurchaseOrdersDetail"){

                    menuItemCallbackPurchaseOrdersDetailGet_Po_Items();

                      var message = getCurrentMessageValueCollection();

                      var itemList = message.getData("PO_Items");

                      var items = itemList.getValue();

                      var numOfItems = items.length;

                      var i = 0;

                      //iterate through the results and build our list

                      //var htmlOutput = '<div><ul data-role="listview" data-theme="a" data-filter="true">';

                      var htmlOutput = '<div><ul data-role="listview">';

                      while ( i < numOfItems ){

                        var currItem= items[i];

                        var fecha = currItem.getData("PO_Items_PO_Item_attribKey").getValue();

                        var corrida = currItem.getData("PO_Items_Material_attribKey").getValue();

                        var nombre = currItem.getData("PO_Items_Quantity_attribKey").getValue();

                        //for our list, we want a thumbnail icon, which is why the image goes first

                        htmlOutput += '<li><a id ="' + currItem.getKey() + '" class="listClick">';

                        //htmlOutput += '<img src="./images/' + "avatar.png" + '" class="ui-li-thumb">';

                        htmlOutput += '<h3>' + nombre +'</h3>';

                        htmlOutput += '<p>' + fecha +'</p>';

                        htmlOutput += '<p>' + corrida +'</p>';

                        htmlOutput += '</a></li>';

                        i++;

                      }

 

                      htmlOutput += '</ul></div>';

 

              var topOfFormElem1 = document.getElementById("POItems");

                  topOfFormElem1.innerHTML = htmlOutput;

                     

 

                      $(".listClick").click(function(){

                      currListDivID = $(this).parent().parent();

              navigateForward("PurchaseOrdersDetail",  this.id );

                      if (isBlackBerry()) {

                        return;

                        }

                      });

                      return true;

                    }

    return true;

}

The list is showing properly for the first time like the below

1.png

But when I refresh the list with an online request the style is not showing.

Now the list is showing like this:

Is there any way to solve this issue?

It happens in Ios and android. I didn't check with BB.

Regards

Midhun.V.P

Accepted Solutions (0)

Answers (2)

Answers (2)

midhun_vp
Active Contributor
0 Kudos

The first image is missing in the above question. So its given below

Regards

Midhun V P

Former Member
0 Kudos

add this line of code to refresh the list view:-

$('ul').listview();

right after this line of code -> topOfFormElem1.innerHTML = htmlOutput;

Warm Regards,

S.C.Wong


midhun_vp
Active Contributor
0 Kudos

HI Shin,

Thanks for your reply.

I used the code that you given but its not working for me.

When I am adding that code the screen containing the list view is not opening.

Please give a solution as soon as possible.

Thanks

Midhun

Former Member
0 Kudos

Hi,

Following code might help you, I having similiar issues before when implementing similiar function, and I reliaze for the first time you can't use

"$('ul').listview();"

it will cause the page somehow unable to load, so i only apply the code when the navigate to the view for second time.

anyway following are my way of doing it, hope it helps:-

         // Refreshing View

                    var divContent = document.getElementById('batch_item_content');

 

                    if (divContent != null){

                              divContent.innerHTML = headerHtml + segmentControlHtml + html;

 

                              // Refresh View After Modifying Data

                              $('ul').listview();

                    }else{

                              $('#Batch_ItemForm #batch_item_html').parent().after('<div id="batch_item_content">' + headerHtml + segmentControlHtml + html + '</div>'); 

                    }

midhun_vp
Active Contributor
0 Kudos

Hey Shin,

I solved this issue. But the list is not updating in anyway. New items are not adding into the list even the MBO is updated.

Following is the code:

function customBeforeShowScreen(screenToShow, screenToHide) {

  if (screenToShow == 'Purchase_Orders')//Custom Appl MBO key name

  {

  //menuItemCallbackPurchase_OrdersRefresh();

   //alert("screenKey :");

   var message = getCurrentMessageValueCollection();

   var itemList = message.getData("Purchase_Systech");

   var items = itemList.getValue();

   var numOfItems = items.length;

   var i = 0;

   alert("number"+ numOfItems);

   //var  htmlOutput = '';

   var htmlOutput = '<div id="supportViewList"><ul data-role="listview" data-filter="true">';

   //var htmlOutput = '<div><ul>';

   while ( i < numOfItems ){

    var currItem= items[i];

    var PO_NUMBER = currItem.getData("Purchase_Systech_PO_NUMBER_attribKey").getValue();

    var CREATED_ON = currItem.getData("Purchase_Systech_CREATED_ON_attribKey").getValue();

    var VENDOR = currItem.getData("Purchase_Systech_VENDOR_attribKey").getValue();

    var TOTAL_PRICE = currItem.getData("Purchase_Systech_TOTAL_PRICE_attribKey").getValue();

    //var res_date = currItem.getData("Reschedule_order_res_date_attribKey").getValue();

    htmlOutput += '<li><a id ="' + currItem.getKey() + '" class="listClick">';

    //htmlOutput += '<div class="fsservices_white">';

    //htmlOutput += '<div  class="ui-grid-d">';         

    htmlOutput += '<div>'+PO_NUMBER+'&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'+CREATED_ON+'&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'+TOTAL_PRICE+'&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'+VENDOR+'</div>';

    //htmlOutput += '<div class="mid1">'+res_date+'</div>';

    //htmlOutput += '<div class="ctr" >' + fname + ' ' + lname +'</div>'

    //htmlOutput += '<div class="rgt" ><img src="images/arrow.png" title="sample"/></div>';

    //htmlOutput += '<div class="mid" >'+prodesc+'</div>'; 

    //htmlOutput += '</div>';    

    //htmlOutput += '</div>';

    htmlOutput += '</a></li>';

    i++;

   }

   htmlOutput += '</ul></div>';

   var listview = $('div[id="supportViewList"]');

   if (listview.length > 0) {

         var ul= $(listview[0]).find('ul[datarole="listview"]');

          if (ul.length > 0) {

          //htmlOutput = htmlOutput.replace('<div id="supportViewList"><ul data-role="listview" data-filter="true">','');

        

          //htmlOutput = htmlOutput.replace("<div id="supportViewList"><ul data-role="listview" data-filter="true">","");

          alert("htmlOutput");

          ul.html(htmlOutput);

          ul.listview('refresh');

          }

   }

   else{

   var topOfFormElem1 = document.getElementById("HTML2");  

   topOfFormElem1.innerHTML = htmlOutput;

   //$('#Purchase_OrdersScreenDiv #Purchase Orders').hide();

   //$('#topOfPurchase_OrdersForm').after(htmlOutput);

   //$('#Purchase_OrdersForm').children().eq(2).hide();

          //$('#Purchase_OrdersForm').children().eq(3).hide();

          //$('#Purchase_OrdersForm').children().eq(1).after(htmlOutput);

   }

   //htmlOutput +='';

   //alert("htmlOutput :"+htmlOutput);

   $(".listClick").click(function(){

    O_resId = this.id;

    navigateForward("Purchase_Order_Details",  this.id );  

    if (isBlackBerry()) {

     return;

    }

   });

   return true;

  }

Can you give a solution for this.

Thanks

Midhun


Former Member
0 Kudos

Midhun,

Have you tried this example?

https://cw.sdn.sap.com/cw/docs/DOC-148130

Regards, Daniel

midhun_vp
Active Contributor
0 Kudos

Daniel ,

In that document its not telling about a custom list view it seems.

Regards

Midhun V P