Pages - Headers

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

Header General
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

  • 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

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


Headers Actions






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






Pinning and Unpinning Segments
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.