PhixFlow Help

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 6 Next »

This page is for application designers who want see how to quickly put together a simple application using Theme 2. For more detailed instructions for creating application see PhixFlow Training - Building Applications

Before You Start

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

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

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 the dashboard structure.

Part 1: Create a Simple Application 

Error rendering macro 'multimedia' : com.atlassian.renderer.v2.macro.MacroException: Cannot find attachment 'Building an App part 1.mp4'
 

Step 1.  Create an application

  1. In the repository right-click Application and select  Add . 
  2. Set the Name to Demo Application and save.

Step 2.  Connect to business data

  1. In the repository, right-click Analysis Model and select  Add.  Set the Name to ETL.
  2. In the model window, drag in a  File Collector. Browse to the Businesses Excel spreadsheet (available from media.zip) and upload. PhixFlow automatically creates a stream linked to the file collector. Click the stream icon to open its properties.
  3. In the stream properties, set:
    • Period: Transactional
    • Audit Manual Changes: tick
    • Description to be bigstring.
    • Name to Business Data.
  4. Save the stream properties.
  5. Pin the stream tab so it stays visible.
  6. Run the stream to import the business data
  7. Save the model and check the default stream view contains data.

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

  1. In the dashboard properties set
    • Name: Business Data
    • Open Maximised: tick
    • Allow User to Resize: tick
    • Show Windows Button Bar: Tick
  2. Open the Theme 2 App Builder palette. Drag Form Complete into the empty dashboard on the left. Enter its name.
  3. Drag the palette tab so that it is next to the repository tab. 
  4. In the repository Layouts, you can see the structure of the Business Data Form. 
  5. In the palette, select Tile Blank and Shift+drag it onto Tile Container in the repository. Enter the name Grid.
  6. In the repository, drag Grid to be first in the Tile Container. This automatically moves the tile in the dashboard from the right to the left.
  7. To set the direction of flow within the tile, open the properties for Tile Container and change Direction to Column. In the dashboard, the tiles automatically move so that one is above the other.

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.png.
  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.  Configure the lower tile.

  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.

  1. Click Static Text to open its properties. 
  2. In the properties, set Display Text to Business Data Manager
  3. Save the properties.
  4. Right-click Dynamic Text and select Delete.
  5. Click the PhixFlow icon to open its properties.
  6. In Shared Styles, click T2 - Icon Default to open its properties.
  7. In the default icon properties → Basic Settings → Background Image, click  Add to open a new image properties tab.
  8. In the image properties, set the Name to NewLogo
  9. Click Browse and navigate to the files extracted from media.zip. Select MyLogoTeal.png.
  10. Save the image properties.
  11. Save the default icon properties. The shared style will now display the MyLogoTeal.png image wherever Theme 2 specifies the default icon.

Step 11.  Change a single image

  1. In the dashboard lower tile, click the icon in the header to open its properties.
  2. In the properties Style Settings → Background Image, click  Add to open a new image properties tab.
  3. In the image properties, set the Name to BusinessIcon.
  4. Click Browse and navigate to the files extracted from media.zip. Select business48dp.png.
  5. Save the image properties.
  6. Save the default icon properties. The icon in the header changes to the selected one.

Step 12.  Use the dashboard to add new data.

  1. Right-click the dashboard and select Lock Dashboard or switch to  App Mode
  2. In the Dashboard, click the New button to clear all the data fields.
  3. Enter your own data into the fields in the lower tile.
  4. The upper tile now only shows the data you have added.

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

  1. Unlock the dashboard (or switch back to   Design Mode).
  2. Right-click the dashboard and click Show View Configuration.
  3. In the stream view properties tab → Advanced → Periods clear the box and save the properties.
  4. In Basic Settings → Default Sort Order click  Add.
  5. In the new sort order properties set Name: By Name and Save
  6. In the sort order properties → Sort Order Attributes click  Show Attributes.
  7. In the popup list of attributes, select Name and drag it into the list.
  8. Save the sort order properties.
  9. Save the stream view properties.
  10. Close the popup list of attributes
  11. In the stream view properties tab:
    •  Advanced → Autosave: tick. PhixFlow automatically saves any changes to the view.
    •  View Attributes, click Name to open its properties tab and in Grid Settings → Read Only: untick and save. This means users can change the Name field for records when using the application in  App Mode.
    • View Attributes, click AnnualTurnOver to open its properties tab and in Basic Settings → Number Format, select Sterling and save.
  12. In the dashboard upper tile, click the Customer Since header. (This is another way to open the properties tab for an attribute.) In Basic Settings → Date Time Format, select  a different format, for example Date(MMM-YYYY). Save the changes.
  13. In the dashboard upper tile, drag column dividers to resize columns.


Part 2: Adding Comments and Maps

Error rendering macro 'multimedia' : com.atlassian.renderer.v2.macro.MacroException: Cannot find attachment 'Building an App Part 2.mp4'


Step 1.  Add placeholders for new content.

  1. From the Theme 2 - App Builder palette, drag into the Tile Container in the repository:
    • Tile Blank and enter the name Comment
    • Tile Map and enter the name Map.
  2. PhixFlow displays the two new tiles in the dashboard. The map tile shows a request rejected message.

Step 2. Set up the Comments 


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

Set the Business Name


  • No labels

Please let us know if we could improve this page feedback@phixflow.com