Evoke Pages - Evoke Product Help

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

In addition you can used the buttons to define the:

Actions on load
Actions on save
Actions on cancel

These options allow you to be taken to a Click Action set up page (see image left) and define specific actions that will take pace when the screen is first loaded, when changes in a Page Series are saved (the tick), the actions are performed immediately after the database save, and when changes in a PageSeries are cancelled (the cross).
The Evoke Click Actions are a comprehensive, powerful library of functions that you can call in relation to buttons, navigation, menus, etc.

The example screen (for actions on load on the left) uses a couple of simple Evoke Click Actions ("RunSelection" and "RetreiveRelatedData") but there are many additional Click Actions that you can use and we encourage you to review the full list of Click Actions.

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

Data Paging with a Data Source

If you have a large amount of data that could be transferred/transmitted from your database to your app, a slower communications network or even a lot of local DOM (screen format) construction in your app then you may wish to turn on "Data Paging" for a Data Source. Consider you have 3,000 product records and you want a customer to have the option to review all of your products, retrieving, transmitting to the app and then formating in the UI on a mobile phone across a 4G or even wifi connection could take a long time (both communications and screen rendering/processing locally). This can cause a significant delay, in your app, before the data is eventually displayed as all of the data will be transmitted and all of the screens will be formatted in the browser before display. While putting up a message (see loading data msg as defined in the Template General Settings ) may help the solution is Evoke Data Paging.

Access Control

Evoke offers Access Control to provide completely unique App experiences for each user, based on their user group/level, Page Series the page is displayed in or data (either entered or retrieved from the database). Access control allows you to provide different security levels for different users, provide unique navigation routes through the app, show/hide different menu options for different groups, show/hide different data or information on Pages, follow different paths through the app, or enable/disable control of a function such as a menu item, so the user can see it but maybe not use it until they upgrade to a premium account or similar. Please review a full description of Evoke Access Control.

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 (Content Type).
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 Segments 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.

The drop down menu on the UI design tab in the page designer provides multiple useful options when designing and editing Pages/Screens.
A full explanation of the UI design menu options (List mode, Layout mode, Bordered mode, Property name display/hide/show, Validate, Show validation list, suspend/resume adaptations, Serach for segment guid, etc.) is available by clicking on the link.

There is a representation of the Page (screen), that will use as much screen space as is available to display a representation of the actual app screen that a user will see, in edit/design mode 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 (including the Content Type and Access Control) and the Data Content of that Segment (including configuration of the CardView Data content type); 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 ellipsis 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 accommodate 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 relevant to all the Pages in the Page Series.

Use the Build button to populate the DataSource field.

Data Grids

Data Grids are displayed by mutli-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 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 designer 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 (Evoke's internal Component Library) associated with them. Evoke Click Actions are powerful 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 and it you want to 'comment out' a click action temporarily there is a special "Action id" of {ignore} available in the drop down 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, sideways to Siblings, up to parents/grandparents; All navigation
Retrieving related data associated with selected data
Print PDF from Page/Segment to create a local or stored PDF of a printable report. Please follow link to see configuration setup of this click action.
Conditional, If Then Else ElseIf etc, click actions.
Saving data, cancelling changes, setting static data values.
Validation, UI enable/disable, forcing events such as Save/cancel, opening external browsers sessions (to display a web page etc)
Plus multiple other actions

Using Click Actions

Wherever Click Actions can be used, you have the option of setting a Caption, Action Type and Action (please see Navigation/Grid actions example opposite). The exceptions to this are actions on page load and actions on button click/selection that do not have a separate caption.

When the menu (identified by the caption) is clicked by the user then all of the Click Actions with the associated ActionID will be actioned.

Access to the click action setup screen (shown above) is either via the ellipsis menu option, the "actions on row click/tap" button in the general settings of a Template, or simply by right clicking a template segment while in WYSIWYG mode.

Here you set the following options:

Action id.
Action Type
row-action/header-action menu only

In addition to any of the additional actions definitions and details e.g. datasource, segmentid, etc. as identified in the Click Actions List

A couple of things to remember/consider:
On a multi entity DataSource - a datagrid (potentially multiple records) you should set the "current" instance/selected row if you are using a row action menu.
There are a few ways to do this. Either the first click action on the datagrid could be SETCURRENTASSELECTEDROW or on the Navigation screen there is a checkbox to set the "current" when the row action menu is displayed. You can also set the first row of a datagrid as the current in a template "general settings" but that method is not relevant for grid row navigation menu action.
If the "current" instance is not set then the "current" instance of "TheMultiEntityDatasource.current.xxxx" is not set and if you use that data (assign, display, etc.) it will NOT be correct - it could be from a different record, blank, etc.
Consider that you click the menu at the end of item 3 in the list - you have not selected the record by clicking on the line (just clicked the menu), it is not the "current" instance unless the checkbox is set or a click action actioned. There are multiple valid reasons why an app developer may not want to set the "current" instance when a menu is clicked or a line clicked on - however if you intend to rely on/access the "current" instance then it must be set.

In addition, an "*" in the click actions "Action id" field means:

If Row/header/tabear action only is ticked - any action with an ActionID will also include this action
If Row/header/tabear action only is not ticked - it is the same as "blank" - it will alwasy be actioned when the row is clicked on/selected.

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.