...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Designing forms before starting development and creating templates leads to efficient app building and reduced development time.
| Widget Connector | ||||||
|---|---|---|---|---|---|---|
|
In this session we will begin building a feature-rich application, using the knowledge we have acquired so far and expanding on it. To recap the steps in the video:
Create
...
Businesses Streams
- Create a new Dashboard
Anchor _Hlk529356596 _Hlk529356596 with the Name StandardActionDashboard - Create a new Form with the following settings:
- Name: StandardActionForm
- Show Vertical Scrollbar: tick
- This allows content to expand without compromising visibility.
- Auto Size: tick
- This will resize the area to automatically use up all available space.
- Direction: Column
- This forces the layout into a single column.
- Justify: Flex Start
- Justifies the content to the left.
- Align: Stretch
- Vertically spaces the content out evenly using the available space.
- Clear all Position Settings except Order and Tab Index
- Prevent Dragging: tick
Create a Standard Layout
- Holding the Shift key add a new Area to the form with the following settings:
- Name: AreaHeader
- Direction: Row
- This forces the layout into a single row.
- Justify: Flex Start
- Justifies the content to the left.
- Align: Center
- Centers the content vertically.
- Position Settings:
- Order: 1
- Tab Index: 1
- Height: 60px
- Prevent Dragging: tick
- All other Position Settings should be blank.
- Add a new Shared Style called Title
- Font Size: 24
- CSS properties:
- CSS Tag: padding-left
- Value: 10px
- Add a Static Text box to the AreaHeader and apply the Shared Style Title
- In the configuration of the Title, remove the Width and Height
- Holding the Shift key add a new Area to the form with the following settings:
- Name: AreaBody
- Show Vertical Scrollbar: tick
- Auto Size: tick
- Direction: Column Wrap
- Places the content into columns according to size and order
- Justify: Flex Start
- Align: Stretch
- Position Settings:
- Order: 2
- Tab Index: 2
- Prevent Dragging: tick
- All other Position Settings should be blank. The Auto Size will automatically resize this element to use all the space available.
Create a Footer Template
- Find the SimpleButtonArea in the repository created in the first video.
Remember it is possible to find a component on a Dashboard and use the right click option Find in Explorer.
- Use Copy as a template to create a Template from the button configuration that can be used again.
- Drag this SimpleButtonArea Template onto the dashboard. This will be the footer.
Update the Standard Layout
- Add the new SimpleButtonArea template to StandardActionForm
- Position Settings:
- Order: 3
- Tab Index: 1
- Width: 100%
- Height: 45px
- Prevent Dragging: tick
- All other Position Settings should be blank.
...
Create a Form Template
- Select the StandardActionForm in the repository
- Use Copy as a template to create a Template version of the form configuration that can be used again.
...
- Stream on the
Contactsanalysis model. Give it the nameBusinesses. - Set the Period of the stream to Transactional.
Add attributes to the stream.
Name
Type
UID
Integer
Name
String
Type
String
Address1
String
Address2
String
Postcode
String
AnnualTurnOver
Decimal
CustomerSince
DateTime
Description
Bigstring
Active
TrueFalse
- Create another Stream called
BusinessNotes. - Set the Period of the stream to Transactional.
Add attributes to the stream.
Name
Type
UID
Integer
NoteDate
DateTime
NoteByUser
String
Note
String
BusinessUID
Integer
- In the
ContactsStream, create a view calledBusinessContacts. Add all attributes and hide theUID.
Create the Dashboard
- Create a new Dashboard with the Name
Businesses, and click on Open Maximised. - Divide the dashboard into three portions using one vertical line, and then a horizontal line in the left pane.
Create the Grid View Portion
- Open the configuration form for the
BusinessesStream, and bring the new dashboard to the front. - Drag the stream icon from the configuration form onto the top left of the dashboard, to create a Grid View.
Create the Details Portion
- In the bottom left portion, create a new Form called
BusinessDetails. - Add a Tabs component from the palette.
- Find the Tabs component in the repository and set:
- Position Settings: Top, Left, Right and Bottom to 0px
- Prevent Dragging: tick
- Update the Tab Header to
Business. - Update the Title display text to
Contact Details. - Add a Dynamic Text component called
Name.- As
Nameis also the name of an attribute on the stream backing our form, PhixFlow will automatically display the value held in the attribute in the new component, in this case the Dynamic Text. - Also note that if you give a component the name of a context variable, PhixFlow will also link the context variable value to the new component. If you have both a stream attribute and a context variable with the same name as your new component, the attribute will take precedence.
- As
- Use the Template
StandardActionFormto create a layout on the first Tab. Drag all the attributes from theBusinessesstream onto it. - Set the Title to
Details. - Logically order the Attributes and hide the
UIDfield.
Set the Default Sort Order and Link Views
- Create a Default Sort Order.
- Drag the
UIDfrom the Grid View onto the details section to link the two elements.
| Tip |
|---|
We recommend that you always create a default sort order on all views. |
Go into App Mode and enter some data to test the new configuration.
Create a Contacts Grid
- Exit App Mode.
- Open the configuration form for the stream
Contacts, and bring theBusinessesdashboard to the front. - Click on the
Contact Detailstab on the Businesses dashboard. - Drag the Stream View
BusinessContactsfrom the configuration form onto theContact Detailstab. - Refresh the view and the results will be displayed.
This view will be revisited in a later chapter of the course, when we will link contacts to specific businesses.
| Panel |
|---|
Next video: 5. Custom Actions |