Versions Compared

Version Old Version 66 New Version Current
Changes made by

Anthony George

Zoe Baldwin

Saved on

Key

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

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

This page is for application designers. It explains the basic principles for how to add components from the palette as well as features to help you.

still todo-Anthony

  •  overview
  • icons
  • move pinning to bottom and note its more legacy
  • tidy text and a link to data-binding
  • design a basic form - series of - link to pages from video
  • Screen -button - create actionflow - wiring a basic actionflows

Overview

If you are new to PhixFlow and designing screens for an application, start with the Designing Screens fundamentals course found here: Designing Screens

Dragging Components Reminder

Components can be moved on a directly on a screen, in the layers section or in the repository using the following techniques, see Moving Items on a Screen:

  • Click and Drag, places items next to one another (siblings).
  • Click + Shift and Drag, places the dragged item inside the item it is dropped on (parent-child)
  • Where a Preferred Parent is present, drag puts an item directly inside the preferred parent.

Dividing Screens

You can divide a screen into multiple, resizing panes a number of ways:

Use Palette layouts that have multiple areas; see  

Overview

To divide a screen into multiple sections:

To resize a pane, drag its dividing line. This automatically resizes adjacent panes. To prevent resizing, This layout has:
  1. a container area type: split view
  2. sibling areas
  • Use pop-up menu options Add Area...; see Divide a Screen Using "Add Area" Options, below.
    • or in an area right-click to
    display
    • show the
    pop-up menu and select: Insert excerpt_area_lock_width_area_lock_widthnopaneltrue Insert excerpt_area_lock_height_area_lock_heightnopaneltrue

    To remove a pane:

  • First delete any layouts or components in it.
  • Right-click on the empty pane to display the pop-up menu.
    • Select  Insert excerpt_delete_item_delete_itemnopaneltrue Pane.  Anchoradd-areaadd-area
  • Right-click a screen
  • Use one of the Add Area... options to add a new part for the screen, separated with a dividing line.
    PhixFlow creates a new dashboard element for this part of the screen.
    • Add a suitable container, such as an area, form or card container. 
    • , below.

    Anchor
    palette
    palette

    Tip

    If you right-click on an existing area, in the context menu click Dashboard Options to see the Add Area options.

    Divide a Screen Using a Palette Layout

    Some palettes have layouts that have 2 areas contained by a split-view area. For example:

    • Basic Components → Split View Image Removed
    • Theme 2 - App Builder Base Serene Grey - Basic Components → Area Split Image Removed Image Added

    These can be used to divide your screen into separate areas while also providing a splitter which allows designers and users to resize the areas.

    Setup

    1. In the screen canvas toolbar, click
      Insert excerpt
      _palette
      _palette
      nopaneltrue
      .
    2. Expand a palette to find a layout that has 2 areas.
    3. Drag the layout from the palette onto an existing area.
    4. PhixFlow creates a layout with the following structure:

    Area

    Split View (special type of area)

    Area 1

    Area 2

    Dragging into a Screen

    To add a component to a screen, you can drag in:

    • components or layouts from:
      • the palette
      • the repository → Templates
    • streams or views to add data-components such as grids, graphs, bar or pie charts or cards.
    • attributes to add labelled fields
    • actions to add buttons.

    Theme 2.1 has been configured so that, as you drag a component or layout from a Theme 2.1 palette onto a screen, PhixFlow will highlight which containers are designed to act as parents for the layout or component.

    Dashboard Elements

    To add a data-component to a screen or pane, drag on:

    • either a stream
      PhixFlow prompts you to select how you want to display the data and creates a view.
    • or a view
      PhixFlow recognises the view type, such as a grid or chart.

    PhixFlow:

    • adds a data-component to the screen or pane
    • creates a new dashboard element. This is listed in the repository as a child of the dashboard. The dashboard element has the same name as the view.
    To remove a dashboard element, right-click to display the pop-up menu and select Insert excerpt_screen_screennopaneltrue Options →   Insert excerpt_element_delete_element_deletenopaneltrue.
    See also:

    Todo-Anthony add icons

    Drag FromItemDrag on toCreates Insert excerpt_palette_palettenopaneltrue

    component or layout

    anywhere on a screen

    the component(s) on the screen

    repository → Layout Templates

    component or layoutanywhere on a screen

    Either repository → Stream → Attribute

    Or a pop-up list of attributes

    attributean areaa labelled field

    Either repository → Stream

    Or stream properties icon (top left)

    stream

    anywhere on a screen

    • directly onto a screen
    • directly onto a screen element
    • onto an area
    • onto a form (area)

    Prompts you to select the data-component you want to add. This also creates a view based on the stream.

    Image Removed 

    Either repository → Stream → View

    Or stream properties → View section

    Or a pop-up list of views

    viewarea or component that displays dataTodo-Anthony For existing views, it knows what type of view it is. Adds the view of the type it already is.repository → Actionactionarea or forma button on the area or form to run the action

    default menu bar

    a button on the menu bar to run the action

    repository → Stream → Actionstream action from the backing streamarea or forma button on the area or form to run the actionheader of a data-componenta button on the header to run the actionrepository → Dashboardanother screen
    • the header of a data-component
    • default menu bar
    A button to open the screen
    Panel
    bgColor#e6f0ff
    titleBGColor#99c2ff
    titleAbout the default component palette

    When you drag items from the repository onto a screen, PhixFlow creates a component using the default template for that item. So it is important to make sure that you have set the right default component palette. This is set in System Configuration. Remember that this default will apply to all users of this PhixFlow instance.

    Pinning and Unpinning  Anchorpinpin

    You can fix the position of a component on an area by pinning it. When you drag a component or layout in from the palette it is automatically pinned. (See the table above for all pinned/unpinned).

    Note

    For components and layouts added from the Theme 2 palette, the properties have been set to allow responsive flow of the components, which override pinning.

    Unpinned

    When you drag in an unpinned component, PhixFlow automatically puts it in in the next space available. By default, this is underneath the previous component. However, you can control the flow using CSS properties. Components in forms are represented as DIV objects. 

    You can drag unpinned components around in their parent component, and PhixFlow puts them wherever you drop them.

    You can also manually control the order of unpinned components by editing the Order field in the details of the component. This is found in the Positional Settings section of the details. The video above gives an example of using both of these methods - dragging, and manual update.

    Pinned

    Pinned components can be placed anywhere on an area and you can drag pinned components to any position on a screen.

    You can pin the edges of the component to its parent component using the Positional Settings in the component's details. To do this, set the offsets between the top, right, bottom and left edges of the component to those of the parent. The offsets are in number of pixels between the edge of the component and the edge of the parent. 

    Tip

    If you set the right or bottom offsets in Positional Settings, this overrides any width or height set for the component.

    Switching Between Unpinned and Pinned

    Pinned components can be dragged over unpinned components, so be careful when mixing pinned and unpinned components on a form. Think of these as being laid out in two separate, overlapping layers on the screen.

    To change an unpinned component to pinned, press Ctrl and drag it.

    To unpin a pinned component, right-click on it and select Unpin Selected Objects. You can select several components at once, and unpin them all using this option. The components will move into the next available space in their respective parent components.

    Finding a Component's Container AnchorformBuildingFindComponentParentformBuildingFindComponentParent

    To find the container of a component in a screen, you can:

    right-click on the component and select  Insert excerpt_repository_find_repository_findnopaneltrue.
    PhixFlow opens the Layouts with the component selected. You can then see how the selected component fits into the parent-child hierarchy.
  • click on the component to open its properties.
    The name of the container is in Basic Settings → Parent.
  • click on the space next to the component to open its properties.
    This option is less reliable as a screen becomes more complex, as you may not be able to select the immediate parent.
    • Note

    Remember to check whether or not the component/layout is pinned. A pinned component always keeps the same parent, even if it is moved away from it on the screen.

    Preventing Accidental Dragging

    To prevent accidental dragging of components and layouts on the screen, go to the components properties → Positional Settings section, and tick Prevent Dragging.

    Auto Sizing

    When you are designing a screen, you can use the Layout area → Style Settings→ Auto-size property to make components adjust automatically when the application's window is resized by the user. 

    Note

    If you manually resize a component as you are designing a screen, it will automatically switch off the Auto Size property.

    You can use the context menu option Insert excerpt_autosize_autosizenopaneltrue to toggle the Auto Size property as you work. 

    Connecting Layouts to Data

    Todo-Anthony - check To connect a form area to data in a stream 

    • From the repository, drag the stream name onto an area or layout
    • From the stream properties, drag the icon at the top of the properties onto an area or layout.

    PhixFlow will prompt you to select the type of stream or card view that you want to create; see Stream Views Pop-Up Menu.

    Build Up a basic form

    Note that there are no fancy flow stuff for this.

    What data do you need to show - 

    1. Create screen 
    2. Open palette
    3. Add Basic Components > Form, and name
    4. Click on the screen to open the properties for your area. In shared styles you will see that this has some default shared styles applied.
    5. Palette Labelled fields > Add labelled fields you need. Click to see properties
      • The Labelled fields palette has composite items - see the Basic Settings checkbox.
      • there are two parts, a static text label and the data field. Making them composite means
      • They move as if they are one thing
      • The name you give to the items is used as the text for the label.
    6. Attributes list - open stream > attributes section or expand for list in repository
    7. Drag from attribute onto form
    HTML Comment

    The following videos will introduce the basic concepts of how you can drag fields into a screen: Videos in widget connector had links to:

    Code Blockhttps://www.youtube.com/watch?v=GCeiTdv0ty4 https://www.youtube.com/watch?v=oXt89u6QGXE
    1. , this example is horizontal but vertical options are also available. 
    2. Image AddedIf you have existing content on your screen this can be dragged into the appropriate area using the repository or layout section. Remember you will need to hold the shift key to drop content inside these areas.

    Divide a Screen Using the "Add Area" Options
    Anchor
    element
    element

    1. Right-click a screen.
    2. Click Screen Options.
    3. Use one of the Add Area... options to add a new area for the screen, separated by a dividing line.
      PhixFlow creates a new element in the form of a pane for this part of the screen.
    4. This new element is similar to a black screen and will require a suitable container, such as an area, form or card container in order for you to display content. 
      It may be easier to add one of the complete screens to the new element and remove the items you do not require.

    Resizing

    To resize a pane, drag its dividing line. This automatically resizes adjacent panes.

    To prevent resizing, right-click to display the popup menu and select:

    • Insert excerpt
      _area_lock_width
      _area_lock_width
      nopaneltrue
    • Insert excerpt
      _area_lock_height
      _area_lock_height
      nopaneltrue

    Removing a Pane

    First, delete any layouts or components in it.

    1. Right-click on the empty pane to display the popup menu.
    2. Select 
      Insert excerpt
      _delete_item
      _delete_item
      nopaneltrue
       Pane. 
      Anchor
      add-area
      add-area

    Learn More