Versions Compared

Old Version 28

changes.mady.by.user Fiona Sargeant

Saved on

compared with

New Version Current

changes.mady.by.user Anthony George

Saved on

Key

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

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

This page is for application designers. It explains how the structure of a screen is made up of layouts and components.

Overview

A screen is made up of components (the smallest building block) and layouts (a group of components) arranged into layers. Components are items such as areas, static text labels and form fields, which display data from a table. Layouts are items such as a Tile Button Bar or TileMulti-component layouts can be simple, such a a label and a field, or more complex parts of a screen with responsive design, these are called tiles. Layouts can also be full screens.

Screen Layers

A typical screen has a layered structure, in which the Layers are one layer is the parents for other layersanother layer. This structure, combined with appropriate styling, creates a responsive design that will adapt adapts to both desktop and mobile devices. The nested structure for screens is illustrated below. Click on the image to make it larger: 

Components

These Components are the most basic building blocks that are combined to design a screen.

Components are available from any palette, for example theme . For example, one of the Theme 2.1 they can be found under palettes has the Basic Layouts. For every component you add, you need to give it a name and specify the formatting using the Component properties. It's a good idea to include a meaningful description too.

The basic components are:


Containers

Data Fields

Text Fields

Data Components

Containers are designed to hold other components

Data fields are designed to display data from an attribute.

Text fields are designed to be labels.

These Data components may not be available directly from on the palette. You can create a data component by dragging a stream onto a dashboardInstead, your application has default components that it uses when you drag a table or attribute onto the screen canvas. PhixFlow prompts you to choose a:

  • area
  • form
  • card container
  • true/false field
  • date field
  • date-time field
  • number field
  • string field
  • URL display
  • drop-down
  • fixed drop-down
  • dynamic text: text varies depends on backing data.
  • static text: you specify the text you want to appear
  • grid
  • pie chart
  • line graph
  • horizontal bar graph
  • vertical bar graph
  • card


Layouts

Layouts are groups of preconfigured components that have been preconfigured. You can create these yourself by combining and styling components or you can use the pre-built layouts from a palette (recommended). For example, a simple layout is for a tile is illustrated below:

  • Tile contains the styles which make the area look lie a tile and controls  is an area container with styling to control its size and the layout of its child objectscomponents.
    • Header
    ,
    •  is an area which contains
      • an
    icon and
      • icon 
      • a static text text field for the header.
    • Body, in the illustration, the body area is empty. This is where you can add data components,
    a simple area that controls the layout of items places inside it, including the addition of
    • such as a grid displaying table data, or form fields. The body area has styling to control its size and the layout of its child components. It also has spacing around its edge.
    • Footer, area which
    houses
    • contains a set of buttons
    used for updating content associated to the tile
    • . 
      The application user will use the buttons to make changes to data will appear in the body.

Finding Layouts and Components
Anchor
formBuildingFindComponentParent
formBuildingFindComponentParent

It can be very useful to find a layout, component or the items which contains themcontainer. There are two ways to achieve do this:

Using

the

Layers

The Layers navigator pane is expandable from the left hand side. Selecting of the screen canvas. Select an item from :

  • on the canvas
will
  • to highlight it in the
layouts, and selecting an item
  • Layers pane
  • in the Layouts
with
  • pane to highlight it on the canvas.

If the layer section is not visible click 

Insert excerpt
_layer_slider
_layer_slider
nopaneltrue
. 

Using

find

Find in Repository

Right-click any item on an unlocked screen and select

Insert excerpt
_repository_find
_repository_find
nopaneltrue
 Alternatively, to search the repository can be manually searched, simply expand the  Insert excerpt_components_componentsnopaneltrue branch and expand the Components section and navigate to the desired itemcomponent. The position of the components on a screen is reflected in their order and nesting in the repository list. 


Tip

For the selected Layout or Component, To check whether a component is shared with multiple applications, open its properties and check the Parent Details section at the top of the properties tab indicates the , which names the application or package to which it the component belongs. For example a component that is shared between several applications will have has a package as it's parentits parent; see Package.

Moving

Layouts and

Components

On Screen

Click and hold on a layout or component

  • Drag it to the desired location to create a sibling relationship.
    1. Dragging in this way creates a sibling relationship. For example, if you drag ad drop a field on top of another field they appear next to each other.
  • Or hold shift and drag it to the desired location to create a parent child relationship.
    1. Shift-drag creates a parent child relationship, where your dragged item drops into an appropriate container.

    • In the Repository

    Click and drag them in the Insert excerpt_components_componentsnopaneltruesection of the repository to change their position on the screen.
  • To move a layout or component into a new container, hold Shift and drag it to the new container. Commonly this is used to move one item inside another item.

    • Special Cases

    NameDescriptionExamplePrevent Dragging

    Components can be marked with Prevent Dragging, this stops an item from being moved on a screen. It is however still moveable within the repository. This setting can be found in the items Properties → Design tab → Position Settings section.

    In the example below we may want to fix the header in a set location, and therefore set it to Prevent Dragging.

     Image Removed

    Composite Component

    Composite components are a set of components grouped into a special layout that is essentially locked and moves as a single component. New items cannot be added to a composite component while they are a composite. The for enabling an disabling a composite component are available in Properties →  Basic Settings → Composite Component

    Form Fields are composite Components

    Image Removed

    Preferred ParentComponents marked with a preferred parent will be placed inside a designated parent object.

    In the example below a tile is being dragged onto a screen from the palette. The tile container is highlighted in blue as it is the preferred parent of the tile.

    Image Removed

    PinnedPinned objects have an absolute position and therefore will be moved where they are dragged. Components can be pinned using right-click → Unpin/pin Selected Object

    Insert excerpt
    Moving Components on a Screen
    Moving Components on a Screen
    nopaneltrue
      See Moving Components on a Screen.