Versions Compared

Old Version 2

changes.mady.by.user Fiona Sargeant

Saved on

compared with

New Version Current

changes.mady.by.user Fiona Sargeant

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

...

...

...

...

...

...

...

...

...

...

...

...

Introduction

This course will demonstrates how to use the Theme 2 palettes to quickly create an application. It assumes you have already completed the training courses

The format of the course is a collection of short video tutorials, each accompanied by a set of notes that recap the material covered in the video. 

Course Content

This course contains the following parts:

Child pages (Children Display)

Before You Start

To follow the steps in the video, you will need some resources. Download media.zip and extract the files.

GUI Screen Structure

...

It also helps to understand the levels of structure in typical GUI screen, as shown in the following picture.

Image Modified
You can download and print this image: PDF Quick Reference Sheet.
The way a GUI screen is made up of levels of content is reflected in the PhixFlow repository. When you are working on a dashboard, right-click on any layout component and click Find in Repository. You can see where the item is within the levels of

...

Steps to create an application

Step 1.  Create an application.

Step 2.  Connect to business data

  1. Create an analysis model with a file collector that loads data from the Businesses Excel spreadsheet (available from media.zip).
  2. Set up the stream
  3. Period: Transactional
  4. Audit Manual changes
  5. Save
  6. Change Description to be bigstring
  7. Pin the stream tab so it stays handy
  8. Update the name to Business Data
  9. Run the stream to import the business data
  10. Save the model and check the default stream view contains data.

Step 3.  Create a dashboard. With two areas, one above the other.

...

  • Name: Business Data
  • Open Maximised: tick
  • Allow User to Resize: tick
  • Show Windows Button Bar: Tick

...

the

...

dashboard

...

structure

...

Step 4. Add a menu that you can use to open the dashboard:

  1. In the dashboard, click on the header area to open the dashboard properties tab.
  2. Drag the dashboard icon from the top left of the tab onto the menu bar at the top of the PhixFlow screen. 

Step 5.  Display data in a grid.

  1. Switch to the pinned stream properties tab.
  2. Drag the stream icon from the top left of the teb onto the top tile in the dashboard.
  3. PhixFlow prompts you to select how to display the data. Select the grid optionview-types-grid.pngImage Removed.
  4. PhixFlow opens a list of attributes. Select all the attributes and drag them onto the grey header bar in the tile.
  5. PhixFlow display the data from the stream in the grid.

Step 6.  

  1. In the lower tile, right-click Static Text and select Delete.
  2. Click on Dynamic Text to open its properties tab. Change its Name from Header 2 Dynamic to Name. This now matches one of the attributes in the stream. PhixFlow will recognise that it needs to change the header text to match the selected records Name value.
  3. From the palette drag the Field Collection (Fixed Width) component into the tile and enter a name for it.
  4. From the palette drag the Field Collection (Autosize) component into the tile and enter a name for it.
  5. Switch to the pinned stream tab and Shift+drag  the UID to Active attributes onto the left (fixed width) area.
  6. PhixFlow prompts you to confirm that Business Data should be the form's backing stream. Click Yes.
  7. From the stream tab, Shift+Drag Description onto the autosize area.
  8. To delete the UID attribute, in the dashboard lower tile, right-click UID and select Delete. and confirm.

Step 7.  Change the sizing

  1. Select the tile body, right-click and select Find in Explorer.
  2. Click Tile Body to open its properties.
  3. Clear the Auto Size check box and save the properties.
  4. PhixFlow expands the box so that all attributes are visible without needing to scroll.
  5. In the dashboard, select the tile and open its properties.
  6. Set Position Settings → Height to 390

Step 8. Hide the borders to the Field Collection areas.

  1. In the repository find Column 1
  2. In the CSS Properties, delete the border property.
  3. Repeat for Column 2.

Step 9. Set up a background filter so that the data displayed in the lower tile reflects the selected record in the upper tile.

  1. In the dashboard's upper tile, in the grey header bar, drag UID onto the dashboard background.
  2. PhixFlow opens a filter properties tab showing the condition UID equals BusinessData.UID
  3. Save the  filter.

Step 10.  Set the header for the dashboard and globally replace the icon.

...

Step 11.  Change a single image

...

Step 12.  Use the dashboard to add new data

...

.

...

Step 13.  Fix up the way data is displayed in the view.

...

Resize

Add scroll to show content

Remove auto size so the content determines the size.

Set the height to 550px

Update the Tile header and icon.

Update the main header and icon.

Drag UID from the grid onto the background to setup a filter.

Add a new record.

Edit the view:

Clear the number of periods.

Set the default sort order.

Set Name to be editable.

Set the grid to auto save.

Add new tile: Comments

Creating Comments Section

Set the Tile Container to row.

Set widths:

Set Business Data grow factor to 8.

Set width of Tile to 100%

Create Comments stream

Add stream to Comments Card

Create a comment editor dashboard

Create an Add action

To open the dashboard

Set the UID

Set the Business UID

Set the Business Name

Create an Update action

To open the dashboard

Set the UID

Set the Business UID

...