todo

• Screen, repository, palette, components
  • point to themes and palettes
• Types of component and what they look like
  •  forms
  • grids
  • etc
• Data backed components - link out
• Parent child and preferred parent

This page is for application designers. It explains the basic principles for how to add components from the palette as well as features to help you.

Overview

If you are new to PhixFlow and designing screens for an application, start with the Building Applications training course.

...

In most cases, a component's parent is fairly obvious - and you can find it by clicking just outside the area of the component. In some cases, it is not obvious. Remember also that with pinned components, you could drag a component from an area, which is its parent, into another area, so that the component now appears in an area that is not actually its parent.

There are a number of ways of determining a component's parent:

• Open the details for the component; at the top of the details, the name of the parent will be shown - to get more details, click on the quick link Parent to open the details for the parent
• Right-click on the component in the form and select Find in Explorer - this gives you a useful way of visually seeing what the parent is, and indeed how other components on the form relate to this component

Moving a component to a new parent

To move a component to a new parent, press Shift and drag it to the new parent. Commonly this is used to move components inside an area to a new area.

To confirm that the component has moved to the new parent, remember the techniques to find the parent of a component: Find a component's parent

Preventing components from being dragged

Sometimes, when laying out a form, you may find it interesting to "lock" a component in place, to stop yourself dragging it to a new position by accident. To do this, in the component properties → Positional Settings section, tick Prevent Dragging.

How tos

Reminder of the training, specific techniques.

Build Up a basic form

Note that there are no fancy flow stuff for this.

What data do you need to show - 

1. Create screen 
2. Open palette
3. Add Basic Components > Form, and name
4. Click on the screen to open the properties for your area. In shared styles you will see that this has some default shared styles applied.
5. Palette Labelled fields > Add labelled fields you need. Click to see properties
   • The Labelled fields palette has composite items - see theBasic Settings checkbox.
   • there are two parts, a static text label and the data field. Making them composite means
   • They move as if they are one thing
   • The name you give to the items is used as the text for the label.
6. Attributes list - open stream > attributes section or expand for list in repository
7. Drag from attribute onto form

Moving things around

To make sure you are moving a whole parent/child set of things and moving them within an area it is easiest to move things in the Layouts list in the repository

Animation of dragging in the 

Creating Clear Spaces on a Screen

You can divide up a screen into multiple parts, called dashboard elements, using the Add options. In the repository, you can see the different elements listed under the dahboard.

...

The following videos will introduce the basic concepts of how you can drag fields into a screen: Videos in widget connector had links to:

...

Insert excerpt
_Banners _Banners name screen nopanel true

Overview

A screen is made up of components (the smallest building block) and layouts (a group of components) arranged into layers. Components are areas, static text labels and fields, which display data from a table. Multi-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 one layer is the parents for another layer. This structure, combined with appropriate styling, creates a responsive design that adapts to both desktop and mobile devices. The nested structure for screens is illustrated below. Click on the image to make it larger: 

Image Added

Components

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

Components are available from any palette. For example, one of the Theme 2.1 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.	Data components may not be available on the palette. Instead, 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. You can create these yourself by combining components or you can use the layouts from a palette (recommended). For example, a simple layout for a tile is illustrated below:

• Tile is an area container with styling to control its size and the layout of its child components.
  • Header is an area which contains
    • an 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, 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 contains a set of buttons. 
    The application user will use the buttons to make changes to data will appear in the body.

Image Added

Finding Layouts and Components

Anchor
formBuildingFindComponentParent formBuildingFindComponentParent

It can be very useful to find a layout, component or container. There are two ways to do this:

Using Layers

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

• on the canvas to highlight it in the Layers pane
• in the Layouts pane to highlight it on the canvas.

If the layer section is not visible click 

Insert excerpt
_layer_slider _layer_slider nopanel true

. 

Using Find in Repository

Right-click any item on an unlocked screen and select

Insert excerpt
_repository_find _repository_find nopanel true

 Alternatively, to search the repository, expand the Components section and navigate to the component. The position of the components on a screen is reflected in their order and nesting in the repository list. 

Image Added

Tip
To check whether a component is shared with multiple applications, open its properties and check the Parent Details section, which names the application or package to which the component belongs. For example a component that is shared between several applications has a package as its parent; see Package.

Moving Components

Insert excerpt
Moving Components on a Screen Moving Components on a Screen nopanel true

  See Moving Components on a Screen.