Overview
A palette provides quick access to set of configured layout templates, which you can dragging onto forms to create layout components.
PhixFlow comes with two default palettes:
- Basic Components: contains all basic layout components, such as String Field and CheckBox without any additional labels and styling.
- Labeled Fields: contains a set of predefined form fields that have configurable labels. This is the palette to use when designing application forms.
You can also install additional Theme palettes. These are designed to have everything you need to create GUI screens by simply dragging the tiles from the palette into a dashboard. See also About Themes, Using Theme 2 and /wiki/spaces/HELP11/pages/9711229273.
You can also configure PhixFlow to use automatically use your prefered palette, see application properties → Basic Settings → Default Component Palette.
| Panel | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
Making a Layout Template
You can only add layout templates to a palette.
Create the layout component and style it as required. This can be a simple field or made up of multiple components. Save it.
In the repository, find the component and right-click. Select Copy as a template.
PhixFlow opens a copy, this time with the option Advanced → Template ticked.
Open the Basic Settings section of the new layout template, and change the name.
Save.
Editing Palettes
You can create new palettes and edit existing ones.
To create a palette and add components:
Right-click the repository branch → Application → Palette and selectDefault Components
For any screen that you design, there are common elements, such as forms, true/false fields, or fields for specific types of data, such as long strings or floating point numbers. After you have added these to the Layouts section of the palette properties, use the Default Component section to select which of the layout components you want to use for the base components. PhixFlow displays these in a "Base Component" palette. For these
Palette Groups
To remove items from a palette
| Insert excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Overview
You can make changes to the palettes, by adding components or removing them. You can also change the appearance of components in a palette, for example to use corporate colours.
You may prefer to leave the palettes supplied by PhixFlow unchanged and instead create your own palette.
Changing Styles
| Warning |
|---|
Changing the style of a component on the palette affects any future use of the component for all applications that have access to the palette. Existing uses of the component are not affected. Changing shared styles affect all existing uses of the component as well as future uses; see Screen Styling. For example, if you change a button to have a pink background:
|
To change a palette component without affecting any existing uses of it, create a style that overrides the existing style.
- In the palette, right-click on a component and select
.Insert excerpt _edit _edit nopanel true
If you need to find a child component, such as a header on a complete screen, right-click on the parent and select
This lists all the child components. Double-click the specific component to open its properties.Insert excerpt _repository_find _repository_find nopanel true - In the component properties, click on the
.Insert excerpt _property_tabs _property_tabs name style nopanel true - Edit the style properties to have the required settings; see Style properties.
your changes.Insert excerpt _save _save nopanel true
To change an aspect of the style of all components in a palette, for example to add a company logo or change the colour scheme to that of your company:
- In the palette, right-click on a component and select
.Insert excerpt _edit _edit nopanel true - In the component properties, click on the
.Insert excerpt _property_tabs _property_tabs name style nopanel true - In the Shared Styles section, click
.Insert excerpt _add _add nopanel true - Edit the shared style properties to have the required settings; see Style properties.
your changes.Insert excerpt _save _save nopanel true
The following video shows how to do this.
| Iframe | ||||||
|---|---|---|---|---|---|---|
|
Adding Components
If you have a component that you want to add to a palette, you must first save a copy as a template component; see Making Template Components.
To add a template component to a palette:
- Open the repository.
- Navigate to the palette and right-click select edit.
- Drag the Palette tab into the workspace to show the tabs side-by-side.
- From the repository branch → Template, drag a template from the repository into a palette or open one of the groups and add it there.
Removing Components
To remove components from a palette, right-click on the item in the palette and click
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
does not remove
the component from the repository.
Creating a New Palette
- In the repository navigate to your Application → Palette section and select
Insert excerpt _
new _
new nopanel true
For each palette, the following settings are configured.
Basic Settings
For palettes supplied by PhixFlow, this URL links to the help page about the palette.
If you create your own palette, add a link to additional information to help people to use your palette.
PhixFlow displays the palette header bar with a- .
- PhixFlow opens a properties tab for the palette. Name the palette and save it.
- Click the
Insert excerpt _
template _
icontemplate nopanel true
- to
Layouts
This section has a toolbar with standard buttons andThe grid contains a list of layout components that this palette contains. To add a layout to the list:
Click- display the available templates. If you have not created any templates yet see Making Template Components.
- Drag the templates into the palette properties → Component section.
- Optionally, define Palette Groups and drag templates into the groups.
This creates a palette to which you can add components. This is only available to your application.
Sharing a Palette
If you want to share your palette with other applications, move the palette and template components from your application into a package that the other applications use. You can then set some components to be defaults.
- In the repository expand Packages and select
Insert excerpt _
new _
new nopanel true
- .
- Create your package and complete the details.
Optionally, to make this a template package, tick Template; see Understanding Template Packages. Then specify the components you want to use as default components in the Template Details section.
Setting Default Components
When you create a new application you select a template package. PhixFlow uses the information in the template package to configure the default components. When creating a screen, if you drag in a table or attribute, PhixFlow uses the default component for forms, true/false fields, or fields for specific types of data, such as long strings or floating point numbers.
You can see which default components have been set in Application Properties →
| Insert excerpt | ||
|---|---|---|
|
|
|
Add a layout template
.
Default Components
To change the default palette or components for your application:
- In the repository, expand Applications.
- Double-click on the application name.
- Click the
Insert excerpt _
property_
tabs _
property_tabs name style nopanel true
Description
- .
- Scroll down to Default Components.
- Select the palette or components you want to use.
- Save your changes
Next time you drag a table or attribute onto a screen canvas, PhixFlow uses the default components you have set.