.. index:: Scolvo script

.. _list_page_with_card_template:

List page with card template
============================

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

Defining a list page
~~~~~~~~~~~~~~~~~~~~

We extend the Notes page (created in the :ref:`previous lesson <menu_structure_result>`)
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.

.. code-block:: scolvoscript
  :caption: Changes in /mobile.scolvo
  :linenos:

  
  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).

.. code-block:: scolvoscript
  :caption: Definition of the /mobile/note/Notes.scolvo script
  :linenos:

  
  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**

.. image:: images/lesson_4_browser_light.png
   :width: 600
   :align: center

The result of code in browser with light theme


.. _list_page_with_card_result:

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:

.. code-block:: scolvoscript
  :caption: /mobile.scolvo
  :linenos:

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

.. code-block:: scolvoscript
  :caption: /mobile/note/Notes.scolvo
  :linenos:

  
  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:

.. code-block:: properties
  :caption: /mobile_dictionary_en.properties
  :linenos:

  
  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
  
..