...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
| Anchor | ||
|---|---|---|
|
...
|
...
Designing forms before starting development and creating templates leads to efficient app building and reduced development time. To recap the steps in the video:
Create a designed Dashboard
...
- 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
...
|
In this session we will begin constructing a feature rich application building on and expanding the knowledge we have acquired so far.
Create Businesses Streams
- Create a new Stream on the Contacts analysis model called Businesses
- 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 Contacts Stream create a view called Business Contacts
- Add all attributes and Hide the UID
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 portion
Create the Grid View Portion
- Open the configuration form for the stream Businesses, and bring the new dashboard back to the front
- Drag the stream icon from the configuration form onto the top left portion 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
- Set the Position Settings Top, Left, Right and Bottom to 0px
- Tick Prevent Dragging
- Update the Tab Header to Business
- Update the Title display text to Contact Details
- Add a Dynamic Text component called Name
- Use the Template StandardActionForm to create a layout on the first Tab and drag all the attributes from the Businesses stream onto it.
- Set the Title to Details
- Logically order the Attributes and hide the UID field
Set Default Sort Order and Link Views
- Create a Default Sort Order
- Drag the UID from the Grid View onto the details section to link the two elements.
It is advisable to always create a default sort order on all views.
Go into App Mode and enter data to test the new configuration.
Create Contacts Grid
- Exit App Mode
- Open the configuration form for the stream Contacts, and bring the Businesses dashboard back to the front
- Click on the Contact Details Tab on the Businesses Dashboard
- Drag the Stream View Business Contacts from the configuration form onto the Contact Details Tab
- Refresh the view and the results will be displayed.
- This View will be revisited in a later chapter of the course as we will link Contacts to specific businesses.
| Anchor | ||||
|---|---|---|---|---|
|