Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Page in draft: this should be the concept page for screen layouts

Overview

lay out application screen using themes, palettes and components;  seeGUI Screen Layouts

This section is about how you create a screen with all the bits you need using the components and templates from the palette.

Other aspects covered in other topics are

  1. Setting up Data ??Links
  2. Compiling views ??Links
  3. Details about Styles.??Links


Panel
borderColor#00374F
titleColorwhite
titleBGColor#00374F
borderStylesolid
titleSections on this page

Table of Contents
maxLevel3
indent12px
stylenone

Image Removed

Select a Screen

  1. From the application Home window, select Design.
  2. Either select one of the listed screens; Remember you can change the view from card to list.

Screens tabs

  • Palettes
  • Component Categories
  • Templates
  • Styles
  • Menus
  • Images

Create

  1. Click Create New to create a new screen.
  2. Select a screen template. This will give you pre-set layouts such as: 
    • full screen or popup
    • Basic screen layout, such as data grid or form
    • desktop or mobile
  3. Enter the name for the screen and it's description, then click Confirm.
  4. PhixFlow opens a new screen canvas on the left and the palette on the right.
  5. To add components to the screen, drag them in from the palette.

Make sure the ERD and Screen incontext screen text is OK and following the same standards

Use the palette to add components; see link

You can set up data to back all or part of a screen.

In the palette Data Components section, drag in one of the data icons, grid, chart, graph or card.

In the popup, Sselect the table or view that contains the data for this screen then click Confirm / OK

PhixFlow adds the data component to the screen, with its properties.

  This goes intow Data Views. 

  Table popup has Show View, Show Table and Show properties

Alternatively, if the table does not already exist, click Create, then enter the name and description and  click Create.

Screen options - Windows control

How do you select Full screen or popup

Layers icon

As you add components to the screen, some are nested. Parents and children. You can see this in the layers panel on the left. Click the layers tab on the left to show the layers list. Image Removed

For example on the right.

Select something on your screen to see it/them highlighted in the layers list.

Selected items outlined in blue

Parent item outlined in orange.

On the screen, the parent, container component is also highlighted.


Image Removed

Usually an application screen has some combination of

  • multiple data records, for example grid, chart, graph or in cards.
  • selected data records, for example a set of fields (form) or card
  • fields for user interaction and their lables
  • buttons
  • menus and navigation


When it comes to creating actions, you can wire actionflows to different components on the screen

  • button - on-click - action, such as update or delete
  • default double-click action on a data view, such as a grid. such as open recorcd.

When you open an existing screen, it is locked by default. This means the screen cannot be edited, for example by selecting or moving componentss. In design mode, right click on the screen area to unlock it. The previous locked status is remembered when switching back to design mode from app mode. To test buttons and actions that you have configured for a screen, you must switch to 

Insert excerpt
_app_mode
_app_mode
nopaneltrue
.

Chart buttons

Charts provides the standard grid icons.

They also provides the following icons:

Image Added

Refresh the chart.

Image Added

Select an existing (or predefined) Filter or create, delete and modify Filters. This causes the chart to refresh and display only those entries which match the selected Filter.

Image Added

Select an existing (or predefined) multi-column Sort Order or create, delete and modify Sort Orders. Note that data is ordered across all records which are implied by the Filter, not just the current page of data.

Image Added

Opens the download data form allowing the user to export just the selected items or all data on the chart as either an Excel file, a CSV (comma separated) file or as an HTML document.

Image Added

Display the number of records in the data, and the number of records currently being displayed.

Grid Context Menus

Right-click on a data grid to open the context menu. The options available depend on whether you right-click in the header row or in a grid row.

Header Context Menu

Sort AscendingSort the data in this grid by this column in ascending order (0 to 9, A to Z)
Sort DescendingSort the data in this grid by this column in descending order (9 to 0, Z to A)
Freeze ColumnFreeze the column to keep it visible when you scroll through the other columns.
Unfreeze all ColumnsUnfreeze all the columns so that the will all move if the grid is scrolled.
Set Flex ColumnFlex columns adjust their size automatically to fit the space.
Hide this Column

Use these options to expand or collapse grid columns in a screen.

Hidden columns do not appear in the grid. To re-show a hidden column, right-click any grid row and select Show Attributes for View <viewName> → Hide this column


Show Hidden Columns

Row Context Menu

Show Stream Item DetailsOpens a window with all the information contained in that grid row
Show Attributes for View <viewName>

Opens a list of all of the attributes (column headers) for this stream view.  Attributes formatted in italics are present in the stream but are hidden in the grid.

To change whether an attribute is hidden or visible, right-click the attribute and select Show this column or Hide this column.


Links

Panel
borderColor#00374F
titleColorwhite
titleBGColor#00374F
borderStylesolid
titleOther pages in this topic

Child pages (Children Display)