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 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 that will be used in the functional area of the App, as linked to the menu item. 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.
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 Notes are simply free format nots for the App Designer to use to add design notes or information for future developers. The Name field is for the name you wish to give your page series within your Evoke App design and the Description is your chosen description for the page series in the Evoke App design.
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.
Data Sources are the data areas held within the UI, structured by the Entities, that are used by the App pages and Functionality Actions in the App. 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). Data Sources are the place where Repository Data is retrieved and stored for use by the App and the 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
Pages define each of the screens displayed in your App. Each Page is made up of Segments. Segments can be any size and can have any number of Child segments within them. Each Segment can contain data, text, images, grids, etc. 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. Building a Page
provides an example of how to go about putting a new App Page 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:
Each Segment is structured based on its Content Type. Content Types may be:
Child Page Segments - The segment contains additional Segments as Child Segments
Data (Single entity) - The segment contains one or more Widgets populated from data from a single entity instance
Data (Multiple entities) - The segment contains a single Widget populated with data from multiple entity instances
Custom - The segment contains custom developed content
Blank - The segment contains no content
Additional information regarding Segments is available in the General
area of the UI Design
If a Segment contains data, actions or is linked to a data object (i.e. a selection, button, etc) then the structure 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 made up of a many Properties, from the base Entitiy, or temporary unbound-data areas as you wish.
Each Property must have an Editor Type
, a definition of the display widget ("Widget") that will define the display function. Widgets can be simple i.e. display the Property data value, provide a data entry textbox, display a button or selection box or they can call device features i.e. the device datepicker, they can incorporate image uploading
and any other screen function that you may require. This is the list of Widgets
available to use within Evoke
Please review the full user information for using Templates
where significant additional information is available
Each segment can be bound to a Data Source
which can be populated, displayed, updated, etc by the user, the Click Actions
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
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.
To help with the usability of your App, Evoke allows you to set Adaptations
against any Segment. 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
section, in the Pages area, is used to provide navigation to other pages within the app, as selected by the user from menus. Please refer to navigation
for more information.
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
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.
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.