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.

Image Removed

Part 1: Create a Simple Application 

Step 1.  Create an application

...

Step 2.  Connect to business data

...

• Period: Transactional
• Audit Manual Changes: tick
• Description to be bigstring.
• Name to Business 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 optionImage 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.  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.

...

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.

...

Part 2: Adding Comments and Maps

Step 1. 

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

1. In the repository, right-click the Analysis Model ETL and click Display.
2. In the model window, add a new stream. In the stream properties tab, set Basic Settings:
   • Name: Comments
   • Period: Transactional
   • Audit Manual Changes: tick
   • Save your changes.
3. In the Attributes section, click 

   Insert excerpt
   _add _add nopanel true

    to open a new attribute properties tab. Set:
   • Name: Comment
   • Type: Bigstring
   • Save your changes.
4. In the Attributes section, click 

   Insert excerpt
   _add _add nopanel true

    to open another new attribute properties tab. Set:
   • Name: BusinessUID
   • Type: Integer
   • Save your changes.
     The Attributes section should now list the attributes you created, Commend and BusinessUID, plus those added automatically when you ticked Audit Manual Changes (UID and the "Update" attributes).
5. Remember to save the analysis model as well as the changes to properties.
6. To reopen your dashboard, click on the Business Data menu option on the top  right of the PhixFlow window. (Added in Part 1 step 4.2).
7. Right-click the dashboard and select Unlock the Layout.
8. From the palette, Shift+drag CommentsComplete into the top comments area.
9. Click into the body of the comments section (which is a card) to open its card component properties.
10. Drag the properties to the same tab column as the palette, so it stays visible.
11. In the model window, bring the model to the front and click the Comments stream to open its properties.
12. Drag the stream icon from the properties tab onto the stream name in the card component tab and save the changes.
13. Minimise the model window so that the workspace shows the dashboard again.
14. In the dashboard, from the Business Data grid, drag the UID header onto the body of the comments. This sets the background filter for the card.
15. In the filter properties tab, change the Filter Details to use the BusinessUID instead of UID and save your changes.

Step 3.  Add an editor where users can enter and format comment text.

1. In the repository, right-click Dashboard and click 

   Insert excerpt
   _add _add nopanel true

   .
2. In the new dashboard properties tab, set
   • Name: CommentEditor
   • Allow User to Resize: untick
   • Show Window Button Bar: untick
   • Always On Top: tick
   • Save the changes.
3. PhixFlow opens the new empty dashboard, which will be the Comments editor.
4. From the palette, drag Form Popout - Complete into the new dashboard and enter its name; CommentsEditor
5. Switch to the model and click the Comments stream to open its properties. Pin the tab.
6. To reopen the dashboard, in the repository → Dashboards , right-click CommentEditor and select Display.
7. In the Comments dashboard, right-click and select Unlock the Layout. 
8. From the pinned Comments tab → Attributes section, drag the Comment attribute into the Comments dashboard.

Step 4. Set the comments editor header

1. In the Comments dashboard header, click Static Text and enter Comment for.
2. Click the Dynamic Text to open its properties tab and set Name to BusinessName. This will connect to a context parameter - to be set laterthat will be created in Step 5.4.

Step 5. 

...

Set up the Comment Editor Add button

This process also links the Comments area to the Comments Editor dashboard.

1. Ensure the Business Data Manager dashboard is visible and unlocked.
2. In the repository → Dashboards, drag CommentEditor onto the + button, which is in the top right of the comments box.
   This automatically creates an Action called CommentEditor in the repository. 
3. To test this works, lock the dashboard and click the + button. PhixFlow opens the Comment editor. Close the Comment Editor again and unlock the layout.
4. To create context parameters that connect the Comment area to the selected record:
   1. drag the UID header from the Business Data grid onto the Comments + button.  PhixFlow automatically opens a context parameter properties tab. Change the name to BusinessUID and save the properties.

   2. drag the Name header from the Business Data grid onto the Comments + button. PhixFlow automatically opens a context parameter properties tab. Change the name  to BusinessUID and save the properties.

      Tip
      The context parameters must have the same name as the Dynamic Text field on the dashboard in order to link them

      
      

