List & Detail Starter

ListsCRUDNavigation

A scrollable master list where each row opens a full detail page. This is the backbone of catalogs, feeds, inboxes and most data-driven apps. Swap the placeholder data for your own and you have a working browse-and-view experience.

What's included

✓

Master list rendered from a simple data array.

✓

Detail page that reads the selected item and renders it.

✓

Back navigation from detail to list.

✓

DedrisFramework components and dedris.css pre-linked.

Use this template

terminal

cordova create myApp com.dedris.myapp MyApp --template cordova-template-dedris-list
cd myApp
cordova run android

Project structure

www/ ├── index.html # list + detail host ├── css/dedris.css # DedrisFramework styles ├── js/data.js # placeholder items ├── js/app.js # render + navigation └── pages/ ├── list.html └── detail.html

Rendering the list

www/js/app.js

items.forEach(function (item) {
  var row = document.createElement("a");
  row.className = "dx-list__item";
  row.textContent = item.title;
  row.href = "#detail/" + item.id;
  list.appendChild(row);
});

← All templates Start building

Catalog

Master list preview