Evoke Pages

Page Series
A Page Series in Evoke is a discrete area of your app. Each Page Series can have as many Pages (Screens) as you wish and as detailed in Menus, each menu item is linked to a Page Series. In the Page Series area of Evoke you can add as many Page Series' as you need for your App.
Each Page Series in your app is listed under "Page Series Names" and the Elypsis menu allows you to add new Page Series.
Every "new" app created by Evoke has 3 default Page Series' - a login page series and 2 blank Page Series (Page Series1 amd Page Series2) for you to change and use prior to creating new Page Series'.
There are options to be selected for each Page Series:
  • The Name field is for the name you wish to give your page series within your Evoke App design

  • The Description is your chosen (free format) description for the page series in the Evoke App design.

  • The Notes are simply free format notes for the App Designer to use to add design notes or information for future developers.

  • Select the Entry page for your Page Series from the drop down list of available Pages. This is the Page navigated to when the menu item is clicked that is linked to this Page Series.

  • The Partial offline enabled setting for a page series allows you to indicate whether the page series will be available if the offline database setting is set to Partial and the device on which the native app is running does not currently have a live data connection. The offline database setting can be found on the Generate Web App page.


Pages
Each Page Series is made up of Pages and, again, you can have as many Pages as you need in a Page Series. The Pages in a Page Series are all the pages (screens/UI) that will be used in the functional area of the App, defined as a Page Series and linked to the menu item.
Using the elypsis menu in the "pages" header you can create a new page that is blank or; if the same Page is used elsewhere in the App, then you can "link" Pages, which means that any changes are reflected in all the linked pages; or you can import a copy of another Page, so that you can modify a copy of an existing Page to create a new Page.

Data Sources
Data Sources are the data areas held within the UI that are populated with data from your backend database so that this data can be displayed, updated, added to, deleted, etc.
Data Sources are structured by the Entity definitions and are used throughout the Pages (screens) of the app design.
Each Page Series has its own set of defined Data Sources. Data Sources are the means by which in memory data (in the App) is bound onto visible data (within the UI). There is also the possibility to define Refined DataSources (mirror datasources) that can be sorted and searched. Data Sources are more fully described in the Data Sources section and are the places where Repository/Database Data is retrieved to (via selections) and stored for use by the App and then returned (saved) to the Repository.
Populating a Data Source
Data Sources are usually populated with information, from the database, for display and manipulation within the app or as entry forms for new information that is to be written back to the database by the app e.g. a sales order. There are several ways to populate a Data Source, these are explained further in Populating Data Sources.



Page Designer
Click on a Page name in the Pages Series section and you are taken to the Evoke Page Designer. Pages define each of the screens displayed in your App. Each Page is made up of multiple Segments.
Segments can be any size and can have any number of Child segments within them, so you can have many levels of embedded segments if you wish.
Each Segment can contain data, text, images, grids, etc. and is structured in the General tab area.
Individual segments can be arranged in Rows or Columns and in this way you can have the configuration (look and feel) of a Page that you want.
Segments are structured by Templates and can be bound onto a Data Source for display and manipulation of data.
Add, Remove, Clone or manipulate Segments on a page using the Adjust tab in the Page UI design where additional information explaining Segements can also be found.

Building a Page provides an example of how to go about putting a basic new App Page (screen) together.

Main Tab Areas in Pages Section
There are four main areas within the Pages Section of Evoke. The links below allow you to explore the options in these areas in detail:
  • UI Design - The UI design section of Evoke allows for the design of Pages that will be used in your App. It is structured by a WhatYouSeeIsWhatYouGet (WYSIWYG) image of the screen on the left and a series of tabs, on the right, that assist with the structuring of the page. The following links provide quick access to information relating to each tab:

    • The General tab is structured into 3 sections. the first two provide configuration settings for the currently selected Segment and the Data Content of that Segment; the third section provides configuration settings for the currently displayed page design.

    • The Adjust (Managing Segments) tab is where you can add, remove or adjust segments.

    • The Headers tab allows you to structure Segment headers. Segment headers are usually used to provide information about a data segment but can also have an elypsis menu that allows for both navigation and access to the Evoke Click Actions.

    • The Spacing tab is used to provide specific spacing settings for segments, data and other screen components on the current Page (screen) design.

    • The Colors tab is used to define the colors for various segment components/widgets. If colors were set in a theme they can be redefined for each device type/device operating system for the specific page.

    • The Navigation tab is used to provide navigation to other pages within the app, as selected by the user from menus.

    • The Adaptations tab allows you to set, amend and manage UI Adaptations. Adaptations are what adjust each page to accomodate the screen size and shape that the App is running on. They also allow you to alter the look and feel of a Page to suit the requirements of your App. Using Adaptations you can show or hide, segments, columns or data within the segment, navigation options, alternate prompts or headings. You can merge segments to tabs and resize them as well as many more automatic Evoke adaptations. Please review the full list of current Evoke Adaptations. Adaptations can also be invoked by the Evoke Click Actions

  • Data Templates - If a Segment contains data, actions or is linked to a data object (i.e. a selection, button, etc) then the structure and how the data/image/button/etc is displayed on your screen is controlled by a Template. Templates are specified as either Single Entity templates or Multiple Entity templates. For each template you need to specify a name and a base Entity type or use one of the multiple, temporary, unbound-data areas available on each page. Templates are also used to link widgets that will select data from your database to populate Data Sources. For more information please click for a full description of Data Templates.

  • General Details - The General Details tab allows you to define the attributes and top level details of the selected page, such as the Page Name, title, specific a page background, etc.

  • Data Sources - The Data Sources tab offers a quick summary of the Data Sources set up in the Page Series Data Source area for this Page Series.
    You can add new Data Sources for the Page Series, Change existing ones, remove a data Source, etc.
    Changes made here will be releavnt to all the Pages in the Page Series.



