| Insert excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
|
What is a Palette?
A palette is part of a Template Package, it can also be part of an application, and it contains ready-made template components that you can drag onto a screen canvas to add content. Palette components can be simple, such as data entry forms or maps. Our Palettes have been a data field. They can also be multi-component layouts that provide sections of a screen with a header, data display and action buttons. Layouts can even be a complete screen. Layouts and components can display data, enable application users to enter data, or can display information from external sites, such as a Google map.
Screen Structure
You can create your own layouts and add them to palettes; see Changing or Creating a Palette. However, we recommend you start with the palettes designed by the PhixFlow team. These layouts are designed to create responsive screens , meaning that your application will adapt rearrange to suit the device you are viewing it on.
What do the items in a palette look like?
See About Template Packages for an overview of the styling or to see the examples in an application for:
- Theme 2.1
- open the Theme 2.1 app and select one of the options to see an example.
Using a Palette
Palettes are divided into logical groups, such as complete screens or tiles (which make up sections on a screen).
Adding Screen Content
- Content is added by dragging palette items onto a screen and dropping them.
- Where appropriate PhixFlow highlights the area onto which it is recommended the selected item be dropped, as shown below. This is known as a Preferred Parent.
size and aspect ratio of the device on which the application is running.
| Excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
The palettes available to your application are:
To use a palette, drag layouts and components onto the screen canvas; see Adding Screen Content. If you close the palette tab, in the screen canvas toolbar, click
|
Searching the Palette
From PhixFlow version 10.1 a search option has been added to the top of the palettes area that locates template components that contain the text typed in the search box.
What do Components Look Like?
For an overview of the general style of different palettes, see Understanding Template Packages. To see the example content using the Serene Grey palette, load the Serene Grey example application.
Each item in a palette has a description that can be viewed by hovering the mouse cursor over a specific item. In addition it is possible to view a palette item by:
- Right-clicking on a palette item
- Selecting Display
- The item will be displayed in a popup window
Palettes are divided into sections for different screen components. Many are prebuilt to make it easy to add:
- complete screens
- layouts and tiles, in which several components are combined to make sections of a screen
- individual components, such as data fields
Understanding the Layer Structure of a Screen
Before we look in more detail at using a a palette, it helps to understand structure that the components of a typical screen , this is illustrated below. are grouped into containers which form layers, as shown in the following image.
- Click on the image to enlarge it
- Download for printing: PDF Quick Reference Sheet
How do I Rearrange Components?
Click on any item on your screen, and it will be highlighted in the layouts section on the left. To move components within the Layouts, drag it to the desired position.
- Move it next to: dragging items onto another item will place it next to it.
- Move an item inside another: Hold shift + drag the item onto the item you would like to place it in.
Changing the Layout Direction
Typically, components designed to house other components, such as a Tiles, will use CSS Flex to handle the layout of their content. This means content is set out in rows or columns. Palettes items icons will contain an arrow in their icon to indicate the direction of content. You can change the direction using the layout properties.
To do this:
| Anchor | ||||
|---|---|---|---|---|
|
Adding Screen Content
To add content to a screen:
- Drag components from the palette and drop them onto the canvas.
- If PhixFlow recognises a suitable container for the component, it highlights the container, as shown below. This is known as a preferred parent container; see Component Categories and Preferred Parents.
Moving Components
See Moving Content on a Screen.
Adding Tiles
| Anchor | ||||
|---|---|---|---|---|
|
The Serene Grey palette includes sections for complete screens and for tiles. The complete screens have tile containers, in which the responsive design settings are configured. When you drag a tile from the palette onto the screen canvas, PhixFlow highlights suitable tile containers where you can drop the tile.
If you create your own screen, to use tiles from the palette, you must first provide a suitable tile container by:
- either dragging in a tile container from the palette
- or adding an area component and setting the responsive design options; see Sizing and Positioning Screen Content.
Adding Components to a Tile
| Anchor | ||||
|---|---|---|---|---|
|
To add a component into a tile that you have added to your screen, Shift-drag the component from the palette and drop it into the tile.
Changing a Layout Direction
| Anchor | ||||
|---|---|---|---|---|
|
Tile containers and tiles use the CSS Flex option to specify the layout of contained components as being in either columns or rows. In the palette, the icon for a tile has an arrow to show which direction its contained components will flow.
To change the flow direction:
- Click on a component on the canvas to find it in the layers panel
- If necessary, identify the container for the component and its siblings.
- Right-click the name of the parent and click
.Insert excerpt _edit _edit nopanel true - PhixFlow opens the component's
Insert excerpt _property_tabs _property_tabs nopanel true - Click the
and scroll down to the Direction section:Insert excerpt _property_tabs _property_tabs name style nopanel true 
- Set:
- Direction: either Row or Column. This provides the main axis along which components flow.
- Wrap: whether or not the content should Wrap around to the next line.
- Justify:
- how components align along the main axis. For example, Flex Start
- aligns a row to the left.
- Align:
- how components align perpendicular to the main axis. For example, Center
-
- for a row: aligns components between the top and bottom of a row
- for a column
- : aligns
- components between the left and right
See Component for more details
How do I Add Tiles?
Tiles need to sit within the Tile Container, this ensures they layout responsively and looks the way we intended. To add a tile simply drag it onto any complete screen and drop it on the highlighted tile container.
If you have created a screen from scratch make sure you add a tile container before adding tiles.
Adding content within a Tile
To add a component into a tile use SHIFT+drag and then drop the item in the desired location.
Editing the Palette Items
- of
This includes items already added to a screen both in your application and those used by others in your organisation.
There are two ways to edit the palette the items,
- Editing the Whole Palette: you may wish to change the style of all items in a palette, for example to add a company logo or change the colour scheme to that of your company. To perform these changes:
- Select the item in a palette, right click on it and select edit.
- To edit an item held within another item, such as editing a header on a complete screen,
- right click on the outer item and select find in repository.
- drill down to find the item and double click to open its properties.
- Click on the styles tab.
- Edit the styles and save your changes.
- Editing palette items in isolation: If you want to edit a palette item so that it does not change existing items the best method to do this is create a style to override any existing style.
- Select the item in a palette, right click on it and select edit.
- Click on the Styles tab
- In the shared styles section, click the add button
- Complete the shared style as required
- Save all your changes.
Here is a worked example:
| Iframe | ||||||
|---|---|---|---|---|---|---|
|
Creating New Items in a Palette
see Adding to a Palette.
Creating a New Palette
see Creating a Palette- the column.
See also: