[support-michael]

Updated October 24, 2013 to be compatible with MobiOne 2.3 and greater and iOS 7. See revision info below highlighted in red.

Hi All,

This example demonstrates programmatic creation of a custom list within a MobiOne web client. Key techniques demonstrated in this example include:
* how to build and tear down a list in javascript
* how to determine the selected list-item and its index
* how to resize a panel’s content height using the new data-layout-content-height attribute mechanism

1. Download custom-list example
Following is the source code for custom-list. Unzip it and open the home.mobi file in the Design Center. See attachment custom-list-20131024.zip

2. Launch the custom-list example and get familiar
Click the “Run in Test Center” button and the custom-list webapp will launch in the Test Center. Be sure not to regenerate/overwrite the home_custom.js file as it contains the logic for creating list-items dynamically and adding them to our list.
See attachment page-flow-50.png
This simple webapp consist of 3 screens. From the home screen the user enters the number of items he wants in the list. Click “Create List” and the UI transitions to the list.mobi screen which consists of a list that is updated during the screen transition process. Click any list-item and the UI transitions to the landing.mobi screen. From the landing screen the user can transition back to the list screen or to the home screen.

3. Create your own custom list – Design the screen containing the list
The process involves using the Design Center to layout a screen with a list that you want to customize programmatically.
– Open the list.mobi screen in the Design Center to see my example list. It consists of a Panel + Rounded List + Rounded List-Item.
– Enable the panel’s vertical scroller
– Add Rounded List (I removed the list’s footer and one of the example list-items)
– Link to the list-item to the landing.mobi screen
See attachment list-props-70.png
4. Write some JavaScript
I chose to trigger the list population from within the the prePageTransition() function found in the home_custom.js file (see below). This function detects that the user interface is transitioning to the list screen and calls the buildList() function. Once the list has been populated the postPageTransition() function wires up the DOM selection events so that a select list-items will transition to the landing.mobi screen when clicked. Note JQuery is used extensively throughout.
See attachment custlist-transition.png
The buildList() function does the following:
a) it clears out the list of old list-items
b) looks up the number of desired list items specified on the home screen
c) build the list-items
d) inserts the list-items into the list as they are created
e) set panel’s new contentarea height using the data-layout-content-height (see line 92)

At step-c, I use the HTML code that implements the list-item in my list.mobi screen as a template for creating list-items dynamically. I like to include the snippet of HTML in the function as a guide for the html my code will create. See the commented out <li> lines. Once the list is populated with new list-items I need to resize the panel’s content-area height. I do this by setting a data-layout-content-height attribute on panel’s scroller <div> component. The MobiOne layout engine will use the data-layout-content-height attribute to override the static size of the panel. See attachment custlist-buildlist.png

From the List screen, when the user selects a list-item the UI transitions to the landing screen. Again I use the prePageTransition() function to detect the transition to the landing screen and update it with information from the selected list-item. The updateLandingScreen() function uses the global variable “event” and accesses its “srcElement” to get to the HTML <li> element that implements the list-item.
Revision 20131024 – The previous version of this example experienced a problem when run on iOS 7 due to a change in webkit.

//revised 20131024 - fixes ios7 issue
function updateLandingScreen() {
  //find the <li> root of the selected list-item
  var selectedItem = $(event.srcElement).closest('li[data-listitem-index]');

  //get the index of the selected list-item and update details
  var idx = $(selectedItem).attr('data-listitem-index');
  
  //get the selected list-item's label and update details
  var label = $('li[data-listitem-index=' + idx + '] .m1-text').text();      
  $('#m1-landing-labelTxt').text(label);
  $('#m1-landing-indexTxt').text(idx);
}

5. Debug it
I used the Test Center’s JavaScript debugger to set breakpoints and inspect variables along the way.
See attachment debug.png
6. Feedback
Please provide feedback .

Attachments:

You must be logged in to view attached files.

[jcarm]

This message has not been recovered.

[jcarm]

This message has not been recovered.

[jcarm]

This message has not been recovered.

[support-michael]

This message has not been recovered.

[jcarm]

This message has not been recovered.

[cmstephan]

this example helped a lot – Thanks

I am still struggeling with an additional problem.
It would be perfect if you could expand the example in a way that on the “landing” screen the Value/Text of the selected List item is displayed.
I have no clue how to get this information.

Thanks
Christopher

[cmstephan]

I found a solution in the forum for this issue which works for me.
With a custom javascript function and a unique id it works.

See
http://www.genuitec.com/support-genuitec/viewtopic.php?f=8&t=1837&hilit=onListSelect

[cmstephan]

