.. index:: Scolvo script .. _list_page_with_simple_template: List page with simple template ============================== In this lesson we continue changing our existing application; as basis the code at :ref:`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 :ref:`List element` and :ref:`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 :ref:`menuStructure lesson `) with a list populated with static data and displayed as simple items. .. code-block:: scolvoscript :caption: Definition of the Tags page :linenos: 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. .. code-block:: scolvoscript :caption: Changes in /mobile.scolvo :linenos: 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** .. image:: images/lesson_4_browser_light.png :width: 600 :align: center The result of code in browser with light theme .. _list_page_with_simple_template_result: 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: .. code-block:: scolvoscript :caption: /mobile.scolvo :linenos: 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) {} .. .. 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) {} .. .. code-block:: scolvoscript :caption: /mobile/note/Tags.scolvo :linenos: 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: .. 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 ..