This guide shows you how to create a simple screen.
Introduction
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
Create your application: It is created with default options
Create an Analysis Model
- Data and streams
Import data
Import the Spreadsheet
Create a stream
Set Period to: Transactional.
Set Audit Manual Changes to: Ticked
Set Description to: Big String
Run the Stream
New Stream
Create a Comments Stream
Set Period to: Transactional.
Set Audit Manual Changes to: Ticked
Add attributes
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
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
Add a form to a tab
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
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
...
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
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
From the repository drag the new Comment Dashboard onto the + on the Comments header.
Mapping Identifier
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
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
text
Title
text