Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This page is for application designers who want to start a new application project. It explains how to create an application.

You create a new application project from the PhixFlow Welcome window. From the Welcome window, you can also:

  • switch between card and list view using the buttons on the right: ??link
  • select an existing application from the list: ??link
  • import an application using the button on the left: ??link
PhixFlow's Welcome Window
PhixFlow's Welcome WindowImage Removed

When you create an application project, PhixFlow guides you through the process in 3 steps.

  1.  On the left of the Welcome window, click Create New ??icon. PhixFlow prompts you to enter the following information for the application.
    • Name 
    • a development Version number, for example 1.
    • a Description. Consider including the purpose of the application and who is responsible for it.
    • Click Next.

Image Removed

  1. Optionally, select or upload an icon for your application. This appears in the application list.
    • Image: PhixFlow uses the default application icon. Optionally you can
      • either select another image from the list, if icons have been uploaded to PhixFlow
      • or click Add Image to upload a new image/icon file to PhixFlow. Recommended sizes. You can do this later using Application settings and or image upload ??links
      • From the file browse window, navigate to and select the image file you want to use as an icon.  PhixFlow uploads the file to its database in images/icons ??dev to confirm
      • Image name For selected images, PhixFlow displays the image name it knows. For new images, add an image name (how does this relate to filename?? - check image properties??)
  2. The loaded icon is displayed in the Icon Preview
  3. Click Next

Image Removed

  1. Step 3  Select a theme. PhixFlow comes with several design themes. The theme sets defaults for various things in your application ??list some things. You can adapt and change your theme at any time ??link to palette and component templates?? 
  2. use the arrows to scroll through the different theme images until you find the one you like.
  3. When the theme you like is displayed, click Create App

Image Removed

Image Sizes

There are two images for an application. You can add or change them at any time in your application's properties.

An icon which is used in the card view. approximately ??sizes are same as in properties. Make this shared text.

  • height: up to 100 pixels
  • width: 100 to 150 pixels.

A logo, to use in customised branding for the application. This can replace the PhixFlow logo and name in the header bar.

Image Removed

When a user clicks this image, it will open the application menu. We recommend an image size of approximately:

  • height: up to 40 pixels
  • width: up to 300 pixels.

See Image for how to upload an image to PhixFlow.

Themes Under-the-Hood

A theme is basically a "package" of items, e.g. styles, components for screens and palettes for them. When you create an application the selected theme package is added to your application. You can see it in the Package folder. And in the repository, all the loaded items are listed.

Where is stuff coming from??  Things can be set at different levels. Some examples?? selected theme, selected date formats etc...

  1. At PhixFlow level: done in system 
  2. At Application level
  3. At theme level
  4. At shared style level
  5. At specific component level

Home page

End point Application home page with access to Data, Design and Workflow. Same links as shortcuts in the header bar.

Section XD2.3 Application settings link

Additional configuration for your application. Opens application properties on the right- see the properties. Set all the core stuff that applies to the whole application. Your chosen theme has defaults for these things. you can change them at any time.

Notes to me

