...
...
...
...
...
...
...
...
...
...
...
...
...
Introduction
This course will demonstrates how to use the Theme 2 palettes to quickly create an application. It assumes you have already completed the training courses
The format of the course is a collection of short video tutorials, each accompanied by a set of notes that recap the material covered in the video.
Course Content
This course contains the following parts:
Child pages (Children Display) |
---|
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.
Part 1: Create a Simple Application
Multimedia | ||
---|---|---|
|
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.
- In the dashboard properties set
- Name: Business Data
- Open Maximised: tick
- Allow User to Resize: tick
- Show Windows Button Bar: Tick
- Open the Theme 2 - App Builder palette. Drag Form Complete into the empty dashboard on the left. Enter its name.
- Drag the palette tab so that it is next to the repository tab.
- In the repository Layouts, you can see the structure of the Business Data Form.
- In the palette, select Tile Blank and Shift+drag it onto Tile Container in the repository. Enter the name Grid.
- 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.
- 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.
- In the dashboard, click on the header area to open the dashboard properties tab.
- 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.
- Switch to the pinned stream properties tab.
- Drag the stream icon from the top left of the teb onto the top tile in the dashboard.
- PhixFlow prompts you to select how to display the data. Select the grid option.
- PhixFlow opens a list of attributes. Select all the attributes and drag them onto the grey header bar in the tile.
- PhixFlow display the data from the stream in the grid.
Step 6. Configure the lower tile.
- In the lower tile, right-click Static Text and select Delete.
- 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.
- From the palette drag the Field Collection (Fixed Width) component into the tile and enter a name for it.
- From the palette drag the Field Collection (Autosize) component into the tile and enter a name for it.
- Switch to the pinned stream tab and Shift+drag the UID to Active attributes onto the left (fixed width) area.
- PhixFlow prompts you to confirm that Business Data should be the form's backing stream. Click Yes.
- From the stream tab, Shift+Drag Description onto the autosize area.
- To delete the UID attribute, in the dashboard lower tile, right-click UID and select Delete. and confirm.
Step 7. Change the sizing.
- Select the tile body, right-click and select Find in Explorer.
- Click Tile Body to open its properties.
- Clear the Auto Size check box and save the properties.
- PhixFlow expands the box so that all attributes are visible without needing to scroll.
- In the dashboard, select the tile and open its properties.
- Set Position Settings → Height to 390
Step 8. Hide the borders to the Field Collection areas.
- In the repository find Column 1
- In the CSS Properties, delete the border property.
- 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.
- In the dashboard's upper tile, in the grey header bar, drag UID onto the dashboard background.
- PhixFlow opens a filter properties tab showing the condition UID equals BusinessData.UID
- 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
Multimedia | ||
---|---|---|
|
Step 1. Add placeholders for new content.
- 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.
- PhixFlow displays the two new tiles in the dashboard. The map tile shows a request rejected message.
Step 2. Set up the Comments area.
...
- Name: Comments
- Period: Transactional
- Audit Manual Changes: tick
- Save your changes.
...
- Name: Comment
- Type: Bigstring
- Save your changes.
...
- 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).
...
Step 3. Add an editor where users can enter and format comment text.
...
- Name: CommentEditor
- Allow User to Resize: untick
- Show Window Button Bar: untick
- Always On Top: tick
- Save the changes.
...
Step 4. Set the comments editor header
- In the Comments dashboard header, click Static Text and enter
Comment for
. - Click the Dynamic Text to open its properties tab and set Name to BusinessName. This will connect to a context parameter - to be set later.
Step 5. Link the Comments area to the Comments Editor dashboard.
...
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 |
...
Set up something for the UID
-
- 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 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. |
- 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
...