This guide shows you how to create a simple screen. 

Introduction 

Anchor
1 1

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.

1. Add buttons for actions
   1. Add a "floating" form to add a description.
   2. Add the action to update stream
   3. Show the form in action - that is is always on top, and that save also closes the pop-up. 
2. Linking forms together
   1. Add a comments stream to the model
   2. Add comment cards
   3. 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.
   4. Add actions to the card
   5. Show the audit attributes on the card
   6. Add comments on the card.

Create an Application 

Anchor
2 2

Create your application: It is created with default options

Create

an Analysis Model  

Anchor
3 3

1. Pull in an existing file
2. Advanced: PhixFlow can connect to databases or load from files or...
3. Open the model and view the data - simple streamData and streams

Import data 

Anchor
4 4

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  

Anchor
5 5

Create a Comments Stream

Set Period to: Transactional.

Set Audit Manual Changes to: Ticked

Add attributes 

Anchor
6 6

Add the following attrinbutes:

BusinessUID as an Integer

BusinessName as a String of Size 100

Comment as a Big String

Image Added

1. Run the Stream

Add a Dashboard 

Anchor
7 7

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

Image Removed Previous                    Back to Contents               Next  Image Removed

Add a form to a tab 

Anchor
8 8

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.

Image Added

Link Tab to data 

Anchor
9 9

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

...

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.

Image Added

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

Image Added

New Comment 

From the repository drag the new Comment Dashboard onto the + on the Comments header.

Mapping Identifier 

Anchor
13 13

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

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