Intel appframework ui: how to pass data in a simple list-detail app

Question

I try to learn the Intel Appframework UI.

I want to build a simple offline app with just two panels. One panel contains a list with items (links), the second panel should display details to the selected item. The details in the second panel should be filled with javascript.

How do I pass data (for example a numeric item_id) to the second panel, so that my javascript can access it and fill it into the details page?

Can I use a part of the url of the links in the list, like this:

<li>
   <a href="#detailpanel?item=3"> Item 3 </a>
</li>

If yes, how do I get the information back in the details page? Or do I need to use javacript-links?

score 4 · Accepted Answer · answered Oct 03 '13 at 11:36

In the intel appframework forum is an answer to my question: https://forums.html5dev-software.intel.com/viewtopic.php?f=26&t=4478

So the solution is to use urls like like this:

<li>
    <a href="#detailpanel/3"> Item 3 </a>
</li>

We than attach a handler to the target panel, which gets the url from the browser. The framework has set the url to the new value when the callback is called:

$("#detailpanel").bind("loadpanel",function(evt){
  //url would be #detailpanel/N
  params = document.location.hash.split('/');
  if(params.length > 1){
    showDetails(params[1]);
  }
  else {
    console.log('on_load_detailpanel: detailnr missing');
  }
})

Works. This is the better solution, especially if #detailpanel is visited from many other pages, because you don't have to add a javascript handler to any caller navigating to #detailpanel. — dmoebius, Oct 04 '13 at 10:20

score 1 · Answer 2 · answered Sep 30 '13 at 16:39

I'm not an Appframework expert, but here's the simplest solution I came up with:

Since you're on a single-page app, you can store the currently selected item in a global data structure:

<script type="text/javascript">
  var dialogData = {
    "currentItemNo": -1,
    // possibly other dialog data
  };
</script>

Then in your HTML you can set it like this:

<li>
  <a href="#detailpanel" onclick="dialogData.currentItemNo=3">Item 3</a>
<li>

and access it when the user navigates to the page:

<script type="text/javascript">
  $("#detailpanel").bind("loadpanel", function () {
    console.log("You clicked " + dialogData.currentItemNo);
  });
</script>

Note that both the click handler and AF's anchor handler get called (the click handler first).

In case your list is generated from a template you might want to use a more elegant solution to access the current item number:

<li>
  <a href="#detailpanel" data-itemno="3" onclick="dialogData.currentItemNo=this.dataset.itemno">Item 3</a>
<li>

Yes, this works. Still I think there should be a way without onclick-javascript call in the links. — Meier, Oct 01 '13 at 08:56

Intel appframework ui: how to pass data in a simple list-detail app

2 Answers2