Data Grids
Data Grids are displayed by mutl-entity templates. Data Grids are useful for displaying a table of data or multiple records populated into a datasource. Data Grids can have headers and footers with column totals. Individual column headers along with automated search and sort options are set in the Template settings.
Display
While you are designing your pages, Evoke allows you to use a work space that is as big as your computer monitor will allow. The default viewing format is WYSIWYG and you can see the Page exactly as it would look to your users. However, it is likely that you will want to see what the Page looks like when it is displayed on a smartwatch or an iphone, maybe a small tablet, etc. Evoke allows you to select the device operating system (iOS, Android, Windows, Linux, etc) and seperately the device, choosing from watches, phones, tablets, desktops, etc or even just selecting the screen height and width to be able to see the Page as your users will.
Your WYSIWYG display will auto adapt (see below) as it changes size and a width/height size display of the design surface is always available to you.
To help with the Page design you can also set the viewing format to Bordered Mode (showing all the segments bordered seperately), Layout Mode (all the segments seperately without Adaptations), List Mode (a list of the Segments and each segments attributes) or you can simply suspend Adaptations on your WYSIWYG view.
The designer surface settings allow you reset the WYSIWYG display area so that it displays based on a specific device (iphone, smartwatch, android tablet, desktop device, etc - as shown below) by selecting from the dropdown list in the "device" list. Alternatively you can specifically set a screen size for the deigner WYSIWYG area (using the Height and width options) or change the styling to see how the difference device cultures change the look and feel of your screen design (using the "Styling" drop down list.
The Size to Fit Button instantly returns the WYSIWYG Designer area back to fill all the available space in the design area.
The Rotate Button is used, when viewing the WYSIWYG as if the page was on a Device, to rotate the screen in the WYSIWYG as if a mobile phone or tablet had been rotated in someone hands.



Evoke Click Actions
Actions, such as entering a Page Series for the first time, clicking on a button on a Page, selecting a piece of data, navigating to another part of the App, entering data, etc can all have Evoke click actions associated with them. Evoke Click Actions are powerfull functional commands that can be processed during the normal running of your App. You can use a single Click Action or process multiple Click Actions based on a single action.
There are many different uses for Click Actions, you can review the full click actions list.
Just some of the many functions of Click Actions are:
  • Populating Data Sources with information/data from the database, Saving data back to the backend database.

  • Assigning, adding, manipulating data/creating new records in the database

  • Processing Adaptations, showing hidden Segments, etc

  • Navigation; navigate down to Child pages, sidways to Siblings, up to parents/grandparents; All navigation

  • Retreiving related data associated with selected data

  • Validation, UI enable/disable, forcing events such as Save/cancel, opening external browers sessions (to display a web page etc)

  • Plus multiple other actions

Scrolling
If you have a long page or want to display a lot of data then sometimes you need scrolling. Evoke automatically enables scrolling in a data grid if there is more data than space allows to be displayed. If you want to scroll to see a long page in Evoke set the "height" option in general tab/Designer Surface to a large number e.g. 2400px.
Individual segments or an entire Page (screen) can be enabled for scrolling. To enable scrolling on a single segment that is not a Data Grid (remember data grids are automatically scrollable) use the "Is scrolling enabled" option (described in the General tab). In order to be part of a scrollable container segments must have a Sizing Method of Auto or Fixed to that the size of the screen can be calculated and maintained during the scrolling.
Other Options
There are many other features, options and powerful functions available within the Evoke pages section, including the addition of watermarks to pages, the ability to override any of the App Styling/Theme settings, etc. To see all of the functions available in Evoke Pages please contact us for a full demonstration.