Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
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 Tiles. 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 the Layers are one layer is other layers will adapt , click
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: |
|
|
|
|
Layouts
Layouts are groups of preconfigured components that have been preconfigured. You can create these yourself by combining components or you can use the pre-built layouts from a palette (recommended). For example, a simple layout for a tile is illustrated below:
- Tile is the container, its styling makes the area look like a tile and controls an area container with styling to control its size and the layout of its child objectscomponents.
- 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.
Finding Layouts and Components
Anchor | ||||
---|---|---|---|---|
|
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 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 | ||||||
---|---|---|---|---|---|---|
|
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 , 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. |
Excerpt | name | MovingComponents
Moving Components
Insert excerpt | ||
---|---|---|
|
|
In the Layers Section
The layers section will automatically highlight your selected screen item making it easy to find:
Click and drag your item to change its position
|
|
On Screen
Click and hold on a layout or component on your screen and then:
- Either drag it to the desired location and drop it. This creates a sibling relationship.
For example, if you drop a field on top of another field they appear next to each other. - Or hold Shift and drag the component to the desired location. This will drop it inside the other component. This creates a parent child relationship.
In the Repository
Click and drag a layout or components in theSpecial Cases
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.
Composite Component
Form Fields are composite Components
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.