Evoke Pages using Headers - Evoke Product Help

Headers are usually used to provide information about a data segment and control actions to assist with navigation or management of a data grid. The example shown here shows a header "timesheets summary" on a single entity data segment and the "..." indicates that there are header actions or navigation available via a header menu. There are two tabs that need to be considered for a header:

Header General
Header Actions

The Headers General area allows you to select a header and identify it. The options in the header general area are:

Has Header (checkbox) - checked indicates that the selected segment has a header, unchecked means the current segment does not have a header
Header Text - The text that appears in the header. To add Dynamic headers add {data} that allows you to include the contents of a data field in the header see "Dynamic Headers".
Header Text (tabbed) - The text that appears in the header when it is adapted to the "tabbed" view
Header Text (alternate) - The text that appears in the header when an adaptation is used to show the alternate header text
Header text alignment (dropdown options: left, center, right) - the alignment of the text in the header.
Has Header Actions (checkbox) - when checked the Header Actions tab will appear and and actions ellipsis will be displayed in the header
Actions Description - the help/descriptive text that will appear in a "tooltip" that is displayed when the app user hovers over the action ellipsis in the header
Support Unpinning - enables "Pin/Unpin" style functionality with an pin in the header of the segment that allows the segment to be pinned or unpinned to a small tab.
Support collapse/expand - enables "Accordion" style functionality with an arrow in the header of the segment that allows the segment to collapse (shrink to only show the header) or expand to show all the data as well as the header.
Whole header clickable - works in conjunction with the "support collapse/expland" option - if ticked the whole header (not just the ) is clickable to collapse or expand the segment.

The header Actions area is where you can define actions that are accessed via the header of this segment. There are two separate areas of Actions:

System Implemented Actions

System implemented actions include a number of standard, single function actions that can be applied to most Segments.

Other common actions available, that can be selected from the standard system implemented actions are:

New is supported - provides a header menu entry "new" that creates new empty Entity in the selected Data Source
Show New Button in header - same as New but displays a + symbol in the header next to the ellipsis
Delete current is supported - provides a header menu entry "delete" that deletes the currently selected Entity from the selected Data Source
Show Delete button in header - same as Delete but displays a - symbol in the header next to the ellipsis
Remove current is supported - provides a header menu entry "remove" that removes the currently selected Entity from the selected Data Source without deleting it (uncoupling)
Delete all is supported - allows deleting all the rows in a datagrid for things like a shopping cart clear option.
Nudge Up/Down are supported - allows for re-ordering lists - Nudge up function moves a selected item up 1 place in a list and Nudge down moves the item down 1 place.
Remove all is supported - allows removing (without deleting) all the rows in a datagrid for things like a shopping cart clear option.
(Custom) Refresh - provides a link in Visual Studio for custom table/grid/Data Source refresh if this is required.
Tick Select is Supported - Tick Select adds an action to a list of items such that, when selected, displays an additional column (see image left) with check boxes. This allows multiple items to be selected and further actions performed on them e.g. delete all selected, etc.

Custom Actions (which include Evoke Click Actions)

The custom actions options allow you to create/manage multiple header menu options, each with their own Caption, that will appear in the menu and their own ActionID that is used to identify the actions to be associated with the menu item.

Each menu item can also have an Action Type of:
- Custom - A Custom Implemented Action
- Remove - A system implemented action that removes (without deleting) the currently selected row from the grid displayed within the page segment
- Delete - A system implemented action that deletes the currently selected row from the grid displayed within the page segment
- ClickActiontrigger - An action that invokes the Evoke Click Action Component library using the associated ActionID
  These custom actions can be made visable/not visable or enabled/disabled per user or user group by using the Evoke Access Control options (please see description below).

The elypsis on the Custom Actions offers an option for the Expanded/Advanced View of the custom actions.

This pops a new window showing all the click actions that have been defined and offering a new option of Access Control.

The "define" button allows you to set up either "User Groups" or "Data" access control on the actions that are defined here.

A detailed description of how to configure access control is available on the configure access control user help page.

Use the visable/not visable option to determine is the action should be visable for a specific user/group of users and the enabled/disabled options to control when this action is active or not for a user or group of users.

The option to Pin or Unpin a segment, in the header tab of a segment (see image below left) is turned on or off using the checkbox.

Checking this box shows a pin

in the header of the segment that allows the segment to be pinned or unpinned to a small tab.

A demonstration of the use of pinning and unpinning is available in the Example App and also shown in the image on the right.

In addition to turning Pinning and Unpinning of a Segment on in the Header of a segment, it is also possible to Pin/Unpin segments using:

The colour of the small tab, that the Segment is reduced to when unpinned, is able to be defined in the Colors tab in the tab ear color.

Clicking on the small tab will toggle the segment being slid in from the side/top/bottom that it has moved to.

In addition to static text you can add dynamic text to your segment headers based on any data held in an Data Source.

When typing in the "text for the Header" if you include "{data}" then a new option will be presented "Header data property path".

Use the DataSource Builder to select the specific data path/property whose contents you wish to be included in the header text, at the point where you have included "{data}".