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 

   Insert excerpt
   _unlock _unlock nopanel true

   .
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 

   Insert excerpt
   _lock _lock nopanel true

    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 

   Insert excerpt
   _palette _palette nopanel true

    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

   Insert excerpt
   _tableOnly _tableOnly nopanel true

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.

Image Removed

1. Image Added
2. The attribute picker appears and here we can select the attributes we wish to display, this will include the attributes from the table and

1. those from related tables.
2. Select all the attributes and drag them onto the grid.
3. 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. 
4. Click on the Company Name column header
   Set Grid Settings →
   1. 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 

         Insert excerpt
         _save _save nopanel true

   2. 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 

         Insert excerpt
         _app_mode _app_mode nopanel true

          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

         Insert excerpt
         _design_mode _design_mode nopanel true

          in the top right hand corner.

         Insert excerpt
         _lock _lock nopanel true

         .

   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 

      Insert excerpt
      _save _save nopanel true

      .
   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. Preferred Parent Highlighting
5. Adding Tiles
   1. Tile Types
6. Editing Headers
7. Editing Footers
Moving Content on the ScreenShift or not to Shift

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.
5. 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.

Check Point

At this point your screen should look like this:

Image Added




Add a card

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

Anchor
formBuildingFindComponentParent formBuildingFindComponentParent

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 

Insert excerpt
_layer_slider _layer_slider nopanel true

. 

Using Find in Repository

Right-click any item on an unlocked screen and select

Insert excerpt
_repository_find _repository_find nopanel true

 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. 






Tip
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

Insert excerpt
Moving Components on a Screen Moving Components on a Screen nopanel true

  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