5. To test Test your changes, lock
   1. Lock the dashboard and click the + button.
   2. PhixFlow opens the Comment editor. The dynamic text part of the header should now include the business name for the selected record.
   3. To see what context parameters are being used, right-click the Comments Editor dashboard and select Show Context Parameters.
   4. You can see that you are passing the Business Name and Business UID to the Comment Editor dashboard.
   5. Close the context parameter list and the Comment Editor dashboard.
6. In the repository Actions, right-click CommentEditor and click Edit to open the action properties. (This action was created automatically in step 5.2.)
7. Change the Name to NewComment.
8. Expand the Context Parameters.

Set up something for the UID

1.  
2. drag the UID header from the Business Data grid onto the Comments + button.  PhixFlow automatically opens a context parameter properties tab. Change the name to BusinessUID and save the properties.
drag the Name section and click 

Insert excerpt
_add _add nopanel true

. In the context parameter properties, set:
• Name: UID
• Expression: _NULL
• Save the context parameter properties.
3. Save the action properties.
4. Test your changes.
   • In the dashboard Comments area, click + to open the Comment Editor. You can now type into the comment field.
   • Notice the footer automatically changes the buttons in response to having a comment. This is controlled by the conditional formatting for the footer and buttons on it.
5. As the Comments Editor is designed to edit existing comments. The controls to add and delete will be in the Comments area. This means you do not need the New and Delete button on the Comment Editor dashboard. 
   1. Unlock the dashboard
   2. Right-click the New button and select Delete.
   3. Right-click the Delete button and select Delete.
   4. Lock the layout and close the comments editor.

Step 6.  Set up the Comments area edit button

1. Ensure the Business Data Manager dashboard is visible and unlocked.
2. In the repository → Dashboards, drag CommentEditor onto the edit button, which is in the bottom right of the Comments area.
   Image Added 
3. In the action properties, change Name to Update Comment and save the action.
4. To create context parameters that connect the Update Comment action to the selected record, drag the UID header from the Business Data grid onto the Comments + button. PhixFlow automatically opens a action properties → Context Parameters list.  Click UID to open its context parameter properties tab. Change the name  Name to BusinessUID and save the properties.

1. Set the Tile Container to row.
2. 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

...

2. Click

   Insert excerpt
   _add _add nopanel true

   . In the new context parameter properties tab, set:

   • the Name UID and save the properties.

   • Expression to _form.UID
     (_form refers to the backing form.)

   • Save the context parameter properties.

3. From the dashboard Business Data Manager grid, drag Name from the header to the Action Context Parameters list. 
4. In the Context parameter properties, change the Name to BusinessName and save your changes.
5. In the list of context parameters, drag BusinessUID to be second in the list and save your changes.
6. To test your changes:
   1. Lock the dashboard and click the edit button.
   2. PhixFlow opens the Comment editor. 
   3. Make a change to the comment and click Update.
   4. Notice that the changes you make are displayed in the Comments area.

Step 7.  Configure the map

1. Unlock the dashboard
2. Click in the map area to open its properties tab.
3. In the URL field, replace the <<ENTER KEY HERE>> text with the API key provided by Google.
   1. To obtain a Google Map API key visit: https://developers.google.com/maps/documentation/javascript/get-api-key
4. Lock the dashboard to see the map in action.

Step 8. Change the size of tiles

There are two ways to change the width of tiles or components.

• Position Settings → Width
• Style Settings → Grow Factor

The video shows how to set both of these.

1. In the repository, open the Tile Container properties. Change Style Settings → Direction: Row
2. In the repository, drag Comment to follow Grid. This changes the order they appear in the dashboard.
3. Open the Grid properties. Change Position Settings → Width 70%.
   The data grid now extends to 70% of the screen width. Comments occupies the remaining 30%. The other two tiles are then pushed into another row.
4. Open the Tile properties. Change Style Settings → Grow Factor: 8
   The data display area now extends to just under 70% of the screen width.