You have created a dashboard that displays the data. But you also want to be able to edit records. So you will now add a form area to the dashboard.
| Multimedia |
|---|
| name | Demo Build Step 4 Create Screens.mp4 |
|---|
|
...
| Expand |
|---|
|
- Right-click on the dashboard and add a click
| Insert excerpt |
|---|
| _bar_horizontal |
|---|
| _bar_horizontal |
|---|
| nopanel | true |
|---|
|
. You can adjust how far up the screen the bar should be. PhixFlow automatically adds a scroll bar to the data table. - Right-click on the lower white area, and select Create New Form, and enter a name.Open the name
Business Entry Form.
PhixFlow adds an empty blue form area. - In the bottom right of the PhixFlow window, click on the
| Insert excerpt |
|---|
| _palette |
|---|
| _palette |
|---|
| nopanel | true |
|---|
|
and icon and expand the section pf pft1 AppBuilder (Theme 1).
A palette is a set of pre-made components, that make it quick and easy to lay out a form. - Drag in Form Title and name it
Title.
This adds a header area to the form. - Drag in Form Body and name it
Business Body.
This adds a split area and buttons to the form.
|
| Expand |
|---|
| title | Step 2 Add fields to the form |
|---|
|
- 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
- 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.
- Click on the
BusinessData stream properties tab. - In the stream properties, select the attributes
UID through to Active - Shift-Drag drag the attributes onto the left area.
PhixFlow creates a set of form fields for the formattributes. - Shift-drag the
Description attribute onto the right of the form. PhixFlow automatically adds an editing toolbar to the areaarea.
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: 
Notice that when The form is displaying the first data record. If you select different data records in the table, currently the form display does not change. But we you want the form to display the currently selected record. | Expand |
|---|
|
|
- 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 make this happen you need to connect the form to the data.
| Expand |
|---|
| title | Step 3 Connect Link the from to form with the data |
|---|
|
To display the company name in the form title: - In the dashboard, double-click on Header Fixed and change text its properties → Display Text Text to
Business Details and . - In the dashboard, double-click on Dynamic and changetext change its properties → Name field to be the same as business name attribute to be:
Name
This means the "Dynamic" part will display the name of whichever business is selectedAs PhixFlow knows there is an attribute called "Name", it will use the name value of the currently selected record in the "Dynamic" area. Hover over the UID column header and drag the filter symbol onto the form and confirm.
This tells PhixFlow that the form should display the selected record in the grid. - PhixFlow opens a properties tab with Filter Details that shows how for the filter works. Click
| Insert excerpt |
|---|
| _finish |
|---|
| _finish |
|---|
| nopanel | true |
|---|
|
to close it. Now when you select a different record in the table, PhixFlow now displays the selected record in the form.
|
| Expand |
|---|
| title | Step 4 Add more informationa map of the business location |
|---|
|
- From the palette, drag a Form Content component onto the blue form background and name it
Map Area. - From the palette, drag a Google Map component onto the new area.
- Lock the layout.
- The map now displays the post code location of the business.
| Expand |
|---|
|
|
To change the fixed 50/50 split for the form:
Look in the repository, to see all the components of the dashboard Layout.
Image Removed
Expand Business Editor Form → Business Body → Form Content Container.Double-click Form Column Container 1x2 to open its properties.Expand the Style Settings sectionUntick AutoSizeNow PhixFlow sets the size of area showing the fields based on their field width, leaving more space for the description.
You can change thingsNames - double click on the dashboard or find them in the repository.
Image RemovedAll 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 sectionuntick AutoSizeNow PhixFlow sets the size of area showing the fields based on their field width, leaving more space for the description- Right-click in the dashboard and click
| Insert excerpt |
|---|
| _layout_lock |
|---|
| _layout_lock |
|---|
| nopanel | true |
|---|
|
.
This switches PhixFlow from editing the dashboard to displaying the dashboard as an application user would see it. - Click different rows in the data table. The map updates to show the location of currently selected business, using its post code.