Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »


Introduction

In order to add content to the screen we need access to the palette and the screen must be unlocked.

Locking and Unlocking a screen

The screen is unlocked if you can see the context toolbar for the screen.

  1. To unlock the screen for editing, right-click anywhere on the screen to open the popup menu and select  Unlock.
  2. PhixFlow displays the toolbar for the screen so that you can begin to make changes.
  3. If you want to see how a user will experience the screen, you can  Lock the screen, this means when we click on an item we will interact with it rather than edit it.

Palette

  1. To view the palette, click  Palette from the context toolbar to display the palette on the right.

Adding Content

We will now create the following screen:

Adding a Grid

We can drag a table directly onto a screen to display it. This is how:

  1. From the toolbar click  Table
  2. The list of available tables will appear in the repository
  3. Drag the companies table onto the screen canvas.
  4. Select how you want to display the data, select Grid.
  6. The attribute picker appears and here we can select the attributes we wish to display, this will include the attributes from the table and those from related tables.
  7. Select all the attributes and drag them onto the grid.
  8. Column widths can be set by dragging the header to the desired width.
    1. If you want a specific size, click the column header.
    2. In the properties that open navigate to Grid Settings → Grid Default Width (pixels) and enter a specific value here. 
  9. Click on the Company Name column header
    1. Set Grid Settings → Grid Default Width (pixels) to be, 200.
    2. In the Label section we will change the name displayed in the column header to be, Name.
    3. Click  Save
  10. Take some time to space out the columns as required.
    1. Once you are happy with your column layout you can test it in app mode to see how it will appear to users. 
    2. Click  Application Mode in the top right corner of the screen to switch the application into App Mode. This is how users will experience your application.
      1. You can lock an app to interact with it as a user will but design panes remain displayed.
    3. To switch back to designing your application, click  Design Mode in the top right hand corner. Lock.

Set a Static Header

  1.  Click on the header, Header 1 Dynamic.
  2. Its properties open on the right.
  3. In the Default Value, change the text to be Companies Data.
  4. Click  Save.
  5. IN the event you do not see the change appear on your screen, close and reopen the screen.

Add Items from the Palette

  1. We will now add an additional Tile.
  2. Open your palette.
  3. Navigate to the Tiles section
  4. Drag Column - Blank onto your screen.
    1. Notice the centre of the screen highlights this is because the body of your screen is the preferred parent of a Tile.
    2. There are lots of tiles available each designed to satisfy a specific need or act as a foundation for your own design. Mouse over the tiles to find out more about each.
  5. Name the tile Additional Info.

Check Point

At this point your screen should look like this:


Add a Card Container

We will add a card container that will display the employees for the selected company.

  1. In the palette expand the Card Containers section.
  2. Drag Contacts onto the tile Additional Info.
  3. We now have a card container that is designed to hold contact information.

build up a employees contact card.

Add a splitter and move card into the top

Add a map to the bottom.

Link the two areas

Add the Crud buttons

Create a new screen and show more screen options


About Tables → Views → Grids


Adding Data as a Grid

  1. The Grid
    1. Use Custom Data Range
  2. The View
    1. Periods
    2. Inheriting the period from the table.
  3. The Table
    1. Table Period.
  4. Combined filtering
    1. Does the grid setting override the view????
  5. CRUD Buttons
    1. Adding Crud buttons after prompt.
  6.  Attributes
    1. Adding attributes
    2. Relational Attributes
    3. Reordering Attributes
    4. Hiding Attributes
    5. Conditionally Hiding Attributes.
  7. Styling a Grid
    1. Basics
      1. Bold Text
    2. Available Styling i.e. default styles.
    3. Conditional Formatting Background Colour
      1. Cell and Row.
    4. Removing the Title
    5. Labelling and double header?
    6. Link to in depth How To guide
  8. In grid editing, link to how to.

Adding Data as a Card Container

  1. The Container
    1. Table
    2. View
    3. Filtering
  2. The Cards
    1. Design and App mode display.
    2. Adding filters dynamically
  3. Changing the backing attributes

Adding a Chart

  1. Simple Setup
  2. Colour Maps
  3. Link to setting up more chart types.

Finding Layouts and Components

It can be very useful to find a layout, component or container. There are two ways to do this:

Using Layers

The Layers pane is expandable from the left of the screen canvas. Select an item:

  • on the canvas to highlight it in the Layers pane
  • in the Layouts pane to highlight it on the canvas.

If the layer section is not visible click  Show/Hide Layer Panel. 

Using Find in Repository

Right-click any item on an unlocked screen and select  Find in Repository Alternatively, to search the repository, expand the Components section and navigate to the component. The position of the components on a screen is reflected in their order and nesting in the repository list. 


To check whether a component is shared with multiple applications, open its properties and check the Parent Details section, which names the application or package to which the component belongs. For example a component that is shared between several applications has a package as its parent; see Package.

Moving Components

When you move a component or layout, you drag it onto another component. 

  • drag and drop places a component next to the component on which you drop. This creates a sibling relationship. 
  • shift+drag and drop places a component into the component on which you drop. This creates a parent-child relationship.

If you drag a component that is a parent, all its children move with it.

  See Moving Components on a Screen.


  1. Options
  2. Templates
    1. Complete
    2. Blank
  3. Screen Options
    1. Floating
    2. Size
    3. Open Maximised
  4. Creating from an ERD
  5. Creating from a Workflow
    1. Available Unused Actions.

Styles 

explanation

Style Hierarchy

  1. Application Styles
  2. Shared Style
  3. Local Styles
  4. Formatting Rules
  5. Overriding Styles Best Practice
  6. Clearing Styles

Creating Screens from the Home page

  1. Options
  2. Templates
    1. Complete
    2. Blank
  3. Screen Options
    1. Floating
    2. Size
    3. Open Maximised
  4. Creating from an ERD
  5. Creating from a Workflow
    1. Available Unused Actions.

Data Type and Formatting

  1. Date
  2. Date-Time
  3. Numbers


  • No labels