Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 42 Next »

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

Palettes Use Theme 2?

Theme 2 is made up of 3 palettes.
  • Base Components:
    These are like the basic lego blocks from which all screens are created. They have minimal styling and can be used to create to create your own components or palette tiles. They include the attribute fields that allow users to create, review, update and /or delete (CRUD) records.
  • App Builder
    These are preconfigured components. If Theme 2 - Base Components contains the basic lego blocks, these components are made up of several blocks already fixed together for you. Each component is something you commonly need in the GUI of an application. For example, you often need a CRUD form to update data tables. You may want users to add comments or notes to specific records. The Tiles in the Theme 2 - App Builder pallete make creating your own apps much easier and quicker, as it gives you ready-made screen components. 

    The Theme 2 - App Builder palette is organised into groups, to make it easier to find what you need:

    If you want to use complete components, such as entire forms, these are listed first in Complete Forms. If you want to build your own forms, start by adding container components listed in the Form Elements and Tile Containers groups to a dashboard. You can then build up the component using Tiles or Tile Elements. For even more ground-up design, use Basic Elements or Data Bound Fields.

  • Buttons: This section provides you with a host of preconfigured buttons that can be used in your applications. These include simple action buttons with an icon, an embedded button with a field that auto generates an email and a filter button which shows the number of records for that filter.

All Theme 2 components have a consistent look and feel, so that your applications will look stylish and professional with minimal effort.

Remember, you can see Theme 2 in action in the example dashboards. You can find these in the repository → Packages → Theme 2→  T2 - Example Dashboard.

How do I Use Theme 2:

GUI Screen Structure

Before we look in more detail at the components in Theme 2, it helps to understand the levels of structure in typical GUI screen, as shown in the following picture.

You can download and print this image: PDF Quick Reference Sheet.
The way a GUI screen is made up of levels of content is reflected in the PhixFlow repository. When you are working on a dashboard, right-click on any component and click Find in Repository. You can see where the item is within the levels of the dashboard structure.

Using Complete Forms


Theme 2 contains complete forms that can be added directly to a dashboard. You can find these in the Theme 2 – App Builder palette.

  • Splash Screen is useful as a landing page for an application.
  • Form Complete has all the elements for a standard dashboard in one tile.
  • Form Content - Complete is similar to the Form Complete but it excludes the windows controls.
  • Form Content - Empty  provides a blank canvas to which you can add your own form design.
  • Form Popout - Complete is standalone dashboard for data entry or to display more information in a smaller window.
  • Form Confirmation is the smallest of the complete dashboards. it is designed for binary options, “Cancel” or “Confirm”, “Yes” or “No”. It provides a means of styling the messaging.
  • Comments Complete is designed as a comments form. It can be added to its own dashboard panel or directly into a tile.

Using Constituent Components

If you want to tailor your form, Theme 2 also provides parts of forms that you can combine easily into your own design.

  • Windows Controls
    • Primary Controls consist of the top-level navigation for the application.
    • Secondary Controls handle the operation of the window, such as closing it. You could also use this for additional controls that an administrator could use.
  • Windows Buttons provides CRUD buttons in a button bar area. These apply actions at the window level. This button bar is intended to be added at the footer of a window.
  • Header for main sections in your screen. The header contains both static text for you to enter and dynamic text that can be driven from the data backing the form.
  • Tile Container has controls for the positioning of all tiles on a dashboard. All tiles must be placed in this container to provide a responsive application.
  • Tile is the building block of Theme 2. Tiles are designed to contain components for an application. Each tile consists of:
    • Tile Header to appear at the top of tile. It acts as a secondary section header.
    • Tile Body holds the main content such as a data grid.
    • Tile Buttons is the action button bar for the bottom of the tile.
  • Tabs Tiles let you create tabbed forms with any number of tabs. tabs can have:
    • headers, with an icon, header, and subtext.
    • an icon, rather than a header.
  • Tile Map & Tile Map Directions  is preconfigured with an integrated Google map. All you need to add is the Google Map Key API.
  • Resizable has drag-handles so that a user can resize the tile in application.
  • Expanding Tiles can automatically expand to accommodate additional content that is only required occasionally. For example users can expand the tile to see more options.
  • Comments This is a preconfigured card component designed specifically for adding comments.

Theme 2 also include separate palettes for 

  • Base Components the building blocks from which all of the components and tiles are made. These include fields and date pickers.
  • Buttons are described in a separate video. 

How do I Rearrange Components?

There are several reasons why you may want to move things around in your dashboard.

  • you need to find a component
  • you want to see how a component is constructed
  • you have added an item in the wrong place and want to move it.

It is much easier to move components within the repository, where you can see the contained/containing structure. Right-click a component and click View in Repository. PhixFlow opens the repository tab with the current component selected. You can see how the component fits into the structure. To move a component, drag it to the desired position.

When you drag a component in the repository, it moves the component to the drop position in the hierarchy and on the dashboard.

To move a component down a level, so that it is contained by another component, SHIFT+drag the component. It is added to the component at the drop position and is moved into the component on the dashboard. 

Rather than dragging components and tiles from the palette to the dashboard, you can drag them directly into the repository to add them to the dashboard.

How Can I Make a Responsive Application?

Responsive design means an application can adapt to the form-factor of the device on which it is displayed. This means it takes advantage of the space when it is run on a desktop or laptop computer, but has a more condensed format when it runs on a mobile device such as a phone or tablet.

The components in Theme 2 are configured as tiles. Each tile uses the CSS Flex Box option so that it can automatically respond to the screen size of a device on which it is viewed. There are tiles for the main screen areas that you need.

  • Standard contains a header, content area and a set of CRUD buttons.
  • Advanced contains a header, content area and buttons, but the buttons have no associated actions.
  • Blank is a completely empty tile to which you can add your own components.
  • Tile Split contains two tiles that will respond to screen size together.
  • Expanding can expanded or contracted to show or hide additional content.
  • Map contains an integrated Google map.
  • Tabs contains a set of tabs (any number).

Tiles are made up of:

  • Tile Header contains a static text field that you can set for the tile and a dynamic text field that can be driven from the data backing the form.
  • Content is the main body of the tile.
  • Tile Buttons contain the button bar for the bottom of the tile. These act on the content of the tile.

Editing Tiles

For any component or tile you can make changes to how it is configured using its properties.

Changing Layout Direction

The Tile Body uses CSS Flex Row to handle its layout. This means all of the content is set out horizontally, left to right. You can change the layout direction using the layout properties (shown in the screenshot on the right):

  • Direction
  • Wrap
  • Justify
  • Align

See Component Properties.

Adding to a Tile

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. 

Once you have installed Theme 2 and made changes, do not reinstall it. This process overwrites any changes you have made.

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.

To learn how to design an application using Theme 2, see the /wiki/spaces/HELP100/pages/9106726483.

  • No labels