Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

This page is for application designers who plan to use tiles and components from one of the themes provided by PhixFlow.

What is a Template Package?

Template Packages are similar to Packages in that they

Overview

In PhixFlow you can share the same resources with multiple applications by adding them to a package, then adding the package to different applications. A package can contain anything an application can contain, for example analysis models, screens etc. Both can also be shared across multiple applications. Where a Template Package is special is that it can also contains properties that determine which default components should be used for your application. For example which layout template to use when you create a string field.such as:

  • modelling objects or complete analysis models
  • screen components and whole screens
  • shared styles and palettes.

A template package is a special type of package. It is not provided with your installation, but to get the most from PhixFlow, we recommend you download and install the template packages; see:

As well as shared styles and palettes, the template package sets some defaults for your application, such as number formats and the components to use when you drag a table or attribute, onto a screen.

What's Included in a Template Package

Here is an illustration of what makes up a Template Packagetemplate package:

  1. Template Package consists of a Palette and Properties for an application.
  2. The Palette contains groups of Layouts and Component templates that can be used to create screen content. The palette is displayed in PhixFlow when creating a screen.
  3. The Properties hold information on which Layouts and Components should be used by your application when creating content. For example when dragging a table attribute onto a screen to create an input field, these properties set what the field will look like.
    1. This is relevant if this Template Package is selected in the application creation wizard.
  4. The Layouts and Components are the template items which can be used to add content to a screen. They are accessed via the palette and dragged onto your application.
  5. A Template Package must be associated to an Application in order to use its palette. 

PhixFlow is installed with two default palettes, Basic Components and Labelled Fields. These provide simple functionality. However to get the most from PhixFlow we recommend you download and install your preferred Template Package, see Available Templates Packages section below for more information n what is available. Note that all the styling applied to these template packages can be adapted to suit your own requirements, such as corporate colours and logos.

Download and Install a Template Package

See Installing Template Packages.

Using a Temple Package

See Using a Palette   

Create your Own Temple Package

See How to Create a Palette   

Available Template Packages

Image Removed Theme 1 - Cobalt Lake  Anchortheme1theme1

Image Removed  Fully Configurable

Theme 1 offers a striking two-tone look, with bright overtones that can be configured to suit your own design needs. Offering straight forward implementation Theme 1 has the flexibility to fit your application requirements, from data charts to form over data input screens.

For an illustration of Theme 1 in action, see the /wiki/spaces/HELP90/pages/1391427723 video.

Image Removed

Image Removed

Image Removed Theme 2 - Urban Complex

Image Removed Fully Configurable

Theme 2 has a subtle, contemporary look and feel, with minimalist grey tones and a splash of colour. Offering straightforward implementation Theme 2 has the flexibility to fit your application requirements, from data grids to integrated maps.  As with all themes, it can be configured to suit your own design.

Image Removed Responsive Design

The Theme provides a responsive design right out of the box, meaning that your applications display well on any device on which they are being viewed. This is achieved using a versatile tile based approach. The tiles house all of the app content and can be resized proportionally to one another to suit their content. For example, a larger tile can be configured for a data entry form and a smaller one for a map.

Image RemovedExample Dashboards

Building on the success of Theme 1, Theme 2 provides more functionality, more flexibility and is even more straight forward to use. We’ve also included a set of example dashboards as a guide to what's included in the Theme. These can be found in the Theme 2 package in the repository.

Tip

For more details about Theme 2 and what it includes, see Using a Palette.

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

Image Removed

Image Removed

Image Removed Theme 2.1 - Urban Serenity

Image Removed Rocket Fuelled!

Theme 2.1
  • A template package is a package with extra options to specify a palette and other default properties.
  • The palette contains individual components and components are combined into layouts. These have been designed to give your screens a consistent look-and-feel. When you are working on a screen, PhixFlow displays the palettes from your template package. You can drag components from the palette onto a screen. 
  • The properties specify which styles, formats and components to use by default when you are designing screens for your application. For example, when you drag an attribute onto a screen, PhixFlow adds the default field component to your screen.
  • One or more applications can use the layouts and components from the palette and have the same style properties, all of which are provided by the template package.

Choosing a Template Package

When you create a new application, there is an option to select a template; this is the template package. Select the template that has the design style that you want for your application.

Changing Defaults Set By a Template Package

You can change any of the defaults set by the template package in your Application Properties. In the

  • Insert excerpt
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → Basic Settings for default date and number formats
  • Insert excerpt
    _property_tabs
    _property_tabs
    namestyle
    nopaneltrue
     → Style Settings, for default styles related to grids
  • Insert excerpt
    _property_tabs
    _property_tabs
    namestyle
    nopaneltrue
     → Default Components to select different components to use for data fields.

Adding Palettes

Whenever you are editing a screen, PhixFlow opens the palette tab in the right panel. The palette tab has several different palettes, which you can expand.

Insert excerpt
Using a Palette
Using a Palette
nopaneltrue

Available Template Packages 
Anchor
themes
themes

Image Added Serene Grey
Anchor
theme21
theme21

The Serene Grey Template Package makes use of all the latest features in PhixFlow version 9.0. (Download)


Image Added Rocket Fuelled!

The Serene Grey Template Package is a rocket fuelled version of Theme 2. It includes a host of new and exciting templates including the new Kanban board, enhanced card containers and even more preconfigured complete screens than before. As before it is fully customisable to suit your own design needs.  

 Faster Screen Building

Theme 2.1 now The Serene Grey Template Package has a simplified structure which means everything you need is in one place! A single palette that is divided into logical groups such as complete screens, tiles, and buttons, and now when you drag an item onto a screen dynamic highlighting shows where it should be placed.

 Responsive Design

The responsiveness of the theme has been tuned to improve the appearance of application screens on mobile devices. This means you still get responsiveness built into the layout templates right out of the box using a versatile tile-based approach, but screens will scale down to mobile devices accurately. We have also made setting the scaling sizes much easier by separating out the minimum size settings into their own style.

Example DashboardsScreens

We’ve included more example dashboards screens than ever before! These dashboards screens illustrate all of the layout templates provided in Theme 2.1, These the Serene Grey Template Package, these can be found in the Theme 2 package in the repository and in the new Theme 2.1 application that comes with this Template Package.

Image Removed

Image RemovedSerene Grey Example app available from your start menu or the Learning Centre.

Image Added

Image Added

Learn more