List page with simple template

In this lesson we continue changing our existing application; as basis the code at the end of the previous lesson is used. The goal is to display structured data in form of list using a specific format, the listItemMultiLine. (Details of the List element and list columns are described in the API documentation.)

Alternating the TagsPage page

We introduce /mobile/notes/Tags.scolvo script file to encapsulate all TagsPage related logic in one place. We extend the TagsPage page (created in the menuStructure lesson) with a list populated with static data and displayed as simple items.

Definition of the Tags page

function displayTagsPage(originId) {
  var pageData = getTagsData();
  var pageDescriptor = {
    "TagsPage": {
      "TagsList": pageData
    }
  };
  display(TagsPage, pageDescriptor, originId);
}

function getTagsData() {
  return  [{"title": "First tag"},
          {"title": "Second tag"}];
}

page TagsPage {
  layout: vertical;
  template: general;
  settingsVisible: true;
  scolvoMenuVisible: true;

  list TagsList {
    template: listVerticalNormal;
    itemTemplate: listItemMultiLine;
    span: 0;
    filterVisible: true;

    actions: []
    columns: [
      mainText => title
    ]
  }
}

function onTagsPageLoaded(originId) {}

In order to display TagsPage we have to import /mobile/note/Tags.scolvo in /mobile.scolvo and use the new display function.

Changes in /mobile.scolvo

import {
  /mobile/note/Notes,
  /mobile/note/Tags
}

// ...

function onTag(originId) {
  displayTagsPage(originId);
}

// ...

Expected simple list behavior after compile

After completing this code, while pressing the menu item All we will have a list displaying two note item cards.

Using browser with light theme

The result of code in browser with light theme

The final code with listItemMultiLine template

After performing the changes described above, the final form of the scolvo script files should be as defined below:

/mobile.scolvo

import {
  /mobile/note/Notes,
  /mobile/note/Tags
}

menu defaultItem Notes {
  group Notes defaultItem All {
    item All,
    item Pinned
 },
 item Tags
}

function onAll(originId) {
  displayNotesPage(originId);
}

function onPinned(originId) {
  display(PinnedPage, {}, originId);
}

function onTags(originId) {
  displayTagsPage(originId);
}

page PinnedPage {
  layout: vertical;
  template: general;
  settingsVisible: true;
  scolvoMenuVisible: true;
}

function onPinnedPageLoaded(originId) {}

/mobile/note/Notes.scolvo

function displayNotesPage(originId) {
  var pageData = getData();
  var pageDescriptor = {
    "NotesPage": {
      "NotesList": pageData
    }
  };
  display(NotesPage, pageDescriptor, originId);
}

function getData() {
  return  [{"title": "First title","content": "First content"},
          {"title": "Second title","content": "Second content"}];
}

page NotesPage {
  layout: vertical;
  template: general;
  settingsVisible: true;
  scolvoMenuVisible: true;

  list NotesList {
    template: listVerticalNormal;
    itemTemplate: listItemCard;
    span: 0;
    filterVisible: true;

    actions: []
    columns: [
      title => title,
      text => content
    ]
  }
}

function onNotesPageLoaded(originId) {}

/mobile/note/Tags.scolvo

function displayTagsPage(originId) {
  var pageData = getTagsData();
  var pageDescriptor = {
    "TagsPage": {
      "TagsList": pageData
    }
  };
  display(TagsPage, pageDescriptor, originId);
}

function getTagsData() {
  return  [{"title": "First tag"},
          {"title": "Second tag"}];
}

page TagsPage {
  layout: vertical;
  template: general;
  settingsVisible: true;
  scolvoMenuVisible: true;

  list TagsList {
    template: listVerticalNormal;
    itemTemplate: listItemMultiLine;
    span: 0;
    filterVisible: true;

    actions: []
    columns: [
      mainText => title
    ]
  }
}

function onTagsPageLoaded(originId) {}

The content of the dictionary file is as below:

/mobile_dictionary_en.properties

menu_Notes_label=Notes
menu_Notes_icon=\ue956
menu_Notes_All_label=All
menu_Notes_Pinned_label=Pinned
menu_Tags_label=Tags
menu_Tags_icon=\ue93b