PhixFlow Help

Step 5. Add Features for Managing Data

You have created a screen that displays the data. But you also want your users to be able to edit data records. So you will now add a form area to the dashboard.

The palette has been improved since this video was made. Check the instructions below for the details of the palette components you need.

Watch the Video


 Video controls

   or press the Esc key.

Summary of Steps

 Add a Form
  1. Right-click on the dashboard and click Dashboard Options then click  Add Horizontal Bar. PhixFlow adds a separator bar, you can adjust how far up the screen the bar should be by dragging it with your mouse.
  2. Right-click on the lower white area, and select Create New Form, and enter the name Business Entry Form.
    PhixFlow adds an empty blue form area.
  3. In the bottom right of the PhixFlow window, click on the  Show Palettes icon and expand the section Theme 1 - App Builder Prebuilt Components.
    A palette is a set of pre-made components, that make it quick and easy to lay out a form.
  4. Drag in Form Title and name it Title.
    This adds a header area to the form.
  5. Drag in Form Body and name it Business Body.

This adds a split area and buttons to the form, which now looks like this:

 Add fields to the form
  1. Click on the BusinessDataXY stream properties tab.
  2. In the stream properties, select the attributes UID through to Active.
  3. Shift-drag the attributes onto the left area.
    PhixFlow creates a set of form fields for the attributes.
  4. Shift-drag the Description attribute onto the right area. 
    PhixFlow creates a field for the description. As this attribute has the type "bigstring", PhixFlow creates a field with an editing toolbar, to make it easy to edit the description text.

     Why do I have to Shift-drag?

    When you drag components onto the form, PhixFlow could add them

    • at the same level in the form structure: use Drag
    • or inside a component: use Shift-drag.

    The form contains the Form Header and Form Body. Shift-drag tells PhixFlow you want the the properties and description to be contained by the Form Body.

After dragging the attribute onto the area, a popup box will appear: “Please confirm if you want to make the Stream "BusinessData" this form's backing Stream?”. Click yes.


Your form should now look like this:

The form is displaying the first data record. If you select different data records in the table, the form display does not change. But you want the form to display the currently selected record. To make this happen you need to connect the form to the data.

 Link the form with the data

To display the company name in the form title:

  1. In the dashboard, click on Header Fixed and change its properties → Display Text to Business Details - and  Save.
  2. In the dashboard,click on Dynamic and change its properties → Name to be: Name
    As PhixFlow knows there is an attribute called "Name", it will use the name value of the currently selected record in the "Dynamic" area.

To link the table content with the form content:

  1. Click on the UID column header and drag it onto the form and confirm.
    This tells PhixFlow that the form should display the selected record in the grid.

    A popup box will appear saying, “Please confirm that you want to set a background filter on the "BusinessEntryForm". Click yes.

  2.  PhixFlow opens a properties tab for the filter. Click  OK to close it.
  3. Now when you select a different record in the table, PhixFlow displays the selected record in the form.

 Add a map of the business location
  1. From the palette, shift-drag a Map Container component onto the blue form background directly to the right of the description. Name it Map Area.
  2. Right-click in the dashboard and click  Lock the Layout.
    This switches PhixFlow from editing the dashboard to displaying the dashboard as an application user would see it.
  3. Click different rows in the data table. The map updates to show the location of currently selected business, using its postcode.

An API key is required for the map to display. It is not essential to display the map for this course but could be achieved by creating your own API key here.

 Use your new application

You can now switch to a user-view of your application. In the bottom right of the PhixFlow window is an icon that shows you are currently in   Design Mode. Click this icon to switch to App Mode.

Things to try:

  • In the data table, select any record, and notice that the form contents and map changes.
  • Update a field in the form, and notice the data in the table changes. (Remember to click the Update button.)
  • Add a description for a record. Add some formatting.

Next Steps

You have now completed the PhixFlow Quick Start course. You have worked through the general process for using PhixFlow to create a simple application, and practiced the simple drag-and-drop techniques common in PhixFlow.

PhixFlow has many more features that you can use to build applications. You can learn more in the Building Applications training course.

If you are interested in loading and changing data using analysis models, try some of the Introduction to Modelling training course.

Please let us know if we could improve this page feedback@phixflow.com