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


Content Type (data grids, single entity data, 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.


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