Pages - General

The General tab, within Pages, is structured into 3 sections:
  • Current Segment

    The Current Segment section provides configuration settings for the currently selected segment on the Page design.
    • Segment/Widget id (Chosen name of the segment that is used in the Visual Studio project to identify it)

    • Sizing Method

    • Is scroll enabled - used to enable scrolling on a segment - see Sizing Method

    • Suppress Content Resizing

    • Size Value (%) - The size of the segment in the context of the "sizing method"

    • Content Type (datagrids, single entity data, chart/graph, image, components, custom, etc)

    • Access Control

  • Data Content

    The Data Content section provides configuration settings for the content of the currently selected segment on the Page design.
    • Template - Selects the single or multi-entity template that you want to provide the data format of the Template

    • Data Source - Selects the Data Source (Evoke data area) that this segment is bound onto (remember that Data Sources need to be Populated.

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


Content Type (data grids, single entity data, components, custom, etc)
The Content Type section provides configuration settings for the content of the currently selected segment on the Page design.
  • Child Page Segments

    Selecting Child Page Segments defines the currently selected segment as a segment that has one or multiple child segments. Each of the child segments can be further defined using the "Content Type" selection when that segment is selected as the current segment.

  • Data (Single Entity)

    The segment contains one of more widgets that are populated from a single entity data source. See example image right.


  • Data (Multiple Entities)

    The segment contains single widget that are populated with data from multiple entity instances - a Data Grid.
    See example image right.


  • Chart/Graph

    The segment contains a data-driven chart or graph diagram.
    See example image right.



  • Component

    The segment contains a special Evoke Component that allows you to add:





  • Custom

    When Selected a further option of "Custom Content Type" is offered (see example image right). The Custom Content type is set to:
    • Custom Code - The segment contains custom developed content. This will create a place holder or "Evoke code hook" inside the Visual Studio project that will allow the custom content to be added at that point.

    • Image (static) - The segment contains an only image that has a static datapath (see Segment images for more information.

    • Image (databound) - The segment contains an only image that has a datapath that is determined by a datasource property value (see Segment images for more information.




  • Blank

    The segment contains no content. Select this content type if the segment is to just represent and area of blank space on the User Interface.



Segment Images
When a Content Type of custom is selected and a Custom Content type of either Static Image or Databound image are selected then the following options should be completed:
  • Content Center Style - Select the style of centering for your image a) none b) center vertically only c) center horizontally only d) center both vertically and horizontally.

  • Image Path Prefix - where to store the images. If they are not physically stored in the database (this example) then they can be stored anywhere on the server as long as this is accessible to the app. In this case, we have specified a path of "Images/Common/Products" this will store the images within the Visual Studio project for this App that was deployed to a web server. In this case .../Web/Images/Common/Products. If the final folder does not exist (e.g. Products) then please remember to create this AND set the permissions of the folder so that images can be written to it. (for databound images only)

  • Image databind Path - the datasource and property to be used to identify the image (for databound images only).

  • Image Name (for static images) - the location (selected via the choose button) of the image in your computer file system (for static images only).

  • Image Path Suffix - the name of the image photo is provided by the uniquely initialied GUID value, this suffix field defines the filetype extension that you specified to be added. In this example we have used .JPG which opens all images uploaded from mobile devices and those scanned/stored on a desktop computer. (for databound images only)

  • Disable Browser Cache - used in conjunction with the Widget ID during the image upload to ensure that the new image is displayed immediately and not a cached image. In this example this is not checked and with therefore not disable the browser cache. (for databound images only)

  • Image Opacity - used to set the opacity (transparency) of the image. Pick from the dropdown list of % transparent to make the image.

  • Image Stretching - used to set the maximum amount of image stretching to be performed e.g. only up to 200% original image size etc.

  • Image fixed size - used to identify the fixed size of an image (width, height) - image will be displayed as this size.

  • Show Image Zoom Slider - used to force a "zoom slider" to be displayed on a desktop computer so that the image can be zoomed without touch screen controls.

  • Is Clickable - is the image clickable allowing a click on the image to open a new page or perform other actions, if checked this is used in conjunction with the next field "Actions on Click/Tap".

  • Click Actions - opens the Evoke Click Actions allowing navigation to another page or any of the other powerful Evoke click actions.




Charts and Graphs
When a Content Type of Chart/Graph is selected then the following options should be completed:
  • Chart Type - Choose a chart type of Area, Bar, Donut, Line, Percent Area, Percent Bar, Pie, Stacked Area, Stacked Bar, Setp-up Bar, Waterfall.

  • Caption - insert the caption to appear above the chart/graph

  • Sub-caption - insert the sub-caption to appear below the caption

  • Show Legends - Checkbox, if checked show the data legends below the chart/graph.

  • Orientation - The plotting orientation of the chart/graph (only available on certain graphs).

  • Horizontal label - The label to be displayed along the horizontal axis (if one is present) of the chart/graph (only available on certain graphs).

  • Vertical label - The label to be displayed along the vertical axis (if one is present) of the chart/graph. (only available on certain graphs).

  • Axis ticks - The graduation points (values) to be used along the value axis of the chart/graph (only available on certain graphs).

  • Dataset count - The number of discrete datasets to be displayed within the chart/graph. This setting is only used for chart/graph types capable of displaying multiple datasets (Area, Bar, Line, Percent Area, Percent Bar, Stacked Area, Stacked Bar and Step-Up Bar).

  • Dataset name -The display name of the dataset.

  • Dataset datasource path - The datasource for the dataset. This must be either the name of a collective datasource or a property within a datasource that represents a collection (list) of entities.

  • Property for names - This property (for all datasets) is to be used to obtain the values that will form the graduation points (and labels) along the opposite axis to the value axis. Each discrete value for this property will be represented by a dedicated labelled graduation point.

  • Property for values - This property (for all datasets) is to be used to obtain the plotting value for each record within the dataset.

  • Group by - This setting allows you to define (if required) how records within the underlying datasource are to be grouped together to form compound/computed values for chart/graph plotting purposes.

  • Group by property - This property (for all datasets) is to be used to obtain the grouping value for each underlying datasource record.

  • Restrict records by - This setting allows you to define (if required) whether only the first x number of records or the last x number of records within the underlying datasource are to be used for plotting purposes.

  • Restriction size - The maximum number of records to be used in the graph (if the above setting is not ‘None’).