KnowledgeBase

Search or browse in depth articles, software resources and videos on everything about Appward.

Table of contents

How to style a Flyout in apps

Friday August 19, 2022 - 3 min read

Flyout Properties

popDetails

BackColor: UserResource –> ScreenBackColor

Anchor: False

CaptionAliagnment:Left

CaptionFontSize: 16

CaptionFontWeight: Medium

CaptionMargin: 55

CaptionFontColorColor: UserResources –> AppwardWhite

HideHeader: False

HeaderBackColor: UserResources –> FlyoutHeaderColor

HeaderHeight: 40

Border Radius: 10,0,0,10

  • FlyoutHeader (This should NOT be a shape. It should look like this based on the settings described in the previous popDeatils properties)
    • Record specific buttons should be located in the header.
    • High usecase buttons should be near the header caption (ex: Add Copy, Share, etc)
    • Low usecase buttons (or destructive actions) such as delete should be near the right edge of the header (ex: Delete)
  • shpFlyoutPanel
    • Left: 0
    • Top: 40
    • Width: Same as popDetails (full width)
    • Height: Around 145-155 depending on the app and how much detail is in the header. Should stop at the bottom of the TabContainer or ScreenProgress and before the ScreenForm
    • BackColor: UserResource –> FlyoutPanelColor
    • BackStyle: None
    • ShowBorder: False
  • frmFlyoutForm
    • Left: 10
    • Top: 10px below shpFlyoutPanel
    • Height: Full height remaining -10 px. Should have a ScreenBind with following settings to handle exact sizing
      • BindType: Resize
      • BoundEdge: Right
      • MasterObject: MyParent
      • MasterEdge: Right
      • Distance: -10
    • Width: Full width remaining -10 px. Should have a ScreenBind with following settings to handle exact sizing
      • BindType: Resize
      • BoundEdge: Bottom
      • MasterObject: MyParent
      • MasterEdge: Bottom
      • Distance: -10
    • ShowBorder: False
    • BorderRadius: 5
  • & 5. These refer to the border Radius of popDetails. By setting the border radius to 10,0,0,10 this give the appearance of rounded corners on the left, yet it seems to come from beyond the right side of the screen by having squared edges on the right. 

Header details

  • btnClose – Refer to Flyout Logic for scripting and behavior
    • Top: 5
    • Left: 5
    • Width: 28
    • Height: 28
    • Style: Web
    • Caption: none
    • BackColor: UserResource –> AppwardDark
    • ForeColor: UserResource –> AppwardWhite
    • SelectedForeColor: UserResource –> AppwardLime
    • SelectedBackColor: UserResource –> AppwardDark
    • HoverColor: White,10
    • ShowBorder: False
    • BorderRadius: 14
    • Image: fas fa-arrow-right
    • ImageWidth: 15
    • ImageHeight: 15
    • ImageAlignment: Center
    • ImageRaidius: 0
  • PopupCaption
    • Refer to above popDetails Caption
  • lblRecordID
    • Left: 245 approx (Should be about 5px to right of caption)
    • Top: 10
    • Width: 40
    • Height: 20
    • Value: Should be a path to the RecordID int he Edit table under popMain
    • BackColor: UserResource –> AppwardWhite
    • ForColor: UserResource –> LabelForeColor
    • FontSize: 10
    • FontWeight: Normal
    • BorderRadius: 10
  • btnDelete – The color and general placement refer to any auxilary buttons as well (Copy/Share)
    • Left: 10px from the right
    • Top: 8
    • Width: 70
    • Height: 24
    • Caption: Delete
    • Image: fas fa-trash-alt
    • ImageHeight: 12
    • ImageWidth: 12
    • ImagePosition: Left
    • Colors: Refer to btnClose above.
  • imgType
    • Left: 10
    • Top: 55
    • Width: 95 approx
    • Height: 95 approx
    • Style: Fit although some apps may want stretch or fit expand. Case by case basis.
    • OnFileName: Path to the Image for the type, should point to the View table as the path is already available
    • ForeColor: UserResource –> FrameBorderColor
    • Initials: Path to the type name, should point to the View table as the path is already available
    • PlaceHolder: Image
    • FontSize: 11
    • ShowBorder: False
    • ShowBorderOnBlank: True
  • Main focus of the record
    •     Should include a caption and a label
    • Refer to Fonts for styling
  • Second focus of the record
    • Should include a caption and a label
    • Refer to Fonts for styling
  •  Tags (if applicable)
    • lblTagsHeader
      • Caption: Tags
      • Refer to Fonts for styling
    • btnEditTags
      • Height: 18
      • Width: 18
      • Image: fas fa-pencil-alt
      • ImageWidth: 15
      • ImageHeight: 15
      • ImageAlignment: Center
    • tagsTags
      • Source: Should point to the tags table
      • BoundColumn: TagID
      • BackColor: White,0
      • FontSize: 11
      • AllowRemove: True
  • tabContainer – Refrence Flyout TabContainer

Published by: