Widget Connector width 900 url https://www.youtube.com/watch?v=zCpKwNjrK40&index=2&list=PLbPt6SI1Zhb8CnWh7Gvopto7D6LEwcB9A height 500
Create a simple application that maintains a list of contact details.
Changes since the video was taken: The option to change a stream to transactional is Period, not Stream Type.
To recap the steps in the video:
When designing an application in PhixFlow, you work in
. You can see the icon in the bottom right of the screen, in the grey task bar. Insert excerpt _design_mode _design_mode nopanel true
Set up the data structure
- Go to the repository and create an Application called
Contact Manager
. - Under the new application, create an Analysis Model called
Contacts
. - In the analysis model, create a stream called
Contacts
. - Set the Period of the stream to Transactional.
Add the following attributes to the stream:
Name
Type
UID*
Integer
FirstName
String
FamilyName
String
ContactNumber
String
Email
String
DOB
Date
JobTitle
String
Tip *UID is a special field name. If you create an attribute with this name, PhixFlow knows that it must automatically increment this value when a new record is added to the stream.
The UID is a unique identifier for each record, and it is used to link the two views on the dashboard in this example.
Create a screen
- Within the repository, under the application
ContactManager
, create a Dashboard calledContacts
. - Open the configuration form for the stream
Contacts
, and bring the new dashboard back to the front. You can use the grey task bar at the bottom of the screen to do this. - Drag the stream icon from the configuration form onto the dashboard, to create a GridView.
- Drag all attributes from the stream onto the header of the grid view.
- Split the dashboard by adding a Horizontal Bar.
Splitting a dashboard using a horizontal or vertical bar creates separate sections called dashboard elements. - In the bottom dashboard element, right-click and select Create New Form.
A form is a type of layout component. - Click on the bottom dashboard element. You are actually clicking on the empty form. In the layout component property tab that opens, enter the form name:
ContactDetails
. - Open the stream configuration.
- In the top pane, right-click and select Show the Stream Configuration.
- Drag all the attributes from the stream into the lower half of the dashboard. For each one, an edit field will be created.
Add
...
buttons
- To create an Add button, in the lower form, right-click and select Open Palette → Basic Components.
- From the palette, drag a button onto the form.
- Set the Name of the button to
Add Contact
. - Set the Action Type to Insert.
Save your changes.
Tip The Name of the button is internal. It is a good idea to make this as descriptive as possible, so that you can find the button in your configuration and it is clear what it does.
- Set the Name of the button to
- Click on the text in the button. This will open the configuration form for the button Label.
- Update the Display Text of the label to
Add
. - Save your changes to the label.
- In the same way, add
Update
andDelete
buttons.Update
button- Name: Update Contact
- Action Type: Update
- Display Text of button label: Update
Delete
button- Name: Delete Contact
- Action Type: Delete
- Display Text of button label: Delete
- Link the two views.
- Drag the column header for
UID
from the top grid view onto the lower form. This automatically creates a Background Filter, which determines the data that will be displayed.- To access this filter, right-click the lower part of the dashboard.
- Select Show Element Details.
- Under Background Filter Rules, we can see the rule that has been created. This can be edited if necessary.
- Drag the column header for
In the bottom right corner on the grey task bar, click the
icon to switch to Insert excerpt _design_mode _design_mode nopanel true
. PhixFlow switches to displaying your application as a user will work with it. Try adding, updating and deleting some records. Insert excerpt _app_mode _app_mode nopanel true
Panel |
---|
Next video: 2. Styling Applications |
...