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.
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
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 Entity, 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 or 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 that incorporates examples of each widget together with examples of the setup information for each.
For each Template you are also able to specify the following:
Access Control - by data or user group for each property
Tooltip - a simple help expression that the user sees when hovering over the widget
Prompt - the name of the field or prompt for what is to be input, including the prompt position
Column headers - for multiple entity data grids
Advanced Search, Filter and Sort options - for the user to search, sort etc on multiple entity grids
Functionality Actions - use of Evoke's Click Actions
Plus multiple other options
User Interface Design
Designing a user interface
for your app could not be easier with Evoke. You are able to add segment, adjust them, alter colours and sizing, create navigation, add click actions, specify adaptations for different devices, populate data and manipulate it, and much more.
Each segment can be bound to a Data Source
which can be populated, displayed, updated, etc by the user, the Click Actions
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 separately 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 separately), Layout Mode (all the segments separately 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 an Automatic Adaptation
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 a full list of current click actions
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
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 of Evoke.