Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
This guide shows you how

Use the videos and instructions in this 30 minute Quick Start Guide to create a simple screenapplication.  Anchortoctoc

Table of Contents

Introduction  Anchor11

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  Anchor22

Create your application: It is created with default options

Create an Analysis Model   Anchor33
  1. Data and streams
Expand
titleExplore the possibilities
  • Think about data first - ERD
    scroll down the properties - there are lots of options that you can set for your application
Import data  Anchor44

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   Anchor55

Create a Comments Stream

Set Period to: Transactional.

Set Audit Manual Changes to: Ticked

Add attributes  Anchor66

Add the following attrinbutes:

BusinessUID as an Integer

BusinessName as a String of Size 100

Comment as a Big String

Image Removed

  1. Run the Stream
Add a Dashboard  Anchor77

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
titleExplore the possibilities

You can show data as a table, but also as charts

Add a form to a tab  Anchor88

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 Removed

Link Tab to data  Anchor99
Expand
titleExplore the possibilities

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  Anchor1010

...

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 Removed

Add a dashboard

  Anchor1111

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 Removed

New Comment 

  Anchor1212

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

Mapping Identifier  Anchor1313

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  Anchor1414

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  Anchor1515

text

Title  Anchor1616textPhixFlow is a flexible platform that can help you to manage your data. This Quick Start Guide introduces the process you can follow to build an application:

Child pages (Children Display)

Image Added

Watch the Video

To illustrate the process, you will create an application that looks like this:

Iframe
srchttps://www.youtube.com/embed/cwGuTCDbZLw?rel=0
width900px
height500px

Insert excerpt
_video_controls
_video_controls
nopaneltrue

Check Your Setup

Before starting, log into PhixFlow. In the bottom right, click 

Insert excerpt
_palette
_palette
nopaneltrue
 to open the palette tab and look for Theme 1 - App Builder 

Image Added

If you do not have the palette, you or your administrator can import it.

Expand
titleHow to import the palette
  1. Download the theme file: config_Theme1_20190625.xml.
  2. Log into PhixFlow.
  3. In the bottom right of the PhixFlow window, click 
    Insert excerpt
    _administration
    _administration
    nopaneltrue
     Menu.
  4. Select Import Options
  5. Select Import Configuration.
  6. Browse to and select the theme file and click Open.
  7. Click 
    Insert excerpt
    _upload_button
    _upload_button
    nopaneltrue
     and click 
    Insert excerpt
    _dialog_finish
    _dialog_finish
    nopaneltrue
    .
  8. Ignore the password prompt and click 
    Insert excerpt
    _dialog_finish
    _dialog_finish
    nopaneltrue
     again.
  9. PhixFlow loads the palette. This may take a few seconds.
  10. To check the palette is loaded, In the bottom right, click 
    Insert excerpt
    _palette
    _palette
    nopaneltrue
     to open the palette tab and look for Theme 1 - App Builder 
    Image Added
Note

This theme is provided by PhixFlow. It may be overwritten when PhixFlow is upgraded to the next version. If you want to adapt this palette, please take a copy and make your changes there.


Now you can get started with step 1 - set up an application container.