Stuff to go to the  GUI page from XD 1.7 onwards

  • Bottom right, notification of running actions image action-notification.png
  • Also 1.4 Header bar customisation -system config New level called Environment Header logo and icon PhixFlow, compact and Custom
  • And login window screenshot for desktop and mobile
    Insert excerpt
    _Banners
    _Banners
    nameapp
    nopaneltrue

    Overview

    Applications contain everything necessary for it to function, from its data and access permissions, to links with associated packages. Each application has a unique URL and associated styling.

    Image Added

    Open an Application

    To open an existing application

    1. Double-click on the application's name from the application list that opens with PhixFlow.
      1. If the application list is not displayed, in the top left of the PhixFlow, click Image Added.

    Access an application using its URL

    Every application has a URL which allows you to access it directly. 

    1. To obtain the URL for the application, the most reliable method is to open the application and copy the value from the address bar:
      1. For example: https://bigcorp.com/phixflow/?application=Data%20Analysis
    Expand
    titleMore Detail

    The URL is made up of: Server Address + Application Name + Menu Name

    For example: 

    Server addresshttps://bigcorp.com/phixflow/start?

    Application NameData Analysis. Spaces must be replaced by %20 in a URL.

    Menu Name: navigation

    Result:

    https://bigcorp.com/phixflow/?application=Data%20Analysis&menu=navigation

    Creating a New Application

    1. Click
      Insert excerpt
      _addIcon
      _addIcon
      nopaneltrue
       Add New from the PhixFlow Landing Screen.
      • If this is not open, click the 
        Insert excerpt
        _app_menu
        _app_menu
        nopaneltrue
        .

    Image Added

    2. PhixFlow opens the Create Application wizard.

    Image Added

    3. Set the following properties for your application:

      • Name: enter a name.

      • Version (Optional): enter a version number if applicable.

      • Description (Optional): we recommend entering a useful description of the application, potentially the data owner and app creators.

      • Template: Template Packages define the styling, default settings and templates used to create your application. We recommend selecting a PhixFlow template, such as Serene Grey, as this comes complete with everything you need to start creating your application. 

      • Application Icon (Optional): select an image to be used as the icon for your application on the selection screen.

        Tip

        Icons for the application menu should be:

        • up to 100 pixels high
        • between 100 to 150 pixels wide


    4. Click Create Application.

    Templates Packages

    Template Packages contain predefined options to specify a palette and other default properties; these include styling, default settings and templates used to create the content of your application. A Template package is selected when an application is created. See Understanding Template Packages.

    Insert excerpt
    _packages
    _packages
    nopaneltrue

    In PhixFlow you can share the same resources, such as data connectors and styles, with multiple applications by adding them to a package and then adding the package to different applications. A package can contain anything in an application.

    To associate a package to an application:

    1. Open the Application's
      Insert excerpt
      _property_settings
      _property_settings
      nopaneltrue
      1. Click the Home button from the header menu and then click the properties button.
    2. Scroll down to the 
      Insert excerpt
      _packages
      _packages
      nopaneltrue
       section in the properties.
    3. Click the 
      Insert excerpt
      _packages
      _packages
      nopaneltrue
       button to open the available packages list.
      1. Tip: If the available packages list opens over the top of the application properties, drag the tab header to the left so that both open tabs can be seen next to each other.
    4. Drag the required package into the packages area for your application and  
      Insert excerpt
      _save
      _save
      nopaneltrue
       your changes.

    Application Properties

    To access the application properties, click the

    Insert excerpt
    _property_settings
    _property_settings
    nopaneltrue
     button on the application home page. 

    Image Added

    The default properties used by your application are based on the template package you selected when you created it. You can see the default properties or set them in the Application PropertiesThese include:

    1. Grid Styling for headers, fonts and row sizes applied to grids by default.
      1. Set in the 
        Insert excerpt
        _property_tabs
        _property_tabs
        namestyle
        nopaneltrue
        .
    2. Default Components, such as the Form Fields template used when creating input forms.
      1. Set in the 
        Insert excerpt
        _property_tabs
        _property_tabs
        namestyle
        nopaneltrue
        .
    3. Formats for numbers and dates, including the number of decimal places.
      1. Set in the 
        Insert excerpt
        _property_tabs
        _property_tabs
        nopaneltrue
        .
    4. The Application Icon used in the application list to identify your application.
      1. Set in the 
        Insert excerpt
        _property_tabs
        _property_tabs
        nopaneltrue
        .

    If a default style or number/date format is not set in the application properties, PhixFlow uses defaults set in System Configuration. If the latter is not set, PhixFlow will prompt you to set them.

    For more detail on this topic see Editing Application Properties.

    Startup Actions

    Startup actions are Actionflows which run when your application initially opens. They can be used to open the default navigation menu and a specific screen, such as a landing page. See Designing Screens and Startup Actions.

    Server Properties

    The instance of PhixFlow can be labelled and a colour set. This is useful when you have multiple environments such as Development, UAT and Production.

    • Server Properties
      • From the header menu, click 
        Insert excerpt
        _administration
        _administration
        nopaneltrue
         → System → Configuration.
      • Click on the 
        Insert excerpt
        _property_tabs
        _property_tabs
        nopaneltrue
        .
    • Set the Label
      • Set a value in PhixFlow Instance. This will appear in the banner at the top of PhixFlow. For Example, Testing.
    • Banner Colour
      • Choose a colour by clicking the coloured box next to this field. You can pick a specific using the colour picker and set this as the banner colour.

    Security

    There are two elements of security:

    • Controlling who can access an application.
    • Controlling their privileges within an application.

    To find out more on this topic see, 21. Security and Access.

    What's Next?

    The PhixFlow Fundamentals course provides a practical guide to using PhixFlow, including setting up the application properties. 

    Already started PhixFlow Fundamentals?

    Return to Application Fundamentals

    Further Reading

    Child pages (Children Display)