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 components that you can drag onto a screen to add content such as data entry forms or maps. Our Palettes have been designed to create responsive screens, meaning that your application will adapt to the device you are viewing it on.

What do the items in a palette look like?

See Understanding 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

1. Content is added by dragging palette items onto a screen and dropping them.
2. 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.
3. 

Screens are design to contain information in tiles that respond to size of the screen you are working on, we call this responsive design and you can find out more about this topic as well as editing the positioning and size of objects in Sizing and Positioning Screen Content.

Before we look in more detail at using a a palette, it helps to understand structure of a typical screen, this is illustrated below. Click on the image to enlarge it. More information n this topic can be found in Screen Structure.

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.

1. Move it next to: dragging items onto another item will place it next to it.
2. 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:

1. Select the item on the screen.
2. In the properties window that opens, click on the Styles tab.
3. Scroll down to the Direction settings:
   1.  
4. Set the desired properties:
   1. Direction: row or column layout, defined as the main axis.
   2. Wrap: Whether or not the content should wrap around to the next line.
   3. Justify: the alignment along the main axis. For example, Flex Start will align a row to the left. 
   4. Align: the alignment perpendicular to the main axis. For example, Center will align items between the top and bottom of a row, or the for a column it aligns them between the left and right hand sides. 

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

There are two ways to edit the palette the items,

1. 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:
   1. Select the item in a palette, right click on it and select edit.
   2. To edit an item held within another item, such as editing a header on a complete screen, 
      1. right click on the outer item and select find in repository.
      2. drill down to find the item and double click to open its properties.
      3. Click on the styles tab.
      4. Edit the styles and save your changes.
2. 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.
   1.  Select the item in a palette, right click on it and select edit.
   2. Click on the Styles tab
   3. In the shared styles section, click the add button
   4. Complete the shared style as required
   5. Save all your changes.

Here is a worked example:

Creating New Items in a Palette

see Adding to a Palette.

Creating a New Palette

see Creating a Palette