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.

Image AddedYou 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 does 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.
• Theme 2
  • Go to the repository → Packages → Theme 2.
  • Open the T2 - Example Dashboard
  • Click the Generate Data button if there is not data displayed.

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. Image Removed

size and aspect ratio of the device on which the application is running. 

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.

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

Image Removed

• 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.

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 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. Newer Palettes items 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. Image Removed 
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 Properties for more details

How do I Add More Tiles?

To add a component to a tile, SHIFT+drag them into the tile body.

If you want more structure to your tile, add the Field Collection component to add a column to the tile. You can add a column with:

• a fixed width, designed to contain a set of fields.
• an Auto Size column, which will take up all available space.

How do I Add Buttons?

To add buttons to your application, use the Theme 2 – Buttons palette.

This palette contains all the buttons used in the theme components, so that you can add and adapt them for your application. Buttons include

• Windows Controls – Primary
• Windows Controls - Secondary
• Go Buttons, a compact and simple button used for triggering an action.
• Filter Buttons with Totals which work in conjunction with a grid to filter the results displayed. The total value on the filter is provided by a card container that returns a single value in an attribute called Count. You need to configure the filter and connect it to the button.
• Tile and Window Buttons these are collections of CRUD (Create, Read, Update and Delete) buttons contained in an area, to provide an instant button bar. They have conditional formatting applied to them so that the appropriate buttons are displayed according to what the user has selected. For example, a record must be selected for the delete button to be displayed.
  • Tile Buttons must be put inside a tile. Link them to CRUD actions on the data displayed in the tile.
  • Window Buttons must be placed at the top level of the dashboard and are intended to perform actions on everything displayed on the dashboard.

Can I Add Components to Theme 2?

Whenever you have to set up a component, such as a new area or button, decide if you might need the same thing again. If so, create a template of the component, so it is ready to use. Otherwise you have to repeatedly combine the building-block components and set the properties to recreate the component. Once you have a template, you can add it to Theme 2. 

For example, you create a Field Column that is auto sized to use all the available space. To add this to Theme 2.

1. Find the component in the repository. Right-click and select Copy as a template
2. PhixFlow adds the component to the applications repository folder called Templates.
3. Optionally, drag the component from Templates folder in the repository, to the  Theme 2 package. 
4. To make it available to other application designers, drag it to a palette. This can be either one of the existing Theme 2 palettes or a custom palette you have already created.

Can I Change Theme 2?

It may be necessary to update Theme 2 so that it reflects the design you want for your application. For example, you might want to add your own company and application logos, or change the background colour to one that matches your corporate colours.

Before making any changes, consider the impact this will have on the template. For example, if you want to change an area component to have a blue (#2E2F4D) background, consider if you want all areas added from the palette to be blue.

• If you do, update the area Shared Style so that all areas inherit the new CSS property. This is a global change to the palette.
• If not, you could change the background colour by adding a new CSS Property or a Style Setting to the component. This is a local or object level change.  
  Even if you think you only want to change one object, consider creating a Shared Style that you add to the object. This means it is easy to apply to any other components that you decide need to be blue. 

If you want to change the background colour everywhere in the palette, not just on areas, consider creating a new template and palette.

Image Added

Moving Components

See Moving Content on a Screen.

Adding Tiles 

Anchor
Tiles 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 

Anchor
EditPalette EditPalette

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
layoutDirection layoutDirection

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 canvas 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 

   Insert excerpt
   _edit _edit nopanel true

   .
4. PhixFlow opens the component's 

   Insert excerpt
   _property_tabs _property_tabs nopanel true

5. Click the 

   Insert excerpt
   _property_tabs _property_tabs name style nopanel true

    and scroll down to the Direction section:
   Image Added 
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