List page with card template

In this lesson we will continue with our existing application use the code at the end of the previous lesson, where the goal is to display structured data in form of list using card format. (Details of the List element and list columns are described in the API documentation.)

Defining a list page

We extend the Notes page (created in the previous lesson) with a list populated with static data and displayed as a card.

Scripting hints

• Small files: We split Scolvo scripts into separate files in order to keep it understandable for humans. In one file we usually keep same subdomain script parts together.

• Naming convention: As finally all script segments will be built in one file it is of crucial importance to have good naming convention.

• Global objects: Global variables and function names refer to page object e.g.: displayNotesPage.

• Child element names in the page object: Page element names have strong relation to page’s name e.g.: NotesPageSaveButton.

Define separate display function with logic

As a first step we have created a more complex display function displayNotesPage to prepare data for the list page. We import the note specific functionality from the Notes.scolvo script file and use the displayNotesPage in the appropriate menu event.

Note

It is important to remove the old version of the NotesPage and corresponding on loaded function with name onNotesPageLoaded from the mobile.scolvo script to not interfere with the new definitions.

Changes in /mobile.scolvo

import {
  /mobile/note/Notes
}

// ...

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

// ...

In the Notes.scolvo script we have prepared static data for the pageDescriptor object. The structure of this object follows the definition of the page object. NotesPage contains a list named NotesList where the template is listVerticalNormal and the itemTemplate is listItemCard. The listItemCard type uses two attributes: title and text. We have indicated the mapping of these attributes to the keys of the data structure (title, content).

Definition of the /mobile/note/Notes.scolvo script

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) {}

Expected 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 list page card template

After performing the changes described above, the final form of the mobile.scolvo and Notes.scolvo file should be as defined below:

/mobile.scolvo

import {
  /mobile/note/Notes
}

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) {
  display(TagsPage, {}, originId);
}

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

function onPinnedPageLoaded(originId) {}

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

function onTagsPageLoaded(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) {}

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