Skip to Content
author's profile photo Former Member
Former Member

input field in listview cell

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.

cellbox.jpg (20.1 kB)
Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

1 Answer

  • Best Answer
    author's profile photo Former Member
    Former Member
    Posted on Aug 30, 2013 at 12:45 AM

    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


    listwithInput.png (55.9 kB)
    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.