What is a Palette?

A palette contains ready-made components that you can drag onto a screen canvas to add content. Palette components can be simple, such as 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.

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 that will rearrange to suit the size and aspect ratio of the device on which the application is running.The palettes available to your application are:

• the basic palettes provided with every PhixFlow installation.
• for applications created in version 9.0 and later, the palettes provided by the template package selected when you created the application, for example Serene Grey.
• any palettes included in a package that you added to your application; see Package.
• any palettes you created for the application; see Changing or Creating a Palette.

To use a palette, drag layouts and components onto the screen canvas; see Using a Palette and Adding Screen Content. 

If you close the palette tab, in the screen canvas toolbar, click  Palette to reopen it.

Before we look in more detail at using a palette, it helps to understand that the components of a screen 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.

Moving Components

It is not always easy to see how components are grouped into containers when working on the screen canvas. We recommend that to move any component or layout, you use the  Layers panel on the left. 

On the screen canvas, click the component you want to move

PhixFlow highlights the component in the layout panel. This means you can easily decide if you need to move just the component, or if you need to move its container. You can also see where in the layer you need to move it to ensure it has the correct parent container.

In the layouts panel, drag the selected component to its new position in the list.

If you want to move components within the screen canvas, PhixFlow needs to know whether the drop location should be

• a sibling component, that the dragged component goes next to.
  In this case, simply drag and drop a component.
• the parent container, that the dragged component goes into.
  In this case, press the Shift key as you drag and drop the component

Adding Tiles 

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 

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 

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:

1. Click on a component on the screen to find it in the layers panel.
2. If necessary, identify the container for the component and its siblings.
3. Right-click the name of the parent and click  Edit.
4. PhixFlow opens the component properties. Click the  Style tab
5. Scroll down to the Direction section:
    
6. 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 of the column.

See also:

• Component properties
• Sizing and Positioning Screen Content