After Customize the HWC app List, Data is Not Comi... - SAP Community

Hi,

i Customize the listview (Refer the Following Code), But when i click on List view, Detail Page is Opening with blank Data. Can any One Help on this Issue.

My Cutomized List View Code.

if (destScreenKey === 'DisputeList123') {

try {

var message = getCurrentMessageValueCollection();

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

var items = itemList.getValue();

var numOfItems = items.length;

var i = 0;

alert(numOfItems);

// iterate through the results and build our list

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

htmlOutput += '<style> body{font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#51A0D5; font-size:13px;} </style>';

var firstOrder = '';

while (i < numOfItems) {

var currItem = items[i];

var _DisputeTitle = currItem.getData("DisputeList_TITLE_attribKey").getValue();

var _DisputeId = currItem.getData("DisputeList_CASEID_attribKey").getValue();

var _InvoiceNo = currItem.getData("DisputeList_INVOICENO_attribKey").getValue();

var _VendorInvNo = "";

try

{

_VendorInvNo = currItem.getData("DisputeList_VENDORINVNO_attribKey").getValue();

}

catch (err) {

_VendorInvNo ="";

}

var _DisputeStatus = "";

try

{

_DisputeStatus = currItem.getData("DisputeList_DISPUTESTATUS_attribKey").getValue();

}

catch (err) {

_DisputeStatus ="";

}

var _DisputeYear = currItem.getData("DisputeList_GJAHR_attribKey").getValue();

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

htmlOutput += '<div style="width:40%; float:left; font-size:15px; margin-top:2px; text-align:right;">Dispute Title:</div>';

htmlOutput += '<div style="width:60%; float:left; text-indent:10px; font-weight:bold; font-size:18px;">'

+ _DisputeTitle + '</div>';

htmlOutput += '<div style="clear:both; height:5px;"></div>';

htmlOutput += '<div style="width:40%; float:left; text-align:right;">Dispute ID:</div>';

htmlOutput += '<div style="width:60%; float:left; text-indent:10px; font-weight:bold; font-size:15px;">'

+ _DisputeId + '</div>';

htmlOutput += '<div style="clear:both; height:5px;"></div>';

htmlOutput += '<div style="width:40%; float:left; text-align:right;">Invoice No.:</div>';

htmlOutput += '<div style="width:60%; float:left; text-indent:10px; font-weight:bold; font-size:15px;">'

+ _InvoiceNo + '</div>';

htmlOutput += '<div style="clear:both; height:5px;"></div>';

htmlOutput += '<div style="width:40%; float:left; text-align:right;">Vendor Invoice ID:</div>';

htmlOutput += '<div style="width:60%; float:left; text-indent:10px; font-weight:bold; font-size:15px;">'

+ _VendorInvNo + '</div>';

htmlOutput += '<div style="clear:both; height:5px;"></div>';

htmlOutput += '<div style="width:40%; float:left; text-align:right;">Dispute Status:</div>';

htmlOutput += '<div style="width:60%; float:left; text-indent:10px; font-weight:bold; font-size:15px;">'

+ _DisputeStatus + '</div>';

htmlOutput += '<div style="clear:both; height:5px;"></div>';

htmlOutput += '<div style="background-color:#2c4e69; float:right; padding:5px; position:relative; margin-top:-26px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px">Year: <span style="font-weight:bold;">'+ _DisputeYear +' </span></div>';

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

i++;

}

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

// alert("4");

// append the html to the appropriate form depending on the key

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

if (listview.length > 0) {

var ul = $(listview[0]).find('ul[data-role="listview"]');

if (ul.length > 0) {

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

ul.html(htmlOutput);

ul.listview('refresh');

}

} else {

$('#DisputeListForm').children().eq(0).hide();

$('#DisputeListForm').children().eq(2).hide();

$('#DisputeListForm').children().eq(3).hide();

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

}

// add the listener based on the class added in the code above

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

navigateForward("DisputeListDetail", this.id);

if (isBlackBerry()) {

return;

}

});

}

catch (e) {

alert("got an exception: " + e);

}

}

SAP Managed Tags:
Mobile

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Accepted Solutions (0)

Answers (4)

Answers (4)

Found it working with the below code:

New code :

//add the listener based on the class added in the code above

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

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

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

//special case for bb

navigateForward("Detail_Screen", this.id );

if (isBlackBerry()) {

return;

}

});

Old code:

// add the listener based on the class added in the code above

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

navigateForward("Detail_Screen", this.id);

if (isBlackBerry()) {

return;

}

});

With new versions of SDKs, the old code is not working.

Add class="listClick" inside <li> tag.

Midhun VP

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Hi

I hope you have done all these customization in beforeNavigationForward method.

Use the beforeshowscreen or aftershowscreen. Because some times if you are replacing html in beforenavigationforward, it will not find the particular tag where .html() method used to push new html structure.

Have a try.

Regards

Yokesvaran Kumarasamy

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

i tried still same problem, after click on the listview Detail Page is opening But data is not coming

<li><a> tags are not closed in htmloutput.
You are going to display the customized listview in listview page. so why do you (var listview = $('div[id="supportViewList"]')) get the default listview, making null and pushing html structure.
when i had this requirement, i simply removed the listview in html along with javascript methods. if we are not removing it, data parsing will happen twice which affects performance.
created a new div tag like <div id="cusotmlistview"></div>" in html
then i pushed the list view $('#customlistview').html(htmloutput); Thats it. it was working.

Regards

Yokesvaran Kumarasamy

Hi Yokesvaran,

can you pls post the sample code project. with custom listview & Detail Page. Currently Customized Listview is displaying but when i click on the Listview Detail page is opening but data is not Coming.

Hi Krishna Vinjam,

In the below method "this.id" returns wrong value, I checked with my project.

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

navigateForward("DisputeListDetail", this.id);

if (isBlackBerry()) {

return;

}

});

For example,

In my project this.id returns 10001. but it should be like "Employee&<>10001", "Employee" is taken from the hybridapp_jqm.html
<div class="listview" screen="Employee_list" id="Employee" wrap_data="false">

You can check the id value from the default list javascript which resides in html.

Additionally i have added alert("target-"+target.id).

function itemSelected( target ) {

alert("target-"+target.id);

navigateForward("EmployeeDetail", target.id );

}

target.id should match with this.id in custom.js file.

So in custom.js navigation forward method should look like below

navigateForward("EmployeeDetail", "Employee&<>"+this.id );

I hope this will fix your issue.

Regards

Yokesvaran Kumarasamy

Also where is the closing tags for <li><a ?

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Are performing performing these steps:

1. Drag and drop MBO to the designer result in two screen; list screen and detail screen

2. Write custom code for the listview. It overwrites the existing list. Hence the list key exists and in the detail screen the list item keys will be available.

Add "return true" in the end of the if loop.

Keep and alert inside the $(".listClick").click(function() {} and check whether it goes inside.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

i update the closing tags for <li><a ? Also. i put the Alert also & it is going inside and it is showing the this.id Values also correct. Details Screen is Opening But Data is Not Coming ,

without customization is working fine. Please help me.

After adding the closing tags have you added the "return true;" inside the if loop ?

Give the screen shots of the detail screen, WF design and properties of the editbox inside detail screen and properties of the listview existing in the list screen.

Hi, i am attaching the Screen Shots here, After Drag&Drop the MBO, i got 2 Screens --> Listview & Detail. in Custom.js i done the changes in Listview Screen (Customized Listview), in this click i call the Detail Page, this is Right process/ Not?

OR i need to Create One More Screen For Customization of Listview and from that Screen i need to call the Details Screen?

Please check & Update me if u found any mistake. Are tell me the Right Process...

What you have done looks right. Just check whether the key DisputeList is the latest one. In that drop down if you are able to see the latest one select that ex: DisputeList1, DisputeList2 etc.. from these select the latest key for the list ( DisputeList2 ).

i create the New Project Still Same Problem? Any work around for this?

. this code should have worked. Anyway finally do this. Drag and drop the HTMLView from the control to the list screen and give default value (in properties) as <div id="HTMLList"></div> and give any key.

In the custom code replace

$('#DisputeListForm').children().eq(0).hide();

$('#DisputeListForm').children().eq(2).hide();

$('#DisputeListForm').children().eq(3).hide();

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

with

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

topOfFormElem1.innerHTML = htmlOutput;

still same Problem, Screen is Opening But Data is Not Coming, u have any Test project which contains this Functionality? pls share me

Ask a Question

Top Q&A Solution Author

User

Count

88

10

10

9

7

7

6

5

4

4