Versions Compared

Key

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

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.

Watch the Video

Multimedia
nameDemo Build Step 4 Create Screens.mp4
width100%
height80%

Summary of Steps


Expand
titleAdd a Form
  1. Right-click on the dashboard and click Dashboard Options then click 
    Insert excerpt
    _bar_horizontal
    _bar_horizontal
    nopaneltrue
    . 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 
    Insert excerpt
    _palette
    _palette
    nopaneltrue
     icon and expand the section pft1 AppBuilder (Theme 1).
    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:


Expand
titleAdd fields to the form
  1. Click on the BusinessData 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.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.


Expand
titleLink 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 
    Insert excerpt
    _save
    _save
    nopaneltrue
    .
  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.

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


Expand
titleAdd a map of the business location
  1. From the palette, drag a Form Content component onto the blue form background and name it Map Area.
  2. From the palette, drag a Google Map component onto the new area.
  3. Right-click in the dashboard and click
    Insert excerpt
    _layout_lock
    _layout_lock
    nopaneltrue
    .
    This switches PhixFlow from editing the dashboard to displaying the dashboard as an application user would see it.
  4. Click different rows in the data table. The map updates to show the location of currently selected business, using its postcode.

Update Some Records

to have a go at using your application, switch to PhixFlow's App Mode: In the bottom right of the PhixFlow window, click 

Insert excerpt
_app_mode
_app_mode
nopaneltrue

In the data table, select any record and edit a field in the form. Click into the Description field and enter some information. 

Click the update button, and notice that the data record in the table is updated.

What Next

Links

Previous StepWhat next?