Hi thanks for the update – the issues I have is that the action in data-action-click-id=”action20″ is a moving target.
Whenever I change anything in the code the actionXX is changing,
Is there any way to directly adress the action?

Otherwise the example works perfect – THANKS
Christopher

[Albatros78]

Hello Wayne,

I have downloaded zip example.
With MB1 1.4.3 I am unable to open mobi file with an error message “form not supported”

I have update to 1.5.0 and now my MB1 software does not start with “an error Occur.. look at his log file..”
here my log files

Oups I have no option to upload my error log file ?

Thanks for you help

[Albatros78]

Need to remove 1.4.3 and delete C:\Users\Axel\.mobione to have possibility to install a fresh 1.5 either an error was displayed

[Unknown Author]

This is a great example.

I’m working on an application that’s a combination of this and the local storage demos. The lists are created based on the number of items and content of localstorage/dB.

I’m still a beginner at Javascript. So, some questions:

1. If I need to access two distinct datasets, is it best to keep them in seperate databases, versus using localstorage for all?

2. Is there a quick and easy method for returning the total number of local storage entries/rows?

3. Same question for web database entries/rows?

-1TC

[Brandon]

EDIT: Nevermind, I got it working. But, when I click on the list it highlights and stays highlighted, even when I click on another item.

i am trying to get this list to populate from a database source. While it is populating from the database it is not keeping the list items actions (it doesnt evel look like they are being selected, they dont change color) or updating the panel height. i have tried using a screen call and custom javascript ( I mainly want the javascript call since when they click on the list it updates a text field and area on the same page).

Here is my buildlist function, as you can see my screens name is newNote.
I really want the selected item to runt he javascript getNote();

function buildList() {

  
     db.transaction(function (tx) {
  
      tx.executeSql('SELECT * FROM DEMO', [], function (tx, results) {

  var itemCnt;
  var list = $('#m1-noteHome-list1'); //lookup <ul>
  // lookup number of listItems from home screen
  itemCnt = results.rows.length;//$('select[name="listItemsCnt"]')[0].value;
  itemCnt = +itemCnt // convert to number

  //remove current list items
  list.children('#m1-noteHome-listItem1').remove();

  //build list 
  firstItemClass = 'm1-first';
  internalItemClass = ' m1-clickable m1-highlight m1-hyperlink-internal';
  lastItemClass = ' m1-last';
  for (i=0; i < itemCnt; i++) {
// template code for each list-item
/*
<li id="m1-list-listItem1" class="m1-first m1-last m1-clickable m1-highlight 
       m1-hyperlink-internal" data-action-click-id="action0" data-listitem-index="1">
    <div id="m1-list-listItem1-inner-div">
         <img id="m1-list-accessoryImage1" class="m1-clickable" 
             src="res/images/tableRowDisclosureIndicator.png"/>
         <div id="m1-list-text2" class="m1-text">Item</div>
    </div>
</li>
*/    
    
   //build list css class list
   cssClassList = i==1 ? firstItemClass : '';
   cssClassList += i==itemCnt ? lastItemClass : '';
   cssClassList += internalItemClass;
    
 
    list.append(
  
     '<li id="m1-noteHome-listItem1" class="' + cssClassList + '" ' +
     '    data-action-click-id="action0" data-listitem-index="' + results.rows.item(i).text + '">'+
     '   <div id="m1-noteHome-listItem1-inner-div">'+
     '      <img id="m1-noteHome-accessoryImage1" class="m1-clickable" '+
     '         src="res/images/tableRowDisclosureIndicator.png"/>'+
     '       <div id="m1-noteHome-text1" class="m1-text">'+ results.rows.item(i).title + '</div>'+
     '   </div>'+
     '</li>');
  }

//  var panelHt = 50 + itemCnt * 65;
  
});
   });        
        
  //Update panel's content height, set the ht value on the panel's 
  //  scroller <div> data-layout-content-height attribute.
  //  panelHt = header ht + listItems ht + footer ht
 var panelHt = 30 + 15 * 65;
    
  $('#m1-noteHome-panel1-scroller').attr('data-layout-content-height', panelHt+65);
   
}
  

Thanks

[Unknown Author]

This line of code stopped working for me under Mobione 2.0.2-dev

var selectListItemLabel=$(“div > div”, $(eventsrcElement)).text();

Is there a substitute/update for this or do I need to wait on a new update to Mobione? I have a deployed app that relies on dynamic lists.

-1TC

[support-octavio]

Hi 1thinchip,

I’ve reported your issue with dev team and are researching, will follow up as soon as we know more.

[Author]

Posts