Versions Compared

Old Version 5

changes.mady.by.user Fiona Sargeant

Saved on

compared with

New Version Current

changes.mady.by.user Anthony George

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Reverted from v. 60

...

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

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

Insert excerpt
_video_

...

controls
_video_

...

controls
nopaneltrue

...

  • 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. 

...

Tip

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

Summary of Steps

Expand
titleAdd a Form
  1. Right-click on the dashboard and click Dashboard Options then click 
    Insert excerpt
    _area_above
    _area_above
    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

...

  1. , click on the 
    Insert excerpt
    _palette
    _palette
    nopaneltrue
     icon and expand the section Theme 1 - App Builder.

...

  1. A palette is a set of pre-

...

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.

...

  1. made components, that make it quick and easy to lay out a form.
  2. Drag in Form Title and name it Title.
    This adds a header area to the form.
  3. Drag in Form Body and name it Business Body.
    Image Added

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


Expand
titleAdd 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-

...

  1. drag the

...

  1. attributes onto the left area.
    PhixFlow creates a set of form fields for the

...

  1. attributes.

  2. Shift-drag the Description

...

  1.  attribute onto the right

...

Your form should now look like this:

...

  1. 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.

    Expand
    title

...

  • 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.

...

To change the header:

...

  1. 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.


Your form should now look like this:
Image Added

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,

...

  1. click on Dynamic

...

To change the fixed 50/50 split for the form:

  1. Look in the repository, to see all the components of the dashboard Layout.
    Image Removed
  2. Expand Business Editor Form → Business Body → Form Content Container.
  3. Double-click Form Column Container 1x2 to open its properties.
  4. Expand the Style Settings section
  5. Untick AutoSize

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

Expand
titleDetails
  • You can change things
  • Names - double click on the dashboard or find them in the repository.Image Removed
  • 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
Expand

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????

...

  1. 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.
    Image Added

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 Map Container component onto the blue form background and name it Map Area.
    Image Added
  2. Right-click in the dashboard and click
    Insert excerpt
    _lock
    _lock
    nopaneltrue
    .
    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.
    Image Added


Expand
titleUse 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 

Insert excerpt
_design_mode
_design_mode
nopaneltrue
. Click this icon to switch to
Insert excerpt
_app_mode
_app_mode
nopaneltrue
.

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.


Previous StepMore training courses