Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
AnchortoctocThis page guides you through the Sandbox Demo which is installed as an Application in the repository. The Quick Start takes about  30 minutes to complete. To access the demo, and follow these instructions from within PhixFlow:
  • Run your PhixFlow installation. If necessary:
  • Switch to  Insert excerpt_design_mode_design_modenopaneltrue
  • Expand the Applications branch.
  • Expand the Help Viewer.
  • Developing an application in PhixFlow is a simple process:

    Add screenshot here

    Table of Contents
    stylenone

    Anchor11Introduction

    Use the videos and instructions in this 30 minute Quick Start Guide to create a simple application.

    PhixFlow is a flexible platform that can help you to manage your data. This Quick Start Guide introduces the process you can follow to build an application:

    1. Set up a PhixFlow application
    2. Define your data
    3. Load the data into PhixFlow
    4. Create a screen to maintain your data

    Child pages (Children Display)

    Image Added

    Image Removed

    You can change things

    All the "bits" you have added to the dashboard are stored in the repository, in a branch called Layouts.

    If you expand the Business Editor Form > Business Body > Form Content Container > Form Column Container 1x2, you can see how  different parts of the dashboard are repository items that are nested. These items and their container-contained relationships have been created automatically when you drag in the components from the palette. 

    From the palette, the form body is fixed at a 50-50 split.  Double-click on Column 1 to open its properties.

    Expand the Style Settings section

    untick AutoSize

    Now PhixFlow sets the size of area showing the fields based on their  field width,  leaving more space for the description.

    Add Update actions

    First Tab is for Business Details

    Right click and create a new form

    From the Theme 1 Template drag a “Form Inner” onto the display area

    Drag the attributes from the Business Stream onto the left column

    Drag Description onto the right side.

    Image Removed

    Image Removed

    Change the header to Business details

    Make the header "Dynamic" to use a the data from the attribute

    Initially the form does not change whith selected 

    Drag UID onto form. 

    Creates a backgound filter to use the UID to decide which is selected. See properties and say yeas

    Add a sort order. If you update without a sort order, updated data

    Without audit it overrides the entry in situ. Audit - marks old record as invalid and makes a new stream set. Without sort order - moves to the bottom. Sort by name, uid - use the dasboard.

    LOcking and unlocking the layout

    CRUD the data

    Connecting the data in the grid at the top  to the form at the bottom of the dashboard.

    At the moment, the data at the top of screen is in a random order.

    • we want to sort the data

    The bottom screen only shows the first record

    we want the form to show the record we have selected

    In the grid at the top, hover to show the filter icon. Drag it onto the blue background of the form in the bottom and confirm.

     PhixFlow opens a properties tab with Filter Details that shows how the filter works.

    You can rename it to something more meaningful, such as By_UID.

    Where does this filter get stored in the repository????

    We want to do the header

    Watch the Video

    To illustrate the process, you will create a simple analysis model and build an application to view and update its data. 

    PhixFlow has a lot of different options and settings. So that you can work through the process, some things are already set up for you:

    • the Excel spreadsheet which you can download from here
    • styles, set as system/application defaults, so that PhixFlow knows how to format data tables - which we call grids
    • a palette of application components that you can drag onto the layout.
    • styles that control the colours and appearance of the screen

    Show the data

    1. Add a horizontal bar.
    2. From the Business File stream properties tab, drag the stream icon onto the top half of the dashboard.
    3. Select the "Table" icon and the attributes you want to display.
      Image Removed
    4. Drag the attributes into the dashboard.
    5. Close the list of attributes.
    Expand
    titleExplore the possibilities

    You can show data as a table, but also as charts

    Look and feel comes from default settings. You can change these

    Show the data

    You want the top half of the dashboard to show the data and for the bottom half to have a form that displays details of the selected record.

    • To split the dashboard horizontally, right-click on the dashboard and add a horizontal bar.
    • It is very easy to show the stream data in the dashboard. Open the Business File stream properties tab. You can drag the stream icon from the tab onto the top half of the dashboard. 
    • PhixFlow needs to know how you want to show the data. Select the "Table" icon.
    • PhixFlow needs to know which attributes you want to show. In this case we will only include some of them in the dashboard. We do not need the 4 Update* attributes. Click the box in the table header to select all the attributes then clear the ticks after "Description". 
    • Now drag the selected attributes into grey bar in the dashboard.
    • Click X on the top right to close the attributes list.

    Add a Form

    Anchor88

    Show all palletes

    Application lego bricks - gui bits as palettes templates. 

    Drag purple form onto the dashboard pfApp Builder (inner)  Business

    Uses the template to add a form. 

    Note splitter is draggable to adjust the proportions and scroll bars added automatically.

    What attributes do you want. In stream select attributes, select, shift-drag and drop. Adds attributes. 

    Description goes onto right

    Add a form.

    In the dashboard, right-click on the empty bottom half. and select Create New Form

    Enter the name for the form and click > OK

    PhixFlow adds a form background using the styles that have been set as defaults for this application. 

    You will now add the form fields using palettes - which are predefined layouts. 

    To access the pallets, go to the bottom right of the PhixFlow window and click the  Insert excerpt_palette_palettenopaneltrue icon.

    PhixFlow opens a tab. Each section has a set of pre-designed components  Expand the section pf AppBuilder (Theme 1).

    Click on Form Title and drag it into the form. This component is going to create an area on your form. Enter the name "Title" This is the name of the component in the repository. This adds the header area to the form. It has two parts, a Fixed section, which you can overtype , and a dynamic, which we will link to the data.

    Now drag in the Form Body and name Business Body.

    Now PhixFlow had added more stuff, with two parts, including some buttons "New" and "Insert". We are going to use the left to show the selected record, and the right to show its description or a map - tbc

    Now go back to your stream tab - which should be pinned. If the tab is not there, you can right-click on the top of the dashboard and select Show the Stream Configuration

    In the list, click to select attributes you want to show on the form, In this case UID through to Active. Shift-Drag the selected list onto the left of the form body.

    If you just drag and drop then PhixFlow does not know which area you want the data to be added to.

    Notice that you can drag the horizontal splitter up and down to adjust the size of the the top and bottom panels of the dashboard. PhixFlow adds scroll bars if they are needed.

    Now Shift Drag Description into the right side of the form body. PhixFlow automatically adds an editing toolbar.

    that looks like this:

    Iframe
    srchttps://www.youtube.com/embed/cwGuTCDbZLw?rel=0
    width900px
    height500px

    Insert excerpt
    _video_controls
    _video_controls
    nopaneltrue

    Check Your Setup

    Before starting, log into PhixFlow. In the bottom right, click 

    Insert excerpt
    _palette
    _palette
    nopaneltrue
     to open the palette tab and look for Theme 1 - App Builder 

    Image Added

    If you do not have the palette, your or your administrator can import it.

    Expand
    titleHow to import the palette
    1. Download the theme file: config_Theme1_20190625.xml.
    2. Log into PhixFlow.
    3. In the bottom right of the PhixFlow window, click 
      Insert excerpt
      _administration
      _administration
      nopaneltrue
       Menu.
    4. Select Import Configuration.
    5. Browse to and select the theme file and click Open.
    6. Click 
      Insert excerpt
      _upload_button
      _upload_button
      nopaneltrue
       and click 
      Insert excerpt
      _dialog_finish
      _dialog_finish
      nopaneltrue
      .
    7. Ignore the password prompt and click 
      Insert excerpt
      _dialog_finish
      _dialog_finish
      nopaneltrue
       again.
    8. PhixFlow loads the palette. This may take a few seconds.
    9. To check the palette is loaded, In the bottom right, click 
      Insert excerpt
      _palette
      _palette
      nopaneltrue
       to open the palette tab and look for Theme 1 - App Builder 
      Image Added
    Note

    This theme is provided by PhixFlow. It may be overwritten when PhixFlow is upgraded to the next version. If you want to adapt this palette, please take a copy and make your changes there.



    Now you can get started with step 1 - set up an application container.