input field in listview cell

[Former Member]

Hello,

I have a listview, and I want one of the cells to be editable, without going to the detail screen.

I have follow this example.

http://scn.sap.com/community/mobile/blog/2013/02/20/develop-hwc-app-with-customized-list

But I don´t know exactly what/how to write, so the detail screen works.

And if I navigate throw other screen the data does not get lost.

editBox = $("#" + items[i].getKey());

                              htmlEditBox = editBox.find('div').eq(3).html();

                              htmlEditBox = "<a id ='" + items[i].getKey() + "'  >" +

                                "<input  type='number' + // id='" + items[i].getKey() +

                                // "' sup_html_type='number' sup_max_length='32767' sup_num_of_decimals='0' onblur='validateControl('Planning_Book', 'pronosticokey', this)'>"+

           "' sup_html_type='number' sup_max_length='32767' sup_num_of_decimals='0' value='"+

                                items[i].getData("pronosticokey").getValue()

                                                   +"'> </a>";                             

It is written in sup 2.1.3 for an HWC app.

Thank you very much.

[former_member228049 · Accepted solution]

If above screenshot was something you want, I think it's doable.

1. basically, you need to create your own listview

   and in the the listview cell do something like

/Use this method to add custom code to a forward screen transition. If you return false, the screen

//transition will not occur.

function customBeforeNavigateForward(screenKey, destScreenKey) {

          if (destScreenKey == 'All_States'){

                    $('#stateListView').remove();

                    //grab the results from our object query

                    var message = getCurrentMessageValueCollection();

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

                    var items = itemList.getValue();

                    var numOfItems = items.length;

                    var i = 0;

                    //iterate through the results and build our list

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

                    var firstChar = '';

                    while ( i < numOfItems ){

                              var currItem= items[i];

                              var stateName = currItem.getData("States_state_name_attribKey").getValue();

                              var stateCapital = currItem.getData("States_state_capital_attribKey").getValue();

                              var stateCountry = currItem.getData("States_country_attribKey").getValue();

                              //i'll assume it's sorted, but you can't do that in the real world

                              var currFirstChar = stateName.charAt(0);

                              if (currFirstChar != firstChar){

                                        firstChar = currFirstChar;

                                        htmlOutput += '<li data-role="list-divider" data-theme="i">'

                                        htmlOutput += firstChar;

                                        htmlOutput += '</li>'

                              }

                              htmlOutput += '<li> <input class="right editableCell " type="text" id="'+currItem.getKey() +'" sup_html_type="text"  sup_max_length="32767" sup_num_of_decimals="0" value="'+ stateName +'"/><a id ="' + currItem.getKey() + '" class="listClick">';

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

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

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

                              i++;

                    }

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

                    $('#fakeHolder').html(htmlOutput);

$(".editableCell").change(function(){

                alert("please save me.");

         });

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

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

                              $(this).parent().parent().addClass("ui-btn-active");

                              navigateForward("State_Detail",  this.id );

                    });

          }

    return true;

}

2. For save your edited value, in the above alert("please save me.") function,

I would try to find the input id which match to the item key and get  item from workflow message and  then set the value to update workflow message, so when navigate to other screens, the value will be kept.

I haven't tried it by myself , but in theory, it should work.  As for the how listview UI part, by using css ,you would make it look like what you want.

Hope it help

Thanks

-Yan