This guide shows you how to create a simple screen. Anchor toc toc
Table of Contents |
---|
Introduction
Anchor | ||||
---|---|---|---|---|
|
Use your PhixFlow sandbox to make a simple application. This application will have a single screen, called a layout, that displays data and lets you create, read, update or delete (CRUD) data records. You can additionally add comments.
Some things are already set up for you:
- a simple model to provide the data.
- a palette of components that you can drag onto the layout.
- styles that control the colours and appearance of the screen.
Remember that you can:
- build models using your own data stored in external databases or files. The Introduction to Modelling Course teaches you how to do this.
- set up your own styles and palettes to create completely customised layouts. The Building Applications Course goes through this process.
- Add buttons for actions
- Add a "floating" form to add a description.
- Add the action to update stream
- Show the form in action - that is is always on top, and that save also closes the pop-up.
- Linking forms together
- Add a comments stream to the model
- Add comment cards
- As layouts are not a fixed structure, but "flow" their order in the repository is important. To reorder an item, you don't drag it in the layout, but in the repository.
- Add actions to the card
- Show the audit attributes on the card
- Add comments on the card.
Create an Application
Anchor | ||||
---|---|---|---|---|
|
Create your application: It is created with default options
Create
the Dataan Analysis Model
Anchor | ||||
---|---|---|---|---|
|
- Pull in an existing file
- Advanced: PhixFlow can connect to databases or load from files or...
- Open the model and view the data - simple streamData and streams
Expand | ||
---|---|---|
| ||
|
Import data
Anchor | ||||
---|---|---|---|---|
|
Import the Spreadsheet
Create a
view of your datastream
Set Period to: Transactional.
Set Audit Manual Changes to: Ticked
Set Description to: Big String
Run the Stream
New Stream
Anchor | ||||
---|---|---|---|---|
|
Create a Comments Stream
Set Period to: Transactional.
Set Audit Manual Changes to: Ticked
Add attributes
Anchor | ||||
---|---|---|---|---|
|
Add the following attrinbutes:
BusinessUID as an Integer
BusinessName as a String of Size 100
Comment as a Big String
- Run the Stream
Add a Dashboard
Anchor | ||||
---|---|---|---|---|
|
Create a new Dashboard to manage our data
Add the Businesses as a Grid to the dashboard
Split dashboard vertically
This is a place holder for the Comments
Split left area horizontally
Expand | ||
---|---|---|
| ||
You can show data as a table, but also as charts |
Add a form to a tab
Anchor | ||||
---|---|---|---|---|
|
First Tab is for Business Details
Right click and create a new form
From the Theme 1 Template drag a “Form Inner” onto the display area
Drag the attributes from the Business Stream onto the left column
Drag Description onto the right side.
Link Tab to data
Anchor | ||||
---|---|---|---|---|
|
Create forms to edit your data
Use the palette to add a form (an "inner" form is part of a bigger layout with header, body, footer)
Show that you can edit content (CRUD)
Titletext
Titletext
Titletext
Titletext
Titletext
Titletext
Titletext
TitleExpand | ||
---|---|---|
| ||
Forms can have headers, footers, bodies, buttons, drop-downs, fields |
dddd |
From the Businesses Grid, drag the UID down onto the Business Detail form.
This creates a link, so the selected Business Is displayed.
Second Tab is for Contact Details
To be completed once we import the contact details.
Add a form for comments
Anchor | ||||
---|---|---|---|---|
|
...
Right click on the Comments column and create a form.
Set the form to Stream Comments created in 2d
From the Palette Theme 1 Template drag the item: Comment Header, onto the new form.
From the Palette App Builder Labelled drag the item: Card Container, onto the new form.
From the Palette Theme 1 Template drag the item: Comment Card, onto the small white card in the CardContainer.
Hold shift while doing this so the items is embedded.
Add a dashboard
Anchor | ||||
---|---|---|---|---|
|
Create a Dashboard, this will be used to edit our comments.
Create a new form.
From the Palette Theme 1 Template drag the item: Form Floating, onto the new form.
From the Repository delete:
Column Line Break
Column 2
Drag the following attributes from the Comments Stream onto content container:
UID
Hide
BusinessUID
Hide
Comment
Give the header a sensible name and delete the dynamic text
New Comment
Anchor | ||||
---|---|---|---|---|
|
From the repository drag the new Comment Dashboard onto the + on the Comments header.
Mapping Identifier
Anchor | ||||
---|---|---|---|---|
|
Drag the UID from the Businesses Grid created in 2b onto the + on the Comments header.
Set this up to map to BusinessUID
Go into the action by right clicking the button and select Action Edit*
Create a Context variable for UID set this to _NULL
Add Action
Anchor | ||||
---|---|---|---|---|
|
Open the Comments Stream
Create a new action, this is the same as the setup for the aforementioned but UID is set to Busineses.UID
Title
Anchor | ||||
---|---|---|---|---|
|
text
Title
Anchor | ||||
---|---|---|---|---|